:root {
    --skin-color: #17057e;
    --bg-black-900: #f2f2fc;
    --bg-black-100: #fdf9ff;
    --bg-black-50: #e8dfec;
    --text-black-900: #302e4d;
    --text-black-700: #504370;
    --rgb-white: 250, 250, 250;
    --rgb-black: 0, 0, 0;
    --main-transition: 0.3s
  }
  
  body.dark {
    --bg-black-900: #151515;
    --bg-black-100: #222222;
    --bg-black-50: #39393939;
    --text-black-900: #ffffff;
    --text-black-700: #e9e9e9;
    --rgb-white: 0, 0, 0;
    --rgb-black: 250, 250, 250
  }
  
  *,
  :after,
  :before {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none
  }
  
  html {
    scroll-behavior: smooth;
    font-size: 16px
  }
  
  html ::-moz-selection {
    color: var(--bg-black-900);
    background-color: var(--text-black-900)
  }
  
  html ::selection {
    color: var(--bg-black-900);
    background-color: var(--text-black-900)
  }
  
  @media (max-width:991px) {
    html {
      font-size: 14px
    }
  }
  
  @media (max-width:767px) {
    html {
      font-size: 12px
    }
  }
  
  @media (max-width:576px) {
    html {
      font-size: 11px
    }
  }
  
  html body {
    padding: 0;
    margin: 0;
    line-height: 1.5;
    overflow-x: hidden;
    cursor: url("./../../../imgs/cursor1.webp"), auto;
    font-family: "Cairo", sans-serif;
    font-size: 1rem
  }
  
  ul {
    list-style: none;
    margin: 0;
    padding: 0
  }
  
  a {
    text-decoration: none;
    color: inherit
  }
  
  .hide {
    display: none
  }
  
  .show {
    display: block !important;
    -webkit-animation: ppItems 0.2s cubic-bezier(0.42, 0, 0.64, 1.53);
    animation: ppItems 0.2s cubic-bezier(0.42, 0, 0.64, 1.53)
  }
  
  .close {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: 0.4s all linear;
    transition: 0.4s all linear;
    overflow: hidden;
    margin-top: -300px
  }
  
  .open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    -webkit-transition: 0.4s all linear;
    transition: 0.4s all linear
  }
  
  .bg-blur {
    background: rgba(var(--rgb-white), 0.3);
    -webkit-box-shadow: inset 0 0 20px rgba(var(--rgb-black), 0.1);
    box-shadow: inset 0 0 20px rgba(var(--rgb-black), 0.1);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
  }
  
  .bg-blur:hover {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-box-shadow: inset 0 0 0px rgba(var(--rgb-black), 0.1), 0 0 0px rgba(var(--rgb-black), 0.1), 0 0 3px rgba(var(--rgb-black), 0.1);
    box-shadow: inset 0 0 0px rgba(var(--rgb-black), 0.1), 0 0 0px rgba(var(--rgb-black), 0.1), 0 0 3px rgba(var(--rgb-black), 0.1)
  }
  
  .stop-scrolling {
    overflow-y: hidden
  }
  
  .hide-scroll::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none;
    scrollbar-width: none
  }
  
  .container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    position: relative
  }
  
  @media (min-width:768px) {
    .container {
      width: 750px
    }
  }
  
  @media (min-width:992px) {
    .container {
      width: 970px
    }
  }
  
  @media (min-width:1200px) {
    .container {
      width: 1170px
    }
  }
  
  @media (max-width:1199px) {
    .main-container {
      padding-left: 0
    }
  }
  
  .section {
    background-color: var(--bg-black-900);
    z-index: 0;
    opacity: 1;
    padding: 3rem 0 4.375rem;
    min-height: min(700px, 100vh);
    overflow: hidden
  }
  
  .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative
  }
  
  .pd-20 {
    padding-inline: 1.25rem
  }
  
  #loader.loader {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(0, 0, 0);
    z-index: 99999;
    display: none
  }
  
  #loader.loader .contain {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative
  }
  
  #loader.loader img {
    width: 3rem
  }
  
  #loader.loader span {
    width: 12.5rem;
    height: 12.5rem;
    border: 0px solid transparent;
    border-radius: 50%;
    position: absolute
  }
  
  #loader.loader span:first-child {
    border-bottom: 0.5rem solid rgb(255, 0, 255);
    border-left: 0.5px solid transparent;
    -webkit-animation: rotateSpan1 2s linear infinite;
    animation: rotateSpan1 2s linear infinite
  }
  
  #loader.loader span:nth-child(2) {
    border-right: 0.5rem solid rgb(0, 229, 255);
    border-bottom: 0.5px solid transparent;
    -webkit-animation: rotateSpan2 2s linear infinite;
    animation: rotateSpan2 2s linear infinite
  }
  
  #loader.loader span:nth-child(3) {
    border-top: 0.5rem solid rgb(204, 255, 0);
    border-right: 0.5px solid transparent;
    -webkit-animation: rotateSpan3 2s linear infinite;
    animation: rotateSpan3 2s linear infinite
  }
  
  #loader.loader.active {
    display: block;
    opacity: 1;
    visibility: visible
  }
  
  @-webkit-keyframes rotateSpan1 {
    0% {
      -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)
    }
  
    to {
      -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
    }
  }
  
  @keyframes rotateSpan1 {
    0% {
      -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)
    }
  
    to {
      -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
    }
  }
  
  @-webkit-keyframes rotateSpan2 {
    0% {
      -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
      transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)
    }
  
    to {
      -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
      transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
    }
  }
  
  @keyframes rotateSpan2 {
    0% {
      -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
      transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)
    }
  
    to {
      -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
      transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
    }
  }
  
  @-webkit-keyframes rotateSpan3 {
    0% {
      -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
      transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)
    }
  
    to {
      -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
      transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
    }
  }
  
  @keyframes rotateSpan3 {
    0% {
      -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
      transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)
    }
  
    to {
      -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
      transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
    }
  }
  
  .style-switcher {
    position: fixed;
    z-index: 999;
    top: 5.35rem;
    right: 1.25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem
  }
  
  @media (max-width:991px) {
    .style-switcher {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      position: static
    }
  }
  
  .style-switcher .s-icon {
    background-color: var(--bg-black-100);
    color: var(--text-black-900);
    font-size: 1.25rem;
    height: 2.5rem;
    width: 2.5rem;
    border: 1px solid rgba(var(--rgb-black), 0.2);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 0;
    cursor: pointer;
    -webkit-transition: 0.3s ease-in-out all;
    transition: 0.3s ease-in-out all
  }
  
  .style-switcher .s-icon:hover {
    border-radius: 50%;
    color: var(--bg-black-100);
    background-color: var(--text-black-900)
  }
  
  .style-switcher .colors {
    padding: 0.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.5rem;
    background-color: var(--bg-black-100);
    border-radius: 0.375rem;
    position: absolute;
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-transition: 0.6s ease-in-out all;
    transition: 0.6s ease-in-out all
  }
  
  .style-switcher .colors.open {
    background-color: var(--bg-black-100);
    opacity: 1;
    visibility: visible;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
  }
  
  .style-switcher .colors .bow {
    width: 2rem;
    height: 1.7rem;
    border-radius: 50%;
    position: relative;
    background-color: transparent;
    -webkit-box-shadow: inset 0 0 0.4rem rgba(var(--rgb-black), 0.2);
    box-shadow: inset 0 0 0.4rem rgba(var(--rgb-black), 0.2)
  }
  
  .style-switcher .colors .bow:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 70%;
    height: 0.3125rem;
    border: 2px solid #444;
    border-radius: 50%;
    -webkit-box-shadow: 0 1px #fff;
    box-shadow: 0 1px #fff
  }
  
  .style-switcher .colors .bow .liquid {
    position: absolute;
    top: 50%;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border-bottom-left-radius: 5rem;
    border-bottom-right-radius: 5rem;
    cursor: pointer
  }
  
  .style-switcher .colors .bow .liquid:before {
    content: "";
    position: absolute;
    top: -0.1563rem;
    width: 100%;
    height: 0.25rem;
    background: #000;
    border-radius: 50%
  }
  
  .style-switcher .colors .color-1 .liquid {
    -webkit-filter: drop-shadow(0 0 3px #000080);
    filter: drop-shadow(0 0 3px #000080);
    background-color: #000080
  }
  
  .style-switcher .colors .color-1 .liquid:before {
    -webkit-filter: drop-shadow(0 0 80px #000080);
    filter: drop-shadow(0 0 80px #000080);
    background: #000080
  }
  
  .style-switcher .colors .color-2 .liquid {
    -webkit-filter: drop-shadow(0 0 3px #fbce4c);
    filter: drop-shadow(0 0 3px #fbce4c);
    background-color: #fbce4c
  }
  
  .style-switcher .colors .color-2 .liquid:before {
    -webkit-filter: drop-shadow(0 0 80px #fbce4c);
    filter: drop-shadow(0 0 80px #fbce4c);
    background: #9c7a15
  }
  
  .style-switcher .colors .color-3 .liquid {
    -webkit-filter: drop-shadow(0 0 3px #2196f3);
    filter: drop-shadow(0 0 3px #2196f3);
    background-color: #2196f3
  }
  
  .style-switcher .colors .color-3 .liquid:before {
    -webkit-filter: drop-shadow(0 0 80px #2196f3);
    filter: drop-shadow(0 0 80px #2196f3);
    background: #133f84
  }
  
  .style-switcher .colors .color-4 .liquid {
    -webkit-filter: drop-shadow(0 0 3px #37b182);
    filter: drop-shadow(0 0 3px #37b182);
    background-color: #37b182
  }
  
  .style-switcher .colors .color-4 .liquid:before {
    -webkit-filter: drop-shadow(0 0 80px #37b182);
    filter: drop-shadow(0 0 80px #37b182);
    background: #237b5a
  }
  
  .style-switcher .colors .color-5 .liquid {
    -webkit-filter: drop-shadow(0 0 3px #ff5400);
    filter: drop-shadow(0 0 3px #ff5400);
    background-color: #ff5400
  }
  
  .style-switcher .colors .color-5 .liquid:before {
    -webkit-filter: drop-shadow(0 0 80px #ff5400);
    filter: drop-shadow(0 0 80px #ff5400);
    background: #8d3208
  }
  
  .logo-link {
    font-family: "Poppins", sans-serif;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #2006a7;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    cursor: pointer
  }
  
  @media (max-width:991px) {
    .logo-link {
      padding: 0.625rem;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      position: relative;
      left: unset;
      -webkit-transform: unset;
      transform: unset;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start
    }
  }
  
  .logo-link .logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }
  
  .logo-link .logo li {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 800;
    text-shadow: -0.2rem 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
    margin-left: -0.3125rem;
    -webkit-transform: scaleY(1.3);
    transform: scaleY(1.3);
    -webkit-filter: drop-shadow(0rem 0.125rem 0.125rem rgba(0, 0, 0, 0.1));
    filter: drop-shadow(0rem 0.125rem 0.125rem rgba(0, 0, 0, 0.1))
  }
  
  .logo-link .logo li:nth-child(4) {
    margin-left: -0.125rem
  }
  
  .logo-link .logo li:nth-child(5) {
    margin-left: 0.0625rem
  }
  
  .logo-link .logo li:nth-child(6),
  .logo-link .logo li:nth-child(7),
  .logo-link .logo li:nth-child(8) {
    margin-left: -0.4375rem
  }
  
  .header {
    background-color: var(--bg-black-100);
    -webkit-box-shadow: 0 0 0.9375rem 0.1rem rgba(var(--rgb-black), 0.2);
    box-shadow: 0 0 0.9375rem 0.1rem rgba(var(--rgb-black), 0.2);
    position: relative
  }
  
  .header nav.container-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative
  }
  
  .header nav.container-header .contain-logo-clr {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
  }
  
  .header nav.container-header .nav {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.3125rem;
    height: 4rem
  }
  
  @media (max-width:991px) {
    .header nav.container-header .nav {
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      height: 3rem
    }
  }
  
  .header nav.container-header .nav li:nth-child(4) {
    margin-left: auto
  }
  
  @media (max-width:991px) {
    .header nav.container-header .nav li:nth-child(4) {
      margin-left: 0
    }
  }
  
  .header nav.container-header .nav>li {
    color: var(--text-black-900);
    width: 6rem;
    height: 100%;
    cursor: pointer;
    position: relative;
    z-index: 1
  }
  
  .header nav.container-header .nav>li>a.link-section {
    color: inherit;
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: 0.3s ease-in-out all;
    transition: 0.3s ease-in-out all
  }
  
  .header nav.container-header .nav>li>a.link-section i {
    font-weight: inherit;
    color: inherit;
    display: none
  }
  
  .header nav.container-header .nav>li>a.link-section span {
    font-weight: inherit;
    color: inherit
  }
  
  @media (max-width:767px) {
    .header nav.container-header .nav>li>a.link-section span {
      display: none
    }
  
    .header nav.container-header .nav>li>a.link-section i {
      display: block;
      font-size: 1.7rem
    }
  }
  
  .header nav.container-header .nav>li a.link-section.active {
    color: #2006a7;
    -webkit-animation: bgClip 0.3s ease-in-out;
    animation: bgClip 0.3s ease-in-out
  }
  
  @media (min-width:768px) {
    .header nav.container-header .nav>li:hover a.link-section {
      color: #2006a7;
      -webkit-animation: bgClip 0.3s ease-in-out;
      animation: bgClip 0.3s ease-in-out
    }
  }
  
  .header.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    -webkit-animation: animHeaderSticky 1s both;
    animation: animHeaderSticky 1s both
  }
  
  .circle__hover {
    margin-top: 2.2rem
  }
  
  .circle__hover .btn {
    width: 200px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0.1875rem;
    color: var(--bg-black-900);
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    overflow: hidden;
    background-color: var(--text-black-900)
  }
  
  .circle__hover .btn:before {
    z-index: 2;
    content: "";
    position: absolute;
    top: var(--y);
    left: var(--x);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: var(--skin-color);
    -webkit-transition: width 0.9s, height 0.9s;
    transition: width 0.9s, height 0.9s
  }
  
  .circle__hover .btn:hover {
    color: #fff
  }
  
  .circle__hover .btn:hover:before {
    width: 384px;
    height: 384px
  }
  
  .circle__hover .btn:hover:after {
    display: none
  }
  
  .circle__hover .btn:hover span {
    background-color: transparent
  }
  
  .circle__hover .btn span {
    background-color: var(--text-black-900);
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    padding: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }
  
  .circle__hover .btn:after {
    content: "";
    background: conic-gradient(var(--skin-color) 0% 50%, #363636 50%);
    width: 110%;
    --aspect-ratio: 1/1;
    padding-bottom: calc(100% / (var(--aspect-ratio)) + 10%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: turn-conic 10s linear infinite;
    animation: turn-conic 10s linear infinite
  }
  
  .section-border>.container {
    position: relative
  }
  
  .section-border>.container:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 20px;
    border: 1px transparent double;
    border-color: var(--skin-color) var(--skin-color) transparent transparent;
    pointer-events: none
  }
  
  .section-border .main-title {
    text-transform: uppercase;
    background: transparent;
    color: #2006a7;
    width: 200px;
    height: 60px;
    padding-inline: 1.25rem;
    margin-left: 5px;
    margin-bottom: 1rem;
    overflow: hidden;
    -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
    font-weight: 700;
    font-size: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: 0.5s 0.5s width;
    transition: 0.5s 0.5s width;
    position: relative
  }
  
  .section-border .main-title:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    border-bottom: 4px solid var(--skin-color);
    border-left: 3px double var(--skin-color)
  }
  
  .section-border .main-title h2 {
    background: var(--skin-color);
    color: #fff;
    width: 100%;
    height: 100%;
    font-size: inherit;
    font-weight: inherit;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-inline: 1.25rem;
    position: absolute;
    inset: 0;
    -webkit-mask: url("../../../imgs/bg-title.webp");
    mask: url("../../../imgs/bg-title.webp");
    -webkit-mask-size: 2300% 100%;
    mask-size: 2300% 100%
  }
  
  @media (max-width:767px) {
    .section-border .main-title {
      padding: 10px 15px;
      font-size: 20px
    }
  }
  
  .section-border .second-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
    z-index: 1
  }
  
  .section-border .second-title:after {
    content: "";
    position: absolute;
    width: 0;
    height: 1px;
    right: -3px;
    top: 50%;
    background-color: var(--skin-color);
    z-index: -1
  }
  
  .section-border .second-title h3 {
    padding-inline: 0.9375rem;
    color: var(--text-black-900);
    font-weight: 600;
    font-size: 1.5625rem;
    text-transform: capitalize;
    background-color: var(--bg-black-900)
  }
  
  .section-border .second-title h3:first-letter {
    color: var(--skin-color);
    font-size: 40px;
    font-weight: 700
  }
  
  .section-border .second-title h4,
  .section-border .second-title q {
    font-size: 0.9375rem;
    color: var(--text-black-700);
    text-transform: capitalize;
    font-weight: 600;
    max-width: 70%;
    text-align: center
  }
  
  .section-border.appear--run-border .container:after {
    -webkit-transition: 0.8s 0.4s width, 0.5s 1.15s height;
    transition: 0.8s 0.4s width, 0.5s 1.15s height;
    width: calc(100% - 30px);
    height: 100%
  }
  
  .section-border.appear--run-border .main-title:after {
    -webkit-transition: 0.3s 0.6s height ease, 0.4s 0.9s width ease;
    transition: 0.3s 0.6s height ease, 0.4s 0.9s width ease;
    width: 100%;
    height: 100%
  }
  
  .section-border.appear--run-border h2 {
    -webkit-animation: animHeading 0.8s steps(22) forwards;
    animation: animHeading 0.8s steps(22) forwards
  }
  
  .section-border.appear--run-border .second-title:after {
    -webkit-transition: 0.4s 1.2s ease-in-out;
    transition: 0.4s 1.2s ease-in-out;
    width: 100%
  }
  
  .home {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: var(--text-black-900)
  }
  
  @media (max-width:767px) {
    .home {
      padding: 0 0.9375rem !important
    }
  }
  
  .home .parent {
    margin-top: 4.0625rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
  }
  
  @media (max-width:767px) {
    .home .parent {
      gap: 1.875rem
    }
  }
  
  @media (max-width:576px) {
    .home .parent {
      gap: 2.2rem
    }
  }
  
  .home .parent .home-info {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
  }
  
  @media (max-width:767px) {
    .home .parent .home-info {
      -webkit-box-flex: 0;
      -ms-flex: none;
      flex: none;
      width: 100%;
      text-align: center
    }
  }
  
  .home .parent .home-info h2 {
    font-size: 2.15rem;
    margin: 0.6rem 0;
    text-transform: capitalize
  }
  
  @media (max-width:1199px) {
    .home .parent .home-info h2 {
      margin: 0
    }
  }
  
  .home .parent .home-info h2 .name {
    font-family: "Clicker Script", cursive;
    font-size: 2.5rem;
    font-weight: 700;
    color: #2006a7
  }
  
  @media (max-width:1199px) {
    .home .parent .home-info h2 .name {
      display: block
    }
  }
  
  .home .parent .home-info h3 {
    font-size: 1.6rem;
    font-weight: 600
  }
  
  .home .parent .circle {
    font-family: consolas;
    position: relative;
    height: 28.125rem;
    aspect-ratio: 1;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-shadow: 0 0 0.625rem 0 rgba(var(--rgb-black), 0.3);
    box-shadow: 0 0 0.625rem 0 rgba(var(--rgb-black), 0.3);
    margin: auto
  }
  
  @media (max-width:767px) {
    .home .parent .circle {
      -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
      order: -1
    }
  }
  
  @media (max-width:576px) {
    .home .parent .circle {
      height: 24rem
    }
  }
  
  .home .parent .circle .logo {
    width: 26.5625rem;
    aspect-ratio: 1;
    background: url(../imgs/mohsin2.jpeg) no-repeat 50%;
    background-size: 95%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    -webkit-filter: brightness(1.2);
    filter: brightness(1.2);
    -webkit-transition: background-image 1s;
    transition: background-image 1s
  }
  
  @media (max-width:576px) {
    .home .parent .circle .logo {
      width: 22rem
    }
  }
  
  .home .parent .circle .logo:after {
    content: "";
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    position: absolute;
    width: 91%;
    height: 91%;
    background: transparent;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1.875rem solid var(--bg-black-100)
  }
  
  .home .parent .circle .text-contain {
    position: absolute;
    height: 102%;
    -webkit-animation: rotateText 120s linear infinite;
    animation: rotateText 120s linear infinite;
    border-radius: 50%
  }
  
  @media (max-width:1199px) {
    .home .parent .circle .text-contain {
      height: 102%
    }
  }
  
  @media (max-width:576px) {
    .home .parent .circle .text-contain {
      height: 100%
    }
  }
  
  .home .parent .circle .text-contain:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused
  }
  
  .home .parent .circle .text-contain span {
    font-family: "Poppins", sans-serif;
    position: absolute;
    left: 50%;
    font-weight: 700;
    font-size: 1.75rem;
    -webkit-transform-origin: 0 14.375rem;
    transform-origin: 0 14.375rem
  }
  
  @media (max-width:576px) {
    .home .parent .circle .text-contain span {
      font-size: 1.6rem;
      -webkit-transform-origin: 0 12.075rem;
      transform-origin: 0 12.075rem
    }
  }
  
  .about .about-content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-top: 1.875rem
  }
  
  .about .about-content .about-text {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
  }
  
  @media (max-width:576px) {
    .about .about-content .about-text {
      text-align: center
    }
  }
  
  .about .about-content .about-text h3 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-black-900);
    margin-bottom: 0.9375rem
  }
  
  .about .about-content .about-text h3 span {
    color: #2006a7
  }
  
  .about .about-content .about-text p {
    line-height: 1.6;
    margin-bottom: 1.25rem;
    color: var(--text-black-700);
    font-weight: 400;
    font-size: clamp(1.3rem, 1.2vw, 17px)
  }
  
  .about .about-content .personal-info ul.info-item {
    margin-top: 1.25rem;
    -webkit-column-gap: 5%;
    -moz-column-gap: 5%;
    column-gap: 5%;
    row-gap: 0.625rem
  }
  
  .about .about-content .personal-info ul.info-item li {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 45%;
    flex: 0 0 45%;
    max-width: 45%;
    font-weight: 600;
    padding: 0.625rem 0;
    font-size: clamp(1rem, 1.2vw, 17px);
    color: var(--text-black-900);
    position: relative
  }
  
  @media (max-width:576px) {
    .about .about-content .personal-info ul.info-item li {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%
    }
  }
  
  .about .about-content .personal-info ul.info-item li:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--bg-black-50);
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transition: 0.3s ease-in-out all;
    transition: 0.3s ease-in-out all
  }
  
  .about .about-content .personal-info ul.info-item li span {
    font-size: inherit;
    color: var(--text-black-900);
    width: 7.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-right: 0.4rem
  }
  
  .about .about-content .personal-info ul.info-item li span b {
    color: var(--text-black-700);
    font-weight: 100
  }
  
  .about .about-content .personal-info ul.info-item li p {
    font-size: inherit;
    font-weight: 500;
    color: var(--text-black-700);
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-left: 0.625rem;
    position: relative
  }
  
  .about .about-content .personal-info ul.info-item li:last-child p:after {
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    background-color: green;
    border-radius: 50%;
    display: inline-block;
    margin-left: 5px
  }
  
  .about .about-content .personal-info .circle__hover .btn {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
  }
  
  .about .about-content .personal-info .circle__hover .btn:hover {
    color: #fff
  }
  
  .about .about-content .personal-info .circle__hover .btn:hover:before {
    width: 24rem;
    height: 24rem
  }
  
  .services .second-title {
    margin-bottom: 2rem
  }
  
  .services .second-title h3 {
    background-color: var(--bg-black-900)
  }
  
  .services .contain {
    gap: 5rem;
    margin-top: 2.5rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }
  
  .services .contain .wrap {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc((100% - 10rem) / 3);
    flex: 0 0 calc((100% - 10rem) / 3);
    max-width: calc((100% - 10rem) / 3);
    aspect-ratio: 3/4;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: perspective(100rem);
    transform: perspective(100rem);
    cursor: pointer
  }
  
  @media (max-width:991px) {
    .services .contain .wrap {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 10rem) / 2);
      flex: 0 0 calc((100% - 10rem) / 2);
      max-width: calc((100% - 10rem) / 2)
    }
  }
  
  @media (max-width:576px) {
    .services .contain .wrap {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 max((100% - 10rem)/1, 200px);
      flex: 0 0 max((100% - 10rem)/1, 200px);
      max-width: max((100% - 10rem)/1, 200px)
    }
  }
  
  .services .contain .wrap .card {
    --rX: 0;
    --rY: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #e7e8f1;
    border-radius: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    position: relative;
    -webkit-transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));
    transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));
    -webkit-box-shadow: 0 1rem 3rem 0.5rem hsla(0deg, 0%, 0%, 0.2);
    box-shadow: 0 1rem 3rem 0.5rem hsla(0deg, 0%, 0%, 0.2);
    -webkit-transition: -webkit-transform 0.6s 1s;
    transition: -webkit-transform 0.6s 1s;
    transition: transform 0.6s 1s;
    transition: transform 0.6s 1s, -webkit-transform 0.6s 1s;
    -webkit-perspective-origin: center;
    perspective-origin: center;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 10rem;
    perspective: 10rem
  }
  
  @media (max-width:767px) {
    .services .contain .wrap .card {
      -webkit-perspective: 12rem;
      perspective: 12rem
    }
  }
  
  .services .contain .wrap .card .content-card {
    padding: 1.5rem;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    pointer-events: none;
    position: relative;
    background: rgba(255, 255, 255, 0);
    border-radius: 1rem;
    -webkit-box-shadow: 0 0.25rem 1.875rem rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.25rem 1.875rem rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 10rem;
    perspective: 10rem;
    -webkit-transition: all 0.6s;
    transition: all 0.6s
  }
  
  .services .contain .wrap .card .content-card:after,
  .services .contain .wrap .card .content-card:before {
    content: "";
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid var(--skin-color);
    position: absolute;
    z-index: 2;
    opacity: 0.3;
    -webkit-transition: 0.3s ease-in-out all;
    transition: 0.3s ease-in-out all
  }
  
  .services .contain .wrap .card .content-card:before {
    top: 1.1rem;
    right: 1.1rem;
    border-bottom-width: 0;
    border-left-width: 0
  }
  
  .services .contain .wrap .card .content-card:after {
    bottom: 1.1rem;
    left: 1.1rem;
    border-top-width: 0;
    border-right-width: 0
  }
  
  .services .contain .wrap .card .content-card i {
    -ms-flex-preferred-size: min(12rem, 35%);
    flex-basis: min(12rem, 35%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: max(4rem, 50px);
    color: #333;
    -webkit-filter: drop-shadow(2px 2px 6px rgba(255, 255, 255, 0.6)) drop-shadow(2px 2px 6px rgba(255, 255, 255, 0.6)) drop-shadow(2px 0px 6px rgba(255, 255, 255, 0.6)) drop-shadow(2px 0px 6px rgba(255, 255, 255, 0.6)) drop-shadow(0px 2px 6px rgba(255, 255, 255, 0.6)) drop-shadow(0px 2px 6px rgba(255, 255, 255, 0.6)) drop-shadow(-2px -2px 5px rgba(255, 255, 255, 0.6));
    filter: drop-shadow(2px 2px 6px rgba(255, 255, 255, 0.6)) drop-shadow(2px 2px 6px rgba(255, 255, 255, 0.6)) drop-shadow(2px 0px 6px rgba(255, 255, 255, 0.6)) drop-shadow(2px 0px 6px rgba(255, 255, 255, 0.6)) drop-shadow(0px 2px 6px rgba(255, 255, 255, 0.6)) drop-shadow(0px 2px 6px rgba(255, 255, 255, 0.6)) drop-shadow(-2px -2px 5px rgba(255, 255, 255, 0.6))
  }
  
  .services .contain .wrap .card .content-card h3 {
    text-transform: capitalize;
    color: var(--text-black-900);
    font-size: max(1rem, 17px);
    margin-bottom: 1.25rem
  }
  
  .services .contain .wrap .card .content-card p {
    color: var(--text-black-700);
    font-size: 0.9rem
  }
  
  .services .contain .wrap .card.card--active {
    -webkit-transition: none;
    transition: none
  }
  
  .services .contain .wrap .card.card--active .content-card {
    -webkit-transform: translateZ(40px) scale(0.719);
    transform: translateZ(40px) scale(0.719)
  }
  
  .services .contain .wrap:hover .card .content-card:after,
  .services .contain .wrap:hover .card .content-card:before {
    width: calc(100% - 2.2rem);
    height: calc(100% - 2.2rem)
  }
  
  .portfolio .container {
    position: relative
  }
  
  .portfolio .container .tittle-content {
    width: 100%;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-black-900)
  }
  
  @media (max-width:767px) {
    .portfolio .container .tittle-content {
      text-align: center
    }
  }
  
  .portfolio .container ul.filter-item {
    gap: 0.9375rem;
    margin-block: 1.3rem;
    width: 100%
  }
  
  @media (max-width:767px) {
    .portfolio .container ul.filter-item {
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center
    }
  }
  
  .portfolio .container .contain-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-items: start;
    gap: 1.5rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    min-height: 26.1875rem;
    -ms-flex-line-pack: start;
    align-content: flex-start
  }
  
  @media (max-width:1199px) and (min-width:992px) {
    .portfolio .container .contain-items {
      min-height: 27rem
    }
  }
  
  .portfolio .container .contain-items figure.item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc((100% - 3rem) / 3);
    flex: 0 0 calc((100% - 3rem) / 3);
    max-width: calc((100% - 3rem) / 3);
    padding-bottom: 16.3%;
    width: 100%;
    height: 0;
    overflow: hidden;
    -webkit-transition: -webkit-filter 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
    transition: -webkit-filter 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
    transition: filter 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    transition: filter 0.3s ease-in-out, box-shadow 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
    position: relative;
    border-radius: 0.5rem;
    -webkit-box-shadow: 0 0 0 2px var(--bg-black-50);
    box-shadow: 0 0 0 2px var(--bg-black-50);
    cursor: -webkit-zoom-in;
    cursor: zoom-in
  }
  
  @media (max-width:767px) {
    .portfolio .container .contain-items figure.item {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 1.5rem) / 2);
      flex: 0 0 calc((100% - 1.5rem) / 2);
      max-width: calc((100% - 1.5rem) / 2)
    }
  }
  
  @media (max-width:576px) {
    .portfolio .container .contain-items figure.item {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
      padding-bottom: 70%
    }
  }
  
  .portfolio .container .contain-items figure.item .contain-imgs {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden
  }
  
  .portfolio .container .contain-items figure.item .contain-imgs img {
    min-height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: 0.3s ease-in-out all;
    transition: 0.3s ease-in-out all;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0
  }
  
  .portfolio .container .contain-items figure.item figcaption {
    position: absolute;
    width: 100%;
    height: 0;
    left: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-inline: 0.625rem;
    border-radius: 0 0 0.5rem 0.5rem;
    font-size: 1.1rem;
    color: var(--text-black-900);
    font-weight: 600;
    text-transform: capitalize;
    opacity: 0;
    -webkit-transition: 0.3s ease-in-out all;
    transition: 0.3s ease-in-out all;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
  }
  
  .portfolio .container .contain-items figure.item:hover {
    -webkit-filter: saturate(1.4) drop-shadow(0px 4px 10px rgba(var(--rgb-black), 0.2));
    filter: saturate(1.4) drop-shadow(0px 4px 10px rgba(var(--rgb-black), 0.2));
    -webkit-box-shadow: 0px 0px 0 2px rgba(var(--rgb-black), 0.1);
    box-shadow: 0px 0px 0 2px rgba(var(--rgb-black), 0.1)
  }
  
  .portfolio .container .contain-items figure.item:hover figcaption {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-box-shadow: inset 0 0 1.25rem rgba(var(--rgb-black), 0.1), 0 0 5px var(--text-black-900), 0 0 0.625rem var(--text-black-700);
    box-shadow: inset 0 0 1.25rem rgba(var(--rgb-black), 0.1), 0 0 5px var(--text-black-900), 0 0 0.625rem var(--text-black-700);
    height: 40px;
    opacity: 1;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }
  
  .portfolio .container .contain-items figure.item:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }
  
  .portfolio .container .contain-items figure.item.show {
    display: block !important;
    -webkit-animation: ppItems 0.2s cubic-bezier(0.42, 0, 0.64, 1.53);
    animation: ppItems 0.2s cubic-bezier(0.42, 0, 0.64, 1.53)
  }
  
  .portfolio .container ul.parent-page-num {
    width: 100%;
    bottom: 0;
    left: 0
  }
  
  .portfolio .container ul.parent-page-num>li:nth-child(2) {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
  }
  
  .portfolio .container ul.contain-page-num,
  .portfolio .container ul.parent-page-num {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.625rem
  }
  
  .portfolio .container ul.contain-page-num li,
  .portfolio .container ul.parent-page-num li {
    width: 1.875rem;
    height: 1.875rem;
    border: 0.1875rem;
    color: var(--text-black-700);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 0.25rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer
  }
  
  .portfolio .container ul.contain-page-num li.active,
  .portfolio .container ul.parent-page-num li.active {
    background-color: var(--skin-color);
    color: #fff;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
  }
  
  .portfolio .container .popup {
    background: var(--bg-black-900);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999
  }
  
  .portfolio .container .popup.hide {
    display: none
  }
  
  .portfolio .container .popup .container {
    height: 100%;
    margin: 1.25rem auto
  }
  
  .portfolio .container .popup .container .popup-content {
    width: 100%;
    height: 90vh;
    position: relative;
    border-radius: 0.5rem;
    -webkit-box-shadow: 0 0 0 2px var(--bg-black-50);
    box-shadow: 0 0 0 2px var(--bg-black-50);
    position: relative;
    -webkit-filter: saturate(1) drop-shadow(3px 0.25rem 0.5rem var(--bg-black-100));
    filter: saturate(1) drop-shadow(3px 0.25rem 0.5rem var(--bg-black-100))
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure {
    height: calc(100% - 45px);
    overflow-Y: auto
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .info {
    background-color: var(--bg-black-900);
    position: sticky;
    top: 0;
    left: 0;
    padding: 1.25rem 0 0 1.25rem;
    z-index: 1000;
    border-bottom: 2px solid var(--bg-black-50)
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .info .title-info {
    position: relative
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .info .title-info .line-skin {
    height: 2px;
    background-color: var(--bg-black-50);
    position: absolute;
    left: 0;
    width: 0;
    bottom: 0;
    -webkit-transition: width 0.3s 0.2s ease;
    transition: width 0.3s 0.2s ease
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .info .title-info h2 {
    color: var(--skin-color);
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: capitalize;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.625rem
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .info .title-info i {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .info .title-info>p.desc-title {
    font-size: max(1.1rem, 16px);
    color: var(--text-black-900);
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 0.625rem;
    -webkit-transition: 0.3 ease-in-out all;
    transition: 0.3 ease-in-out all
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .info .title-info>p.desc-title.open {
    padding-bottom: 2.2375rem
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .info .title-info>p.desc-title span {
    color: var(--text-black-700);
    font-weight: 400
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .parent-info {
    gap: 1.25rem
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .parent-info.open {
    padding-bottom: 2.2375rem
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .parent-info h4 {
    font-size: max(1.1rem, 16px);
    color: var(--text-black-700);
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 0.3125rem
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .parent-info p {
    font-size: 0.9rem;
    color: var(--text-black-700);
    font-weight: 300;
    text-transform: capitalize
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .parent-info .brief {
    -webkit-box-flex: 3;
    -ms-flex: 3;
    flex: 3;
    min-width: 18.75rem
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .parent-info .about-project {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
    min-width: 18.75rem
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .parent-info .about-project ul {
    gap: 0.9375rem
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .parent-info .about-project ul li {
    font-size: 0.9rem;
    color: var(--text-black-700);
    font-weight: 300;
    text-transform: capitalize;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.75rem;
    margin-bottom: 5px
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .parent-info .about-project ul li span:first-letter {
    font-weight: 800
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .parent-info .about-project ul li a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .parent-info .about-project ul li p {
    width: 3.125rem;
    font-weight: 500
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .parent-info .about-project ul>ul {
    margin-top: 0.625rem
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .parent-info .about-project ul>ul .btn-Border {
    width: 11.25rem;
    -webkit-box-shadow: 2px 2px 0.25rem rgba(var(--rgb-black), 0.6);
    box-shadow: 2px 2px 0.25rem rgba(var(--rgb-black), 0.6)
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .contain-imgs {
    width: 100%;
    height: 100%;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .contain-imgs .box-img {
    position: relative
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .contain-imgs .box-img img {
    min-height: 100%;
    width: 100%;
    height: auto;
    display: block
  }
  
  .portfolio .container .popup .container .popup-content .popup-figure .contain-imgs .box-img .counter-img {
    z-index: 1;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 0.875rem;
    border-radius: 1.25rem;
    padding: 0 0.625rem;
    position: absolute;
    opacity: 0.6;
    bottom: 0.625rem;
    left: 0.625rem
  }
  
  .portfolio .container .popup .container .popup-content .popup-close {
    font-size: 1.75rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    top: 0.9375rem;
    right: 0.9375rem;
    width: 2rem;
    height: 2rem;
    z-index: 1000;
    padding-bottom: 0.3rem
  }
  
  .portfolio .container .popup .container .popup-content .popup-left,
  .portfolio .container .popup .container .popup-content .popup-right {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    top: 45%;
    z-index: 99999
  }
  
  .portfolio .container .popup .container .popup-content .popup-left {
    left: 1.125rem
  }
  
  .portfolio .container .popup .container .popup-content .popup-right {
    right: 1.125rem
  }
  
  .portfolio .container .popup .container .popup-content .popup-counter {
    position: absolute;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0.1875rem 0.625rem;
    font-size: max(1.1rem, 16px);
    left: 50%;
    -webkit-transform: translate(-50%, 0.5rem);
    transform: translate(-50%, 0.5rem);
    border-radius: 1.25rem
  }
  
  .portfolio .container .popup .container .popup-content .accordion {
    height: 0;
    overflow: hidden !important;
    -webkit-transition: 0.3s ease-in-out all;
    transition: 0.3s ease-in-out all
  }
  
  #skills {
    min-height: auto;
    --full-progress: 18.75rem;
    --li-nth1: calc(var(--full-progress) / 100 * 80);
    --li-nth2: calc(var(--full-progress) / 100 * 90);
    --li-nth3: calc(var(--full-progress) / 100 * 80);
    --li-nth4: calc(var(--full-progress) / 100 * 70);
    -webkit-transition: 1s;
    transition: 1s
  }
  
  #skills.section-border.appear--run-border .container:after {
    height: calc(100% - 12.5rem)
  }
  
  #skills .parent {
    margin-top: 5rem;
    -webkit-perspective: 125rem;
    perspective: 125rem;
    -webkit-perspective-origin: center;
    perspective-origin: center;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    min-height: min(500px, 70vh)
  }
  
  #skills .parent .wrapper-skills {
    -webkit-transition: 0.8s;
    transition: 0.8s;
    background: var(--bg-black-100);
    border-radius: max(1.1rem, 16px);
    -webkit-box-shadow: 0 0.25rem 1.875rem var(--bg-black-100);
    box-shadow: 0 0.25rem 1.875rem var(--bg-black-100);
    border: 1px solid rgb(0, 0, 0);
    width: 100%;
    aspect-ratio: 3/1;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    border-radius: 1.25rem
  }
  
  #skills .parent .wrapper-skills .img-box {
    -webkit-transition: 0.8s;
    transition: 0.8s;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    overflow: hidden
  }
  
  #skills .parent .wrapper-skills .img-box .red {
    fill: green
  }
  
  #skills .parent .wrapper-skills .img-box:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(var(--rgb-white), 0.6);
    border-radius: max(1.1rem, 16px);
    -webkit-backdrop-filter: blur(0.25rem);
    backdrop-filter: blur(0.25rem);
    border: 1px solid rgba(var(--rgb-black), 0.3)
  }
  
  #skills .parent .wrapper-skills ul.statistics {
    -webkit-transition: 1s;
    transition: 1s;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    gap: 1.5625rem;
    margin-top: -5.625rem;
    background: var(--skin-color);
    -webkit-box-shadow: 0 0 1.25rem rgba(255, 255, 255, 0.2117647059);
    box-shadow: 0 0 1.25rem rgba(255, 255, 255, 0.2117647059);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
  }
  
  #skills .parent .wrapper-skills ul.statistics:before {
    content: "";
    width: 100%;
    height: 0.9375rem;
    position: absolute;
    background: var(--bg-black-100);
    border-radius: max(1.1rem, 16px);
    -webkit-box-shadow: 0 0.1875rem 0.5rem var(--bg-black-100);
    box-shadow: 0 0.1875rem 0.5rem var(--bg-black-100);
    border: 1px solid rgb(0, 0, 0);
    bottom: 0;
    left: 0;
    -webkit-transform: translate3d(0px, 50%, -0.4375rem) rotate3d(-1, 0, 0, 90deg);
    transform: translate3d(0px, 50%, -0.4375rem) rotate3d(-1, 0, 0, 90deg)
  }
  
  #skills .parent .wrapper-skills ul.statistics:after {
    content: "";
    height: 100%;
    width: 0.9375rem;
    position: absolute;
    background: var(--bg-black-100);
    border-radius: max(1.1rem, 16px);
    -webkit-box-shadow: 0 0.1875rem 0.5rem var(--bg-black-100);
    box-shadow: 0 0.1875rem 0.5rem var(--bg-black-100);
    border: 1px solid rgb(0, 0, 0);
    bottom: 0;
    left: 0;
    -webkit-transform: translate3d(-0.3125rem, -0.125rem, -0.625rem) rotate3d(0, -1, 0, 90deg);
    transform: translate3d(-0.3125rem, -0.125rem, -0.625rem) rotate3d(0, -1, 0, 90deg)
  }
  
  #skills .parent .wrapper-skills ul.statistics li {
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
  }
  
  #skills .parent .wrapper-skills ul.statistics li .title {
    -webkit-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
    position: absolute;
    width: 8.75rem;
    padding-left: 1.25rem;
    height: 1.875rem;
    background: var(--bg-black-100);
    border: 1px solid #fff;
    -webkit-box-shadow: 0px 0 0.6875rem rgba(var(--rgb-black), 92%);
    box-shadow: 0px 0 0.6875rem rgba(var(--rgb-black), 92%);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    color: var(--text-black-900);
    font-size: 1.25rem;
    font-weight: 600;
    font-family: sans-serif;
    -webkit-transition: 1s ease-in;
    transition: 1s ease-in;
    -webkit-transform: translate3d(0px, 0px, 0.25rem) rotate(90deg) scale(1) rotateX(0deg);
    transform: translate3d(0px, 0px, 0.25rem) rotate(90deg) scale(1) rotateX(0deg)
  }
  
  #skills .parent .wrapper-skills ul.statistics li .contain {
    width: 1.875rem;
    height: 1.875rem;
    position: relative;
    -webkit-perspective: 125rem;
    perspective: 125rem;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
  }
  
  #skills .parent .wrapper-skills ul.statistics li .contain .face {
    position: absolute;
    -webkit-transition: width 1s 0.5s ease-in-out, height 1s 0.5s ease-in-out, -webkit-transform 1s 0.5s ease-in-out, -webkit-animation 1s 0.5s ease-in-out;
    transition: width 1s 0.5s ease-in-out, height 1s 0.5s ease-in-out, -webkit-transform 1s 0.5s ease-in-out, -webkit-animation 1s 0.5s ease-in-out;
    transition: transform 1s 0.5s ease-in-out, animation 1s 0.5s ease-in-out, width 1s 0.5s ease-in-out, height 1s 0.5s ease-in-out;
    transition: transform 1s 0.5s ease-in-out, animation 1s 0.5s ease-in-out, width 1s 0.5s ease-in-out, height 1s 0.5s ease-in-out, -webkit-transform 1s 0.5s ease-in-out, -webkit-animation 1s 0.5s ease-in-out;
    background: #2006a7;
    border: 0.1875rem solid var(--text-black-900)
  }
  
  #skills .parent .wrapper-skills ul.statistics li .contain .face.one {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    top: 0;
    width: 1.875rem;
    height: 0;
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    border: none
  }
  
  #skills .parent .wrapper-skills ul.statistics li .contain .face.two {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    top: 100%;
    width: 1.875rem;
    height: 0;
    -webkit-transform: rotateX(90deg) rotateY(180deg);
    transform: rotateX(90deg) rotateY(180deg);
    -webkit-transform-origin: top;
    transform-origin: top
  }
  
  #skills .parent .wrapper-skills ul.statistics li .contain .face.three {
    bottom: 0;
    height: 1.875rem;
    width: 0;
    -webkit-transform: rotateY(-90deg) rotateX(0);
    transform: rotateY(-90deg) rotateX(0);
    -webkit-transform-origin: left;
    transform-origin: left
  }
  
  #skills .parent .wrapper-skills ul.statistics li .contain .face.four {
    bottom: 0;
    left: 100%;
    height: 1.875rem;
    width: 0;
    -webkit-transform: rotateY(-90deg) rotateX(180deg);
    transform: rotateY(-90deg) rotateX(180deg);
    -webkit-transform-origin: left;
    transform-origin: left
  }
  
  #skills .parent .wrapper-skills ul.statistics li .contain .face.five {
    color: var(--skin-color);
    top: 0;
    right: 0;
    height: 1.875rem;
    width: 1.875rem;
    -webkit-transform-origin: right;
    transform-origin: right
  }
  
  #skills .parent .wrapper-skills ul.statistics li .contain .face.six {
    background: none;
    color: var(--text-black-900);
    font-size: 1.25rem;
    font-weight: 600;
    font-family: sans-serif;
    top: 0;
    right: 0;
    height: 1.875rem;
    width: 1.875rem;
    -webkit-transform-origin: center top;
    transform-origin: center top;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    border: none;
    z-index: 1
  }
  
  #skills .parent .wrapper-skills ul.statistics li .contain .face.six:after {
    content: "";
    width: 140%;
    background: var(--bg-black-100);
    -webkit-box-shadow: 0px 0px 0.1875rem var(--skin-color);
    box-shadow: 0px 0px 0.1875rem var(--skin-color);
    border: 1px solid var(--skin-color);
    height: 110%;
    position: absolute;
    z-index: -1;
    border-radius: 0.625rem
  }
  
  #skills .parent .wrapper-skills ul.statistics li:first-of-type .face.six {
    -webkit-animation: 2s downSix1 ease-in forwards;
    animation: 2s downSix1 ease-in forwards
  }
  
  #skills .parent .wrapper-skills ul.statistics li:nth-of-type(2) .face.six {
    -webkit-animation: 2s downSix2 ease-in forwards;
    animation: 2s downSix2 ease-in forwards
  }
  
  #skills .parent .wrapper-skills ul.statistics li:nth-of-type(3) .face.six {
    -webkit-animation: 2s downSix3 ease-in forwards;
    animation: 2s downSix3 ease-in forwards
  }
  
  #skills .parent .wrapper-skills ul.statistics li:nth-of-type(4) .face.six {
    -webkit-animation: 2s downSix4 ease-in forwards;
    animation: 2s downSix4 ease-in forwards
  }
  
  #skills.open .parent {
    margin-top: 8rem;
    margin-bottom: -10rem
  }
  
  @media (max-width:767px) {
    #skills.open .parent {
      margin-top: 3rem;
      margin-bottom: -5rem
    }
  }
  
  @media (max-width:576px) {
    #skills.open .parent {
      margin-top: 0;
      margin-bottom: -6rem
    }
  }
  
  #skills.open .parent .wrapper-skills {
    -webkit-transform: translateY(-12.5rem) rotateX(60deg);
    transform: translateY(-12.5rem) rotateX(60deg);
    aspect-ratio: 3/1.8;
    width: 85%;
    margin-inline: auto
  }
  
  #skills.open .parent .wrapper-skills .img-box {
    -webkit-transform: translate3d(0px, 0px, 0.8125rem) rotateY(180deg);
    transform: translate3d(0px, 0px, 0.8125rem) rotateY(180deg)
  }
  
  #skills.open .parent .wrapper-skills ul.statistics {
    width: 50%;
    height: 12%;
    -webkit-transform: translate3d(0%, 6.875rem, 2.4375rem) rotate(-45deg);
    transform: translate3d(0%, 6.875rem, 2.4375rem) rotate(-45deg);
    gap: 20%;
    background: rgba(0, 0, 0, 0.1843137255);
    border-radius: 0.4375rem
  }
  
  @media (max-width:767px) {
    #skills.open .parent .wrapper-skills ul.statistics {
      -webkit-transform: translate3d(20%, 6.875rem, 2.4375rem) rotate(-30deg);
      transform: translate3d(20%, 6.875rem, 2.4375rem) rotate(-30deg)
    }
  }
  
  @media (max-width:576px) {
    #skills.open .parent .wrapper-skills ul.statistics {
      -webkit-transform: translate3d(50%, 8.875rem, 3.4375rem) rotate(2deg);
      transform: translate3d(50%, 8.875rem, 3.4375rem) rotate(2deg)
    }
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:first-of-type .face.one {
    height: var(--li-nth1)
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:first-of-type .face.two {
    height: var(--li-nth1)
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:first-of-type .face.three {
    width: var(--li-nth1)
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:first-of-type .face.four {
    width: var(--li-nth1)
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:first-of-type .face.five {
    -webkit-transform: translate3d(0, 0, var(--li-nth1));
    transform: translate3d(0, 0, var(--li-nth1))
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:first-of-type .face.six {
    -webkit-animation: upSix1 1s cubic-bezier(0.42, 0, 0.21, 2.05) 0.5s forwards, rotateSix1 12s 1.7s infinite linear;
    animation: upSix1 1s cubic-bezier(0.42, 0, 0.21, 2.05) 0.5s forwards, rotateSix1 12s 1.7s infinite linear
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:nth-of-type(2) .face.one {
    height: var(--li-nth2)
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:nth-of-type(2) .face.two {
    height: var(--li-nth2)
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:nth-of-type(2) .face.three {
    width: var(--li-nth2)
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:nth-of-type(2) .face.four {
    width: var(--li-nth2)
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:nth-of-type(2) .face.five {
    -webkit-transform: translate3d(0, 0, var(--li-nth2));
    transform: translate3d(0, 0, var(--li-nth2))
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:nth-of-type(2) .face.six {
    -webkit-animation: upSix2 1s cubic-bezier(0.42, 0, 0.21, 2.05) 0.5s forwards, rotateSix2 12s 1.7s infinite linear;
    animation: upSix2 1s cubic-bezier(0.42, 0, 0.21, 2.05) 0.5s forwards, rotateSix2 12s 1.7s infinite linear
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:nth-of-type(3) .face.one {
    height: var(--li-nth3)
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:nth-of-type(3) .face.two {
    height: var(--li-nth3)
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:nth-of-type(3) .face.three {
    width: var(--li-nth3)
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:nth-of-type(3) .face.four {
    width: var(--li-nth3)
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:nth-of-type(3) .face.five {
    -webkit-transform: translate3d(0, 0, var(--li-nth3));
    transform: translate3d(0, 0, var(--li-nth3))
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:nth-of-type(3) .face.six {
    -webkit-animation: upSix3 1s cubic-bezier(0.42, 0, 0.21, 2.05) 0.5s forwards, rotateSix3 12s 1.7s infinite linear;
    animation: upSix3 1s cubic-bezier(0.42, 0, 0.21, 2.05) 0.5s forwards, rotateSix3 12s 1.7s infinite linear
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:nth-of-type(4) .face.one {
    height: var(--li-nth4)
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:nth-of-type(4) .face.two {
    height: var(--li-nth4)
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:nth-of-type(4) .face.three {
    width: var(--li-nth4)
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:nth-of-type(4) .face.four {
    width: var(--li-nth4)
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:nth-of-type(4) .face.five {
    -webkit-transform: translate3d(0, 0, var(--li-nth4));
    transform: translate3d(0, 0, var(--li-nth4))
  }
  
  #skills.open .parent .wrapper-skills ul.statistics li:nth-of-type(4) .face.six {
    -webkit-animation: upSix4 1s cubic-bezier(0.42, 0, 0.21, 2.05) 0.5s forwards, rotateSix4 12s 1.7s infinite linear;
    animation: upSix4 1s cubic-bezier(0.42, 0, 0.21, 2.05) 0.5s forwards, rotateSix4 12s 1.7s infinite linear
  }
  
  #skills.open .parent .wrapper-skills ul.statistics .face.six:after {
    -webkit-transform: rotate(45deg) rotateY(-160deg);
    transform: rotate(45deg) rotateY(-160deg)
  }
  
  #skills.open .parent .wrapper-skills ul.statistics .title {
    -webkit-transform: translate3d(0px, 0px, 0.25rem) rotate(45deg) scale(1.5) rotateX(-90deg);
    transform: translate3d(0px, 0px, 0.25rem) rotate(45deg) scale(1.5) rotateX(-90deg)
  }
  
  @media (max-width:576px) {
    #skills.open .parent .wrapper-skills ul.statistics .title {
      -webkit-transform: translate3d(0px, 0px, 0.25rem) rotate(90deg) scale(2, 1) rotateX(0deg);
      transform: translate3d(0px, 0px, 0.25rem) rotate(90deg) scale(2, 1) rotateX(0deg)
    }
  }
  
  .contact .second-title:after {
    top: 30%
  }
  
  .contact form {
    margin-top: 1.25rem;
    padding-block: 1.875rem;
    gap: 2.7rem
  }
  
  .contact form .row {
    width: 100%;
    gap: 1.875rem
  }
  
  .contact form .row .box {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 3.125rem;
    position: relative
  }
  
  @media (max-width:767px) {
    .contact form .row .box {
      -webkit-box-flex: unset;
      -ms-flex: unset;
      flex: unset;
      width: 100%
    }
  }
  
  .contact form .row .box.textarea {
    height: auto
  }
  
  .contact form .row .box.textarea span.label {
    height: 3.125rem
  }
  
  .contact form .row .box label.info {
    height: 3.125rem;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 1.5625rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: 0.4s ease-in-out all;
    transition: 0.4s ease-in-out all
  }
  
  .contact form .row .box label.info span.label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: max(1.1rem, 16px);
    color: var(--text-black-700);
    text-transform: capitalize
  }
  
  .contact form .row .box label.info .valid {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
  }
  
  .contact form .row .box label.info .valid .valid-icon .valid__state-done {
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    stroke-dasharray: 29;
    stroke-dashoffset: 29
  }
  
  .contact form .row .box.focus--done .info,
  .contact form .row .box.valid--done .info {
    -webkit-transform: translateY(-80%);
    transform: translateY(-80%);
    padding-left: 0 !important;
    color: var(--text-black-900);
    font-weight: 600
  }
  
  .contact form .row .box.focus--done .input,
  .contact form .row .box.valid--done .input {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-box-shadow: inset 0 0 0px rgba(var(--rgb-black), 0.1), 0 0 0px rgba(var(--rgb-black), 0.1), 0 0 0.1875rem rgba(var(--rgb-black), 0.1);
    box-shadow: inset 0 0 0px rgba(var(--rgb-black), 0.1), 0 0 0px rgba(var(--rgb-black), 0.1), 0 0 0.1875rem rgba(var(--rgb-black), 0.1)
  }
  
  .contact form .row .box.valid--done .valid__state-done {
    stroke-dashoffset: 0 !important
  }
  
  .contact form .input {
    caret-color: var(--skin-color);
    width: 100%;
    height: 100%;
    background-color: var(--bg-black-100);
    border: 1px solid var(--bg-black-50);
    padding: 0.625rem 1.5625rem;
    font-size: max(1.1rem, 16px);
    color: var(--text-black-700);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease
  }
  
  .contact form .input.input--focus {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-box-shadow: inset 0 0 0px rgba(var(--rgb-black), 0.1), 0 0 0px rgba(var(--rgb-black), 0.1), 0 0 0.1875rem rgba(var(--rgb-black), 0.1);
    box-shadow: inset 0 0 0px rgba(var(--rgb-black), 0.1), 0 0 0px rgba(var(--rgb-black), 0.1), 0 0 0.1875rem rgba(var(--rgb-black), 0.1)
  }
  
  .contact form textarea.input {
    height: 100px;
    resize: none
  }
  
  .btn-Border {
    color: var(--text-black-900);
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 600;
    width: 6.25rem;
    height: 2.25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1
  }
  
  .btn-Border a {
    color: inherit;
    font-size: inherit;
    text-transform: inherit;
    font-weight: 500;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    height: 0;
    z-index: 99;
    white-space: nowrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }
  
  .btn-Border a:focus {
    color: var(--bg-black-900);
    background-color: var(--skin-color)
  }
  
  .btn-Border rect,
  .btn-Border svg {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    fill: transparent
  }
  
  .btn-Border rect {
    stroke: transparent;
    stroke-width: 4;
    -webkit-transition: 0.3s ease-in-out all;
    transition: 0.3s ease-in-out all;
    stroke-dasharray: 6.25rem 2.25rem;
    stroke-dashoffset: 136
  }
  
  .btn-Border.active {
    color: white;
    background-color: #2006a7;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
  }
  
  .btn-Border:hover rect {
    stroke: var(--skin-color);
    stroke-dasharray: 6.25rem 0;
    stroke-dashoffset: 0
  }
  
  .btn-more {
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    border-radius: 50%;
    display: inline-block;
    overflow: hidden
  }
  
  .btn-more:after,
  .btn-more:before {
    content: "";
    width: 80%;
    height: 2.5px;
    background-color: var(--text-black-900);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: 0.3s ease-in-out all;
    transition: 0.3s ease-in-out all
  }
  
  .btn-more:after {
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg)
  }
  
  .btn-more.open:after {
    -webkit-transform: translate(-50%, 50px) rotate(90deg);
    transform: translate(-50%, 50px) rotate(90deg)
  }
  
  .btn-toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.125rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    color: var(--bg-black-100);
    background: rgba(var(--rgb-black), 0.5);
    -webkit-transition: 0.3s ease-in-out all;
    transition: 0.3s ease-in-out all
  }
  
  .btn-toggle:hover {
    background: var(--text-black-900)
  }
  
  .btn-download,
  .btn-submit {
    height: 48px;
    width: 120px;
    position: relative;
    overflow: hidden;
    margin-top: -20px
  }
  
  .btn-download .btn,
  .btn-submit .btn {
    display: block;
    cursor: pointer;
    position: relative;
    -webkit-transition: all 0.3s ease-in-out, background-color 0.2s 0.3s ease-in-out;
    transition: all 0.3s ease-in-out, background-color 0.2s 0.3s ease-in-out;
    height: 100%;
    width: calc(100% + 48px);
    border-radius: 48px;
    margin-left: -24px;
    overflow: hidden;
    background-color: #2006a7
  }
  
  .btn-download .btn .btn__text,
  .btn-submit .btn .btn__text {
    color: #fff;
    font-weight: 600;
    text-transform: capitalize;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 1;
    -webkit-transition: opacity 0.3s ease-in-out, visibility 0.4s steps(1);
    transition: opacity 0.3s ease-in-out, visibility 0.4s steps(1)
  }
  
  .btn-download .btn .btn__progress,
  .btn-submit .btn .btn__progress {
    position: absolute;
    top: 0;
    left: calc(50% - 24px)
  }
  
  .btn-download .btn .btn__progress .btn__progress-track,
  .btn-submit .btn .btn__progress .btn__progress-track {
    visibility: hidden;
    r: 12;
    stroke-width: 24
  }
  
  .btn-download .btn .btn__progress .btn__progress-fill,
  .btn-submit .btn .btn__progress .btn__progress-fill {
    stroke: var(--skin-color);
    stroke-dasharray: 126;
    stroke-dashoffset: 126
  }
  
  .btn-download .btn .btn__progress .btn__progress-text,
  .btn-submit .btn .btn__progress .btn__progress-text {
    stroke: #fff;
    stroke-dasharray: 29;
    stroke-dashoffset: 29
  }
  
  .btn-download .btn.btn--done,
  .btn-download .btn.btn--running,
  .btn-submit .btn.btn--done,
  .btn-submit .btn.btn--running {
    width: 48px;
    margin-left: calc(50% - 1.5rem);
    background-color: transparent !important;
    border-radius: 48px
  }
  
  .btn-download .btn.btn--done .btn__text,
  .btn-download .btn.btn--running .btn__text,
  .btn-submit .btn.btn--done .btn__text,
  .btn-submit .btn.btn--running .btn__text {
    opacity: 0;
    visibility: hidden
  }
  
  .btn-download .btn.btn--done .btn__progress-track,
  .btn-download .btn.btn--running .btn__progress-track,
  .btn-submit .btn.btn--done .btn__progress-track,
  .btn-submit .btn.btn--running .btn__progress-track {
    -webkit-transition: r 0.3s 0.3s ease-in-out, stroke-width 0.3s 0.3s ease-in-out, visibility 0.2s 0.3s ease-in-out;
    transition: r 0.3s 0.3s ease-in-out, stroke-width 0.3s 0.3s ease-in-out, visibility 0.2s 0.3s ease-in-out;
    visibility: visible;
    r: 20;
    stroke-width: 8
  }
  
  .btn-download .btn.btn--done .btn__progress-fill,
  .btn-download .btn.btn--running .btn__progress-fill,
  .btn-submit .btn.btn--done .btn__progress-fill,
  .btn-submit .btn.btn--running .btn__progress-fill {
    -webkit-transition: stroke-dashoffset 2.5s 0.7s ease-in-out, r 0.4s 3.1s ease-in-out, stroke-width 0.4s 3.1s ease-in-out;
    transition: stroke-dashoffset 2.5s 0.7s ease-in-out, r 0.4s 3.1s ease-in-out, stroke-width 0.4s 3.1s ease-in-out;
    stroke-dashoffset: 0;
    r: 12;
    stroke-width: 24
  }
  
  .btn-download .btn.btn--done .btn__progress-text,
  .btn-download .btn.btn--running .btn__progress-text,
  .btn-submit .btn.btn--done .btn__progress-text,
  .btn-submit .btn.btn--running .btn__progress-text {
    -webkit-transition: stroke-dashoffset 0.4s 3.7s ease-in-out;
    transition: stroke-dashoffset 0.4s 3.7s ease-in-out;
    stroke-dashoffset: 0
  }
  
  .btn-download {
    width: 10rem;
    height: 48px;
    margin-top: 40px;
    outline: 4px solid rgba(102, 102, 102, 0.2431372549);
    -webkit-transition: outline 0.5s ease-out;
    transition: outline 0.5s ease-out
  }
  
  .btn-download:hover {
    outline-color: var(--skin-color)
  }
  
  .btn-download .btn {
    background-color: var(--text-black-700)
  }
  
  .btn-download .btn .btn__text {
    color: var(--bg-black-900);
    font-weight: 700;
    font-size: 17.6px;
    text-transform: uppercase;
    background-color: var(--text-black-900)
  }
  
  .contact,
  footer {
    min-height: unset !important;
    padding-bottom: 0 !important
  }
  
  footer {
    min-height: unset !important;
    padding-bottom: 0 !important
  }
  
  footer .contain-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 2rem
  }
  
  @media (max-width:767px) {
    footer .contain-main {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column
    }
  }
  
  footer .contain-main .col {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-bottom: 3rem
  }
  
  footer .contain-main .profile {
    letter-spacing: -1px;
    text-transform: capitalize;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
  }
  
  @media (max-width:767px) {
    footer .contain-main .profile {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center
    }
  }
  
  footer .contain-main .profile>span {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2006a7
  }
  
  footer .contain-main .profile .about {
    font-size: 0.9375rem;
    color: var(--text-black-700);
    font-weight: 500;
    position: relative
  }
  
  footer .contain-main .profile .about:after {
    content: "";
    width: 3.125rem;
    height: 2px;
    background-color: var(--skin-color);
    position: absolute;
    top: 100%;
    left: 0
  }
  
  footer .contain-main .profile .social {
    margin-block: 1.875rem 0.625rem
  }
  
  footer .contain-main .profile .social ul {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.625rem
  }
  
  footer .contain-main .profile .social ul a {
    color: var(--text-black-700)
  }
  
  footer .contain-main .profile .social ul a:hover {
    color: var(--text-black-900)
  }
  
  footer .contain-main .profile .social ul a span {
    -webkit-transition: 0.3s ease-in-out all;
    transition: 0.3s ease-in-out all
  }
  
  footer .contain-main .image-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    -ms-flex-item-align: end;
    -ms-grid-row-align: end;
    align-self: end;
    padding-bottom: 0
  }
  
  @media (max-width:767px) {
    footer .contain-main .image-footer {
      -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2
    }
  }
  
  footer .contain-main .image-footer .radius {
    background: var(--bg-black-100);
    width: 54%;
    aspect-ratio: 5/1;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    z-index: -1
  }
  
  footer .contain-main .image-footer .radius:after,
  footer .contain-main .image-footer .radius:before {
    content: "";
    width: 1000px;
    height: 40px;
    background-color: var(--bg-black-900);
    position: absolute;
    bottom: 0px
  }
  
  footer .contain-main .image-footer .radius:before {
    left: unset;
    left: 90%;
    border-top-left-radius: 17px 16px;
    border-bottom-left-radius: 25px 23px;
    -webkit-box-shadow: inset 6px -13px 11px rgba(var(--rgb-black), 0.1);
    box-shadow: inset 6px -13px 11px rgba(var(--rgb-black), 0.1)
  }
  
  footer .contain-main .image-footer .radius:after {
    left: unset;
    right: 90%;
    border-top-right-radius: 17px 16px;
    border-bottom-right-radius: 25px 23px;
    -webkit-box-shadow: inset -6px -13px 11px rgba(var(--rgb-black), 0.1);
    box-shadow: inset -6px -13px 11px rgba(var(--rgb-black), 0.1)
  }
  
  footer .contain-main .image-footer .wrapper {
    border: 1px solid rgba(var(--rgb-black), 0.1);
    border-radius: 50%;
    width: 65%;
    aspect-ratio: 1
  }
  
  footer .contain-main .image-footer .wrapper .box-img {
    border: 1rem solid var(--bg-black-100);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 11px 3px rgba(var(--rgb-black), 0.2);
    box-shadow: 0px 0px 11px 3px rgba(var(--rgb-black), 0.2)
  }
  
  footer .contain-main .image-footer .wrapper .box-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
  }
  
  footer .contain-main .contact-methods {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.9375rem
  }
  
  footer .contain-main .contact-methods a {
    font-size: 1.25rem;
    width: 100%;
    color: var(--text-black-700);
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out
  }
  
  footer .contain-main .contact-methods a i {
    font-size: 1rem;
    width: 2.5rem;
    padding-inline: 1rem;
    -webkit-transition: margin 0.3s ease-in-out;
    transition: margin 0.3s ease-in-out
  }
  
  footer .contain-main .contact-methods a:hover {
    color: var(--skin-color)
  }
  
  footer .contain-main .contact-methods a:hover i {
    margin-right: 1.25rem
  }
  
  footer .foot {
    background-color: var(--bg-black-100);
    position: relative;
    color: var(--text-black-900)
  }
  
  footer .foot .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 4.375rem
  }
  
  @media (max-width:767px) {
    footer .foot .container {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      padding-block: 2rem 1.3rem;
      gap: 1.875rem
    }
  }
  
  footer .foot .container .logo-link {
    color: #2006a7;
    inset: unset;
    position: static;
    inset: unset;
    -webkit-transform: unset;
    transform: unset
  }
  
  footer .foot .container .copy {
    color: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: capitalize
  }
  
  @media (max-width:767px) {
    footer .foot .container .copy {
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2
    }
  }
  
  .social-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    background: rgba(var(--rgb-white), 0.3);
    -webkit-box-shadow: 0 0 4px rgba(var(--rgb-black), 0.1);
    box-shadow: 0 0 4px rgba(var(--rgb-black), 0.1);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-transition: 0.3s ease-in-out all;
    transition: 0.3s ease-in-out all
  }
  
  .social-icon i {
    font-size: 20px;
    color: inherit;
    -webkit-transition: 0.3s ease-in-out all;
    transition: 0.3s ease-in-out all
  }
  
  .social-icon:hover {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-box-shadow: inset 0 0 20px rgba(var(--rgb-black), 0.1), 0 0 2px rgba(var(--rgb-black), 0.4), 0 0 8px rgba(var(--rgb-black), 0.4);
    box-shadow: 0 0 6px rgba(var(--rgb-black), 0.1), 0 0 4px rgba(var(--rgb-black), 0.3), 0 0 3px rgba(var(--rgb-black), 0.2)
  }
  
  .social-icon:hover i {
    -webkit-transform: scale(1.3);
    transform: scale(1.3)
  }
  
  ::-webkit-scrollbar {
    width: 0
  }
  
  #scrollPath {
    position: fixed;
    top: 0;
    right: 0;
    width: 0.4rem;
    height: 100%;
    background-color: var(--bg-black-50)
  }
  
  #progressBar {
    position: fixed;
    top: 0;
    right: 0;
    width: 0.4rem;
    background-color: var(--skin-color);
    z-index: 9999;
    border-bottom-left-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem
  }
  
  #services [data-scroll=fadeIn] {
    -webkit-transition: opacity 1s ease-in-out !important;
    transition: opacity 1s ease-in-out !important
  }
  
  [data-scroll=fadeIn] {
    opacity: 0 !important;
    -webkit-transition: opacity 0.3s ease-in-out !important;
    transition: opacity 0.3s ease-in-out !important
  }
  
  [data-scroll=fadeIn].appear {
    opacity: 1 !important
  }
  
  [data-scroll=fadeInSlide_top] {
    opacity: 0 !important;
    -webkit-transform: translateY(-30%) !important;
    transform: translateY(-30%) !important;
    -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out !important;
    transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out !important;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out !important;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out !important
  }
  
  [data-scroll=fadeInSlide_top].appear {
    -webkit-transform: translateY(0%) !important;
    transform: translateY(0%) !important;
    opacity: 1 !important
  }
  
  [data-scroll=fadeInSlide_btm] {
    opacity: 0 !important;
    -webkit-transform: translateY(30%) !important;
    transform: translateY(30%) !important;
    -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out !important;
    transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out !important;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out !important;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out !important
  }
  
  [data-scroll=fadeInSlide_btm].appear {
    -webkit-transform: translateY(0%) !important;
    transform: translateY(0%) !important;
    opacity: 1 !important
  }
  
  [data-scroll=fadeISlide_left] {
    opacity: 0 !important;
    -webkit-transform: translateX(-50%) !important;
    transform: translateX(-50%) !important;
    -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out !important;
    transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out !important;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out !important;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out !important
  }
  
  [data-scroll=fadeISlide_left].appear {
    -webkit-transform: translateX(0%) !important;
    transform: translateX(0%) !important;
    opacity: 1 !important
  }
  
  [data-scroll=fadeISlide_right] {
    opacity: 0 !important;
    -webkit-transform: translateX(50%) !important;
    transform: translateX(50%) !important;
    -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out !important;
    transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out !important;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out !important;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out !important
  }
  
  [data-scroll=fadeISlide_right].appear {
    -webkit-transform: translateX(0%) !important;
    transform: translateX(0%) !important;
    opacity: 1 !important
  }
  
  @-webkit-keyframes animHeaderSticky {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%)
    }
  
    to {
      opacity: 1;
      -webkit-transform: none;
      transform: none
    }
  }
  
  @keyframes animHeaderSticky {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%)
    }
  
    to {
      opacity: 1;
      -webkit-transform: none;
      transform: none
    }
  }
  
  @-webkit-keyframes bgClip {
    0% {
      -webkit-clip-path: circle(0% at 50% 50%);
      clip-path: circle(0% at 50% 50%)
    }
  
    to {
      -webkit-clip-path: circle(100% at 50% 50%);
      clip-path: circle(100% at 50% 50%)
    }
  }
  
  @keyframes bgClip {
    0% {
      -webkit-clip-path: circle(0% at 50% 50%);
      clip-path: circle(0% at 50% 50%)
    }
  
    to {
      -webkit-clip-path: circle(100% at 50% 50%);
      clip-path: circle(100% at 50% 50%)
    }
  }
  
  @-webkit-keyframes animHeading {
    0% {
      -webkit-mask-position: 0 0;
      mask-position: 0 0
    }
  
    to {
      -webkit-mask-position: 100% 0;
      mask-position: 100% 0
    }
  }
  
  @keyframes animHeading {
    0% {
      -webkit-mask-position: 0 0;
      mask-position: 0 0
    }
  
    to {
      -webkit-mask-position: 100% 0;
      mask-position: 100% 0
    }
  }
  
  @-webkit-keyframes rotateText {
    0% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg)
    }
  
    to {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
    }
  }
  
  @keyframes rotateText {
    0% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg)
    }
  
    to {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
    }
  }
  
  @-webkit-keyframes turn-conic {
    to {
      -webkit-transform: translate(-50%, -50%) rotate(-1turn);
      transform: translate(-50%, -50%) rotate(-1turn)
    }
  }
  
  @keyframes turn-conic {
    to {
      -webkit-transform: translate(-50%, -50%) rotate(-1turn);
      transform: translate(-50%, -50%) rotate(-1turn)
    }
  }
  
  @-webkit-keyframes ppItems {
    0% {
      opacity: 0;
      -webkit-transform: scale(0.8);
      transform: scale(0.8)
    }
  
    to {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1)
    }
  }
  
  @keyframes ppItems {
    0% {
      opacity: 0;
      -webkit-transform: scale(0.8);
      transform: scale(0.8)
    }
  
    to {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1)
    }
  }
  
  @-webkit-keyframes rotateLi {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
    }
  
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg)
    }
  }
  
  @keyframes rotateLi {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
    }
  
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg)
    }
  }
  
  @-webkit-keyframes upSix1 {
    0% {
      -webkit-transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0);
      transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0)
    }
  
    to {
      -webkit-transform: translate3d(0, 50%, calc(var(--li-nth1) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg);
      transform: translate3d(0, 50%, calc(var(--li-nth1) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg)
    }
  }
  
  @keyframes upSix1 {
    0% {
      -webkit-transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0);
      transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0)
    }
  
    to {
      -webkit-transform: translate3d(0, 50%, calc(var(--li-nth1) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg);
      transform: translate3d(0, 50%, calc(var(--li-nth1) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg)
    }
  }
  
  @-webkit-keyframes downSix1 {
    0% {
      -webkit-transform: translate3d(0, 0, calc(var(--li-nth1) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg);
      transform: translate3d(0, 0, calc(var(--li-nth1) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg)
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0);
      transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0)
    }
  }
  
  @keyframes downSix1 {
    0% {
      -webkit-transform: translate3d(0, 0, calc(var(--li-nth1) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg);
      transform: translate3d(0, 0, calc(var(--li-nth1) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg)
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0);
      transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0)
    }
  }
  
  @-webkit-keyframes upSix2 {
    0% {
      -webkit-transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0);
      transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0)
    }
  
    to {
      -webkit-transform: translate3d(0, 50%, calc(var(--li-nth2) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg);
      transform: translate3d(0, 50%, calc(var(--li-nth2) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg)
    }
  }
  
  @keyframes upSix2 {
    0% {
      -webkit-transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0);
      transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0)
    }
  
    to {
      -webkit-transform: translate3d(0, 50%, calc(var(--li-nth2) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg);
      transform: translate3d(0, 50%, calc(var(--li-nth2) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg)
    }
  }
  
  @-webkit-keyframes downSix2 {
    0% {
      -webkit-transform: translate3d(0, 0, calc(var(--li-nth2) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg);
      transform: translate3d(0, 0, calc(var(--li-nth2) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg)
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0);
      transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0)
    }
  }
  
  @keyframes downSix2 {
    0% {
      -webkit-transform: translate3d(0, 0, calc(var(--li-nth2) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg);
      transform: translate3d(0, 0, calc(var(--li-nth2) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg)
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0);
      transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0)
    }
  }
  
  @-webkit-keyframes upSix3 {
    0% {
      -webkit-transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0);
      transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0)
    }
  
    to {
      -webkit-transform: translate3d(0, 50%, calc(var(--li-nth3) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg);
      transform: translate3d(0, 50%, calc(var(--li-nth3) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg)
    }
  }
  
  @keyframes upSix3 {
    0% {
      -webkit-transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0);
      transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0)
    }
  
    to {
      -webkit-transform: translate3d(0, 50%, calc(var(--li-nth3) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg);
      transform: translate3d(0, 50%, calc(var(--li-nth3) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg)
    }
  }
  
  @-webkit-keyframes downSix3 {
    0% {
      -webkit-transform: translate3d(0, 0, calc(var(--li-nth3) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg);
      transform: translate3d(0, 0, calc(var(--li-nth3) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg)
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0);
      transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0)
    }
  }
  
  @keyframes downSix3 {
    0% {
      -webkit-transform: translate3d(0, 0, calc(var(--li-nth3) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg);
      transform: translate3d(0, 0, calc(var(--li-nth3) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg)
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0);
      transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0)
    }
  }
  
  @-webkit-keyframes upSix4 {
    0% {
      -webkit-transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0);
      transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0)
    }
  
    to {
      -webkit-transform: translate3d(0, 50%, calc(var(--li-nth4) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg);
      transform: translate3d(0, 50%, calc(var(--li-nth4) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg)
    }
  }
  
  @keyframes upSix4 {
    0% {
      -webkit-transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0);
      transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0)
    }
  
    to {
      -webkit-transform: translate3d(0, 50%, calc(var(--li-nth4) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg);
      transform: translate3d(0, 50%, calc(var(--li-nth4) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg)
    }
  }
  
  @-webkit-keyframes downSix4 {
    0% {
      -webkit-transform: translate3d(0, 0, calc(var(--li-nth4) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg);
      transform: translate3d(0, 0, calc(var(--li-nth4) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg)
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0);
      transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0)
    }
  }
  
  @keyframes downSix4 {
    0% {
      -webkit-transform: translate3d(0, 0, calc(var(--li-nth4) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg);
      transform: translate3d(0, 0, calc(var(--li-nth4) + 3.125rem)) rotateX(90deg) rotateY(200deg) rotate(180deg)
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0);
      transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0)
    }
  }
  
  @-webkit-keyframes borderSix {
    0% {
      -webkit-transform: translate3d(0, 0, 160px) rotateX(90deg) rotateY(200deg) rotate(180deg);
      transform: translate3d(0, 0, 160px) rotateX(90deg) rotateY(200deg) rotate(180deg)
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0);
      transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0)
    }
  }
  
  @keyframes borderSix {
    0% {
      -webkit-transform: translate3d(0, 0, 160px) rotateX(90deg) rotateY(200deg) rotate(180deg);
      transform: translate3d(0, 0, 160px) rotateX(90deg) rotateY(200deg) rotate(180deg)
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0);
      transform: translate3d(0, 0, 0.625rem) rotateX(0) rotateY(-20deg) rotate(0)
    }
  }
  
  .effect-color.runner-ball {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    -webkit-filter: drop-shadow(0 0 0.9375rem var(--skin-color));
    filter: drop-shadow(0 0 0.9375rem var(--skin-color))
  }
  
  .effect-color.runner-ball .color-circle {
    position: absolute;
    width: 0.625rem;
    height: 0.625rem;
    background: var(--skin-color);
    border-radius: 50%;
    right: -1.875rem;
    top: -1.875rem;
    -webkit-transform: translate(0, -0.625rem) scale(0.1);
    transform: translate(0, -0.625rem) scale(0.1);
    -webkit-transform: translate(0, -0.625rem) scale(0.8);
    transform: translate(0, -0.625rem) scale(0.8);
    -webkit-transform: translate(0, -0.625rem) scale(1.7);
    transform: translate(0, -0.625rem) scale(1.7);
    -webkit-transform: translate(0, -0.625rem) scale(1.6);
    transform: translate(0, -0.625rem) scale(1.6);
    -webkit-transform: translate(0, -0.625rem) scale(1.3);
    transform: translate(0, -0.625rem) scale(1.3);
    -webkit-transform: translate(0, -0.625rem) scale(0.9);
    transform: translate(0, -0.625rem) scale(0.9);
    -webkit-transform: translate(0, -0.625rem) scale(0.4);
    transform: translate(0, -0.625rem) scale(0.4);
    transform: translate(0, -0.625rem) scale(0.9);
    transform: translate(0, -0.625rem) scale(0.9);
    -webkit-transform: translate(0, -0.625rem) scale(1.5);
    transform: translate(0, -0.625rem) scale(1.5);
    -webkit-transform: translate(0, -0.625rem) scale(1.4);
    transform: translate(0, -0.625rem) scale(1.4);
    -webkit-transform: translate(0, -0.625rem) scale(1.1);
    transform: translate(0, -0.625rem) scale(1.1);
    transform: translate(0, -0.625rem) scale(1.1);
    transform: translate(0, -0.625rem) scale(0.9);
    transform: translate(0, -0.625rem) scale(0.1);
    transform: translate(0, -0.625rem) scale(1.1);
    -webkit-transform: translate(0, -0.625rem) scale(0.7);
    transform: translate(0, -0.625rem) scale(0.7);
    transform: translate(0, -0.625rem) scale(1.7);
    transform: translate(0, -0.625rem) scale(0.9);
    transform: translate(0, -0.625rem) scale(1.3);
    -webkit-transform: translate(0, -0.625rem) scale(1.2);
    transform: translate(0, -0.625rem) scale(1.2);
    transform: translate(0, -0.625rem) scale(1.2);
    transform: translate(0, -0.625rem) scale(0.4);
    transform: translate(0, -0.625rem) scale(1.1);
    -webkit-transform: translate(0, -0.625rem) scale(1.8);
    transform: translate(0, -0.625rem) scale(1.8);
    transform: translate(0, -0.625rem) scale(0.8);
    -webkit-transform: translate(0, -0.625rem) scale(1.9);
    transform: translate(0, -0.625rem) scale(1.9);
    transform: translate(0, -0.625rem) scale(1.7);
    transform: translate(0, -0.625rem) scale(1.8);
    transform: translate(0, -0.625rem) scale(1.6);
    transform: translate(0, -0.625rem) scale(1.2);
    transform: translate(0, -0.625rem) scale(1.2);
    transform: translate(0, -0.625rem) scale(1.9);
    -webkit-transform: translate(0, -0.625rem) scale(0.5);
    transform: translate(0, -0.625rem) scale(0.5);
    transform: translate(0, -0.625rem) scale(0.8);
    transform: translate(0, -0.625rem) scale(1.1);
    -webkit-transform: translate(0, -0.625rem) scale(2);
    transform: translate(0, -0.625rem) scale(2);
    transform: translate(0, -0.625rem) scale(0.8);
    transform: translate(0, -0.625rem) scale(1.6);
    transform: translate(0, -0.625rem) scale(0.7);
    transform: translate(0, -0.625rem) scale(0.7);
    transform: translate(0, -0.625rem) scale(1.8);
    transform: translate(0, -0.625rem) scale(1.4);
    -webkit-transform: translate(0, -0.625rem) scale(0.6);
    transform: translate(0, -0.625rem) scale(0.6);
    transform: translate(0, -0.625rem) scale(1.2);
    transform: translate(0, -0.625rem) scale(0.6);
    transform: translate(0, -0.625rem) scale(0.7);
    transform: translate(0, -0.625rem) scale(2);
    transform: translate(0, -0.625rem) scale(1.4);
    transform: translate(0, -0.625rem) scale(1.3);
    transform: translate(0, -0.625rem) scale(0.1);
    transform: translate(0, -0.625rem) scale(0.7);
    transform: translate(0, -0.625rem) scale(0.9);
    transform: translate(0, -0.625rem) scale(0.5);
    transform: translate(0, -0.625rem) scale(0.7);
    transform: translate(0, -0.625rem) scale(0.7);
    transform: translate(0, -0.625rem) scale(1.7);
    transform: translate(0, -0.625rem) scale(0.5);
    transform: translate(0, -0.625rem) scale(1.2);
    transform: translate(0, -0.625rem) scale(2);
    transform: translate(0, -0.625rem) scale(1.5);
    transform: translate(0, -0.625rem) scale(0.1);
    transform: translate(0, -0.625rem) scale(0.9);
    -webkit-transform: translate(0, -0.625rem) scale(0.2);
    transform: translate(0, -0.625rem) scale(0.2);
    transform: translate(0, -0.625rem) scale(2);
    transform: translate(0, -0.625rem) scale(0.5);
    transform: translate(0, -0.625rem) scale(0.6);
    transform: translate(0, -0.625rem) scale(1.7);
    transform: translate(0, -0.625rem) scale(0.5);
    transform: translate(0, -0.625rem) scale(1.1);
    transform: translate(0, -0.625rem) scale(1.7);
    transform: translate(0, -0.625rem) scale(0.1);
    transform: translate(0, -0.625rem) scale(1.1);
    transform: translate(0, -0.625rem) scale(1.7);
    -webkit-transform: translate(0, -0.625rem) scale(0.3);
    transform: translate(0, -0.625rem) scale(0.3);
    -webkit-transform: translate(0, -0.625rem) scale(1);
    transform: translate(0, -0.625rem) scale(1);
    transform: translate(0, -0.625rem) scale(1);
    transform: translate(0, -0.625rem) scale(0.7);
    transform: translate(0, -0.625rem) scale(1.9);
    transform: translate(0, -0.625rem) scale(1.4)
  }
  
  .effect-color.runner-ball .color-circle:first-child {
    -webkit-animation: fall-1 4s 0s ease-out 1;
    animation: fall-1 4s 0s ease-out 1;
    opacity: 2
  }
  
  @-webkit-keyframes fall-1 {
    56.804% {
      -webkit-transform: translate(0, 0) scale(0.1);
      transform: translate(0, 0) scale(0.1);
      opacity: 2.5
    }
  
    to {
      -webkit-transform: translate(-52.078vw, 100vh) scale(0.1);
      transform: translate(-52.078vw, 100vh) scale(0.1);
      opacity: 0
    }
  }
  
  @keyframes fall-1 {
    56.804% {
      -webkit-transform: translate(0, 0) scale(0.1);
      transform: translate(0, 0) scale(0.1);
      opacity: 2.5
    }
  
    to {
      -webkit-transform: translate(-52.078vw, 100vh) scale(0.1);
      transform: translate(-52.078vw, 100vh) scale(0.1);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(2) {
    -webkit-animation: fall-2 4s 0s ease-out 1;
    animation: fall-2 4s 0s ease-out 1;
    opacity: 1
  }
  
  @-webkit-keyframes fall-2 {
    28.498% {
      -webkit-transform: translate(0, 0) scale(0.8);
      transform: translate(0, 0) scale(0.8);
      opacity: 3
    }
  
    to {
      -webkit-transform: translate(-30.9514vw, 100vh) scale(0.8);
      transform: translate(-30.9514vw, 100vh) scale(0.8);
      opacity: 0
    }
  }
  
  @keyframes fall-2 {
    28.498% {
      -webkit-transform: translate(0, 0) scale(0.8);
      transform: translate(0, 0) scale(0.8);
      opacity: 3
    }
  
    to {
      -webkit-transform: translate(-30.9514vw, 100vh) scale(0.8);
      transform: translate(-30.9514vw, 100vh) scale(0.8);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(3) {
    -webkit-animation: fall-3 5s 0s ease-out 1;
    animation: fall-3 5s 0s ease-out 1;
    opacity: 2
  }
  
  @-webkit-keyframes fall-3 {
    94.248% {
      -webkit-transform: translate(0, 0) scale(1.7);
      transform: translate(0, 0) scale(1.7);
      opacity: 1
    }
  
    to {
      -webkit-transform: translate(-32.42205vw, 100vh) scale(1.7);
      transform: translate(-32.42205vw, 100vh) scale(1.7);
      opacity: 0
    }
  }
  
  @keyframes fall-3 {
    94.248% {
      -webkit-transform: translate(0, 0) scale(1.7);
      transform: translate(0, 0) scale(1.7);
      opacity: 1
    }
  
    to {
      -webkit-transform: translate(-32.42205vw, 100vh) scale(1.7);
      transform: translate(-32.42205vw, 100vh) scale(1.7);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(4) {
    -webkit-animation: fall-4 5s 0s ease-out 1;
    animation: fall-4 5s 0s ease-out 1;
    opacity: 1
  }
  
  @-webkit-keyframes fall-4 {
    58.655% {
      -webkit-transform: translate(0, 0) scale(1.6);
      transform: translate(0, 0) scale(1.6);
      opacity: 1
    }
  
    to {
      -webkit-transform: translate(-19.15855vw, 100vh) scale(1.6);
      transform: translate(-19.15855vw, 100vh) scale(1.6);
      opacity: 0
    }
  }
  
  @keyframes fall-4 {
    58.655% {
      -webkit-transform: translate(0, 0) scale(1.6);
      transform: translate(0, 0) scale(1.6);
      opacity: 1
    }
  
    to {
      -webkit-transform: translate(-19.15855vw, 100vh) scale(1.6);
      transform: translate(-19.15855vw, 100vh) scale(1.6);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(5) {
    -webkit-animation: fall-5 5s 0s ease-out 1;
    animation: fall-5 5s 0s ease-out 1;
    opacity: 3.5
  }
  
  @-webkit-keyframes fall-5 {
    41.724% {
      -webkit-transform: translate(0, 0) scale(1.3);
      transform: translate(0, 0) scale(1.3);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-22.98705vw, 100vh) scale(1.3);
      transform: translate(-22.98705vw, 100vh) scale(1.3);
      opacity: 0
    }
  }
  
  @keyframes fall-5 {
    41.724% {
      -webkit-transform: translate(0, 0) scale(1.3);
      transform: translate(0, 0) scale(1.3);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-22.98705vw, 100vh) scale(1.3);
      transform: translate(-22.98705vw, 100vh) scale(1.3);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(6) {
    -webkit-animation: fall-6 5s 0s ease-out 1;
    animation: fall-6 5s 0s ease-out 1;
    opacity: 3
  }
  
  @-webkit-keyframes fall-6 {
    55.343% {
      -webkit-transform: translate(0, 0) scale(0.9);
      transform: translate(0, 0) scale(0.9);
      opacity: 4
    }
  
    to {
      -webkit-transform: translate(-3.8987vw, 100vh) scale(0.9);
      transform: translate(-3.8987vw, 100vh) scale(0.9);
      opacity: 0
    }
  }
  
  @keyframes fall-6 {
    55.343% {
      -webkit-transform: translate(0, 0) scale(0.9);
      transform: translate(0, 0) scale(0.9);
      opacity: 4
    }
  
    to {
      -webkit-transform: translate(-3.8987vw, 100vh) scale(0.9);
      transform: translate(-3.8987vw, 100vh) scale(0.9);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(7) {
    -webkit-animation: fall-7 5s 0s ease-out 1;
    animation: fall-7 5s 0s ease-out 1;
    opacity: 1
  }
  
  @-webkit-keyframes fall-7 {
    60.243% {
      -webkit-transform: translate(0, 0) scale(0.4);
      transform: translate(0, 0) scale(0.4);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-76.6079vw, 100vh) scale(0.4);
      transform: translate(-76.6079vw, 100vh) scale(0.4);
      opacity: 0
    }
  }
  
  @keyframes fall-7 {
    60.243% {
      -webkit-transform: translate(0, 0) scale(0.4);
      transform: translate(0, 0) scale(0.4);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-76.6079vw, 100vh) scale(0.4);
      transform: translate(-76.6079vw, 100vh) scale(0.4);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(8) {
    -webkit-animation: fall-8 5s 0s ease-out 1;
    animation: fall-8 5s 0s ease-out 1;
    opacity: 4
  }
  
  @-webkit-keyframes fall-8 {
    71.09% {
      -webkit-transform: translate(0, 0) scale(0.9);
      transform: translate(0, 0) scale(0.9);
      opacity: 1
    }
  
    to {
      -webkit-transform: translate(-33.26005vw, 100vh) scale(0.9);
      transform: translate(-33.26005vw, 100vh) scale(0.9);
      opacity: 0
    }
  }
  
  @keyframes fall-8 {
    71.09% {
      -webkit-transform: translate(0, 0) scale(0.9);
      transform: translate(0, 0) scale(0.9);
      opacity: 1
    }
  
    to {
      -webkit-transform: translate(-33.26005vw, 100vh) scale(0.9);
      transform: translate(-33.26005vw, 100vh) scale(0.9);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(9) {
    -webkit-animation: fall-9 4s 0s ease-out 1;
    animation: fall-9 4s 0s ease-out 1;
    opacity: 2
  }
  
  @-webkit-keyframes fall-9 {
    20.059% {
      -webkit-transform: translate(0, 0) scale(0.9);
      transform: translate(0, 0) scale(0.9);
      opacity: 2.5
    }
  
    to {
      -webkit-transform: translate(-7.1195vw, 100vh) scale(0.9);
      transform: translate(-7.1195vw, 100vh) scale(0.9);
      opacity: 0
    }
  }
  
  @keyframes fall-9 {
    20.059% {
      -webkit-transform: translate(0, 0) scale(0.9);
      transform: translate(0, 0) scale(0.9);
      opacity: 2.5
    }
  
    to {
      -webkit-transform: translate(-7.1195vw, 100vh) scale(0.9);
      transform: translate(-7.1195vw, 100vh) scale(0.9);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(10) {
    -webkit-animation: fall-10 5s 0s ease-out 1;
    animation: fall-10 5s 0s ease-out 1;
    opacity: 5
  }
  
  @-webkit-keyframes fall-10 {
    93.311% {
      -webkit-transform: translate(0, 0) scale(1.5);
      transform: translate(0, 0) scale(1.5);
      opacity: 1.5
    }
  
    to {
      -webkit-transform: translate(-69.08125vw, 100vh) scale(1.5);
      transform: translate(-69.08125vw, 100vh) scale(1.5);
      opacity: 0
    }
  }
  
  @keyframes fall-10 {
    93.311% {
      -webkit-transform: translate(0, 0) scale(1.5);
      transform: translate(0, 0) scale(1.5);
      opacity: 1.5
    }
  
    to {
      -webkit-transform: translate(-69.08125vw, 100vh) scale(1.5);
      transform: translate(-69.08125vw, 100vh) scale(1.5);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(11) {
    -webkit-animation: fall-11 5s 0s ease-out 1;
    animation: fall-11 5s 0s ease-out 1;
    opacity: 2.5
  }
  
  @-webkit-keyframes fall-11 {
    75.395% {
      -webkit-transform: translate(0, 0) scale(1.4);
      transform: translate(0, 0) scale(1.4);
      opacity: 3.5
    }
  
    to {
      -webkit-transform: translate(-89.0232vw, 100vh) scale(1.4);
      transform: translate(-89.0232vw, 100vh) scale(1.4);
      opacity: 0
    }
  }
  
  @keyframes fall-11 {
    75.395% {
      -webkit-transform: translate(0, 0) scale(1.4);
      transform: translate(0, 0) scale(1.4);
      opacity: 3.5
    }
  
    to {
      -webkit-transform: translate(-89.0232vw, 100vh) scale(1.4);
      transform: translate(-89.0232vw, 100vh) scale(1.4);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(12) {
    -webkit-animation: fall-12 5s 0s ease-out 1;
    animation: fall-12 5s 0s ease-out 1;
    opacity: 4.5
  }
  
  @-webkit-keyframes fall-12 {
    82.537% {
      -webkit-transform: translate(0, 0) scale(1.1);
      transform: translate(0, 0) scale(1.1);
      opacity: 1.5
    }
  
    to {
      -webkit-transform: translate(-94.789vw, 100vh) scale(1.1);
      transform: translate(-94.789vw, 100vh) scale(1.1);
      opacity: 0
    }
  }
  
  @keyframes fall-12 {
    82.537% {
      -webkit-transform: translate(0, 0) scale(1.1);
      transform: translate(0, 0) scale(1.1);
      opacity: 1.5
    }
  
    to {
      -webkit-transform: translate(-94.789vw, 100vh) scale(1.1);
      transform: translate(-94.789vw, 100vh) scale(1.1);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(13) {
    -webkit-animation: fall-13 5s 0s ease-out 1;
    animation: fall-13 5s 0s ease-out 1;
    opacity: 2
  }
  
  @-webkit-keyframes fall-13 {
    98.961% {
      -webkit-transform: translate(0, 0) scale(1.1);
      transform: translate(0, 0) scale(1.1);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-56.992vw, 100vh) scale(1.1);
      transform: translate(-56.992vw, 100vh) scale(1.1);
      opacity: 0
    }
  }
  
  @keyframes fall-13 {
    98.961% {
      -webkit-transform: translate(0, 0) scale(1.1);
      transform: translate(0, 0) scale(1.1);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-56.992vw, 100vh) scale(1.1);
      transform: translate(-56.992vw, 100vh) scale(1.1);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(14) {
    -webkit-animation: fall-14 4s 0s ease-out 1;
    animation: fall-14 4s 0s ease-out 1;
    opacity: 2
  }
  
  @-webkit-keyframes fall-14 {
    96.656% {
      -webkit-transform: translate(0, 0) scale(0.9);
      transform: translate(0, 0) scale(0.9);
      opacity: 1.5
    }
  
    to {
      -webkit-transform: translate(-33.15625vw, 100vh) scale(0.9);
      transform: translate(-33.15625vw, 100vh) scale(0.9);
      opacity: 0
    }
  }
  
  @keyframes fall-14 {
    96.656% {
      -webkit-transform: translate(0, 0) scale(0.9);
      transform: translate(0, 0) scale(0.9);
      opacity: 1.5
    }
  
    to {
      -webkit-transform: translate(-33.15625vw, 100vh) scale(0.9);
      transform: translate(-33.15625vw, 100vh) scale(0.9);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(15) {
    -webkit-animation: fall-15 5s 0s ease-out 1;
    animation: fall-15 5s 0s ease-out 1;
    opacity: 4.5
  }
  
  @-webkit-keyframes fall-15 {
    30.322% {
      -webkit-transform: translate(0, 0) scale(0.1);
      transform: translate(0, 0) scale(0.1);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-11.5045vw, 100vh) scale(0.1);
      transform: translate(-11.5045vw, 100vh) scale(0.1);
      opacity: 0
    }
  }
  
  @keyframes fall-15 {
    30.322% {
      -webkit-transform: translate(0, 0) scale(0.1);
      transform: translate(0, 0) scale(0.1);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-11.5045vw, 100vh) scale(0.1);
      transform: translate(-11.5045vw, 100vh) scale(0.1);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(16) {
    -webkit-animation: fall-16 5s 0s ease-out 1;
    animation: fall-16 5s 0s ease-out 1;
    opacity: 1.5
  }
  
  @-webkit-keyframes fall-16 {
    27.709% {
      -webkit-transform: translate(0, 0) scale(1.1);
      transform: translate(0, 0) scale(1.1);
      opacity: 1
    }
  
    to {
      -webkit-transform: translate(-19.0777vw, 100vh) scale(1.1);
      transform: translate(-19.0777vw, 100vh) scale(1.1);
      opacity: 0
    }
  }
  
  @keyframes fall-16 {
    27.709% {
      -webkit-transform: translate(0, 0) scale(1.1);
      transform: translate(0, 0) scale(1.1);
      opacity: 1
    }
  
    to {
      -webkit-transform: translate(-19.0777vw, 100vh) scale(1.1);
      transform: translate(-19.0777vw, 100vh) scale(1.1);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(17) {
    -webkit-animation: fall-17 4s 0s ease-out 1;
    animation: fall-17 4s 0s ease-out 1;
    opacity: 5
  }
  
  @-webkit-keyframes fall-17 {
    65.032% {
      -webkit-transform: translate(0, 0) scale(0.7);
      transform: translate(0, 0) scale(0.7);
      opacity: 3
    }
  
    to {
      -webkit-transform: translate(-29.99035vw, 100vh) scale(0.7);
      transform: translate(-29.99035vw, 100vh) scale(0.7);
      opacity: 0
    }
  }
  
  @keyframes fall-17 {
    65.032% {
      -webkit-transform: translate(0, 0) scale(0.7);
      transform: translate(0, 0) scale(0.7);
      opacity: 3
    }
  
    to {
      -webkit-transform: translate(-29.99035vw, 100vh) scale(0.7);
      transform: translate(-29.99035vw, 100vh) scale(0.7);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(18) {
    -webkit-animation: fall-18 5s 0s ease-out 1;
    animation: fall-18 5s 0s ease-out 1;
    opacity: 2.5
  }
  
  @-webkit-keyframes fall-18 {
    34.287% {
      -webkit-transform: translate(0, 0) scale(1.7);
      transform: translate(0, 0) scale(1.7);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-51.40245vw, 100vh) scale(1.7);
      transform: translate(-51.40245vw, 100vh) scale(1.7);
      opacity: 0
    }
  }
  
  @keyframes fall-18 {
    34.287% {
      -webkit-transform: translate(0, 0) scale(1.7);
      transform: translate(0, 0) scale(1.7);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-51.40245vw, 100vh) scale(1.7);
      transform: translate(-51.40245vw, 100vh) scale(1.7);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(19) {
    -webkit-animation: fall-19 4s 0s ease-out 1;
    animation: fall-19 4s 0s ease-out 1;
    opacity: 5
  }
  
  @-webkit-keyframes fall-19 {
    27.489% {
      -webkit-transform: translate(0, 0) scale(0.9);
      transform: translate(0, 0) scale(0.9);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-3.0691vw, 100vh) scale(0.9);
      transform: translate(-3.0691vw, 100vh) scale(0.9);
      opacity: 0
    }
  }
  
  @keyframes fall-19 {
    27.489% {
      -webkit-transform: translate(0, 0) scale(0.9);
      transform: translate(0, 0) scale(0.9);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-3.0691vw, 100vh) scale(0.9);
      transform: translate(-3.0691vw, 100vh) scale(0.9);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(20) {
    -webkit-animation: fall-20 4s 0s ease-out 1;
    animation: fall-20 4s 0s ease-out 1;
    opacity: 1.5
  }
  
  @-webkit-keyframes fall-20 {
    54.532% {
      -webkit-transform: translate(0, 0) scale(1.3);
      transform: translate(0, 0) scale(1.3);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-61.52105vw, 100vh) scale(1.3);
      transform: translate(-61.52105vw, 100vh) scale(1.3);
      opacity: 0
    }
  }
  
  @keyframes fall-20 {
    54.532% {
      -webkit-transform: translate(0, 0) scale(1.3);
      transform: translate(0, 0) scale(1.3);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-61.52105vw, 100vh) scale(1.3);
      transform: translate(-61.52105vw, 100vh) scale(1.3);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(21) {
    -webkit-animation: fall-21 5s 0s ease-out 1;
    animation: fall-21 5s 0s ease-out 1;
    opacity: 1
  }
  
  @-webkit-keyframes fall-21 {
    58.592% {
      -webkit-transform: translate(0, 0) scale(1.2);
      transform: translate(0, 0) scale(1.2);
      opacity: 4
    }
  
    to {
      -webkit-transform: translate(-73.668vw, 100vh) scale(1.2);
      transform: translate(-73.668vw, 100vh) scale(1.2);
      opacity: 0
    }
  }
  
  @keyframes fall-21 {
    58.592% {
      -webkit-transform: translate(0, 0) scale(1.2);
      transform: translate(0, 0) scale(1.2);
      opacity: 4
    }
  
    to {
      -webkit-transform: translate(-73.668vw, 100vh) scale(1.2);
      transform: translate(-73.668vw, 100vh) scale(1.2);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(22) {
    -webkit-animation: fall-22 4s 0s ease-out 1;
    animation: fall-22 4s 0s ease-out 1;
    opacity: 3.5
  }
  
  @-webkit-keyframes fall-22 {
    36.873% {
      -webkit-transform: translate(0, 0) scale(1.2);
      transform: translate(0, 0) scale(1.2);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-40.00105vw, 100vh) scale(1.2);
      transform: translate(-40.00105vw, 100vh) scale(1.2);
      opacity: 0
    }
  }
  
  @keyframes fall-22 {
    36.873% {
      -webkit-transform: translate(0, 0) scale(1.2);
      transform: translate(0, 0) scale(1.2);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-40.00105vw, 100vh) scale(1.2);
      transform: translate(-40.00105vw, 100vh) scale(1.2);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(23) {
    -webkit-animation: fall-23 5s 0s ease-out 1;
    animation: fall-23 5s 0s ease-out 1;
    opacity: 4
  }
  
  @-webkit-keyframes fall-23 {
    74.904% {
      -webkit-transform: translate(0, 0) scale(0.4);
      transform: translate(0, 0) scale(0.4);
      opacity: 1
    }
  
    to {
      -webkit-transform: translate(-58.4337vw, 100vh) scale(0.4);
      transform: translate(-58.4337vw, 100vh) scale(0.4);
      opacity: 0
    }
  }
  
  @keyframes fall-23 {
    74.904% {
      -webkit-transform: translate(0, 0) scale(0.4);
      transform: translate(0, 0) scale(0.4);
      opacity: 1
    }
  
    to {
      -webkit-transform: translate(-58.4337vw, 100vh) scale(0.4);
      transform: translate(-58.4337vw, 100vh) scale(0.4);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(24) {
    -webkit-animation: fall-24 5s 0s ease-out 1;
    animation: fall-24 5s 0s ease-out 1;
    opacity: 1.5
  }
  
  @-webkit-keyframes fall-24 {
    99.319% {
      -webkit-transform: translate(0, 0) scale(1.1);
      transform: translate(0, 0) scale(1.1);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-75.36325vw, 100vh) scale(1.1);
      transform: translate(-75.36325vw, 100vh) scale(1.1);
      opacity: 0
    }
  }
  
  @keyframes fall-24 {
    99.319% {
      -webkit-transform: translate(0, 0) scale(1.1);
      transform: translate(0, 0) scale(1.1);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-75.36325vw, 100vh) scale(1.1);
      transform: translate(-75.36325vw, 100vh) scale(1.1);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(25) {
    -webkit-animation: fall-25 5s 0s ease-out 1;
    animation: fall-25 5s 0s ease-out 1;
    opacity: 2.5
  }
  
  @-webkit-keyframes fall-25 {
    82.217% {
      -webkit-transform: translate(0, 0) scale(1.8);
      transform: translate(0, 0) scale(1.8);
      opacity: 3.5
    }
  
    to {
      -webkit-transform: translate(-5.22495vw, 100vh) scale(1.8);
      transform: translate(-5.22495vw, 100vh) scale(1.8);
      opacity: 0
    }
  }
  
  @keyframes fall-25 {
    82.217% {
      -webkit-transform: translate(0, 0) scale(1.8);
      transform: translate(0, 0) scale(1.8);
      opacity: 3.5
    }
  
    to {
      -webkit-transform: translate(-5.22495vw, 100vh) scale(1.8);
      transform: translate(-5.22495vw, 100vh) scale(1.8);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(26) {
    -webkit-animation: fall-26 4s 0s ease-out 1;
    animation: fall-26 4s 0s ease-out 1;
    opacity: 1.5
  }
  
  @-webkit-keyframes fall-26 {
    64.604% {
      -webkit-transform: translate(0, 0) scale(0.8);
      transform: translate(0, 0) scale(0.8);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-32.47845vw, 100vh) scale(0.8);
      transform: translate(-32.47845vw, 100vh) scale(0.8);
      opacity: 0
    }
  }
  
  @keyframes fall-26 {
    64.604% {
      -webkit-transform: translate(0, 0) scale(0.8);
      transform: translate(0, 0) scale(0.8);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-32.47845vw, 100vh) scale(0.8);
      transform: translate(-32.47845vw, 100vh) scale(0.8);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(27) {
    -webkit-animation: fall-27 5s 0s ease-out 1;
    animation: fall-27 5s 0s ease-out 1;
    opacity: 1.5
  }
  
  @-webkit-keyframes fall-27 {
    84.937% {
      -webkit-transform: translate(0, 0) scale(1.9);
      transform: translate(0, 0) scale(1.9);
      opacity: 3.5
    }
  
    to {
      -webkit-transform: translate(-15.53595vw, 100vh) scale(1.9);
      transform: translate(-15.53595vw, 100vh) scale(1.9);
      opacity: 0
    }
  }
  
  @keyframes fall-27 {
    84.937% {
      -webkit-transform: translate(0, 0) scale(1.9);
      transform: translate(0, 0) scale(1.9);
      opacity: 3.5
    }
  
    to {
      -webkit-transform: translate(-15.53595vw, 100vh) scale(1.9);
      transform: translate(-15.53595vw, 100vh) scale(1.9);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(28) {
    -webkit-animation: fall-28 4s 0s ease-out 1;
    animation: fall-28 4s 0s ease-out 1;
    opacity: 3.5
  }
  
  @-webkit-keyframes fall-28 {
    75.843% {
      -webkit-transform: translate(0, 0) scale(1.7);
      transform: translate(0, 0) scale(1.7);
      opacity: 2.5
    }
  
    to {
      -webkit-transform: translate(-68.50805vw, 100vh) scale(1.7);
      transform: translate(-68.50805vw, 100vh) scale(1.7);
      opacity: 0
    }
  }
  
  @keyframes fall-28 {
    75.843% {
      -webkit-transform: translate(0, 0) scale(1.7);
      transform: translate(0, 0) scale(1.7);
      opacity: 2.5
    }
  
    to {
      -webkit-transform: translate(-68.50805vw, 100vh) scale(1.7);
      transform: translate(-68.50805vw, 100vh) scale(1.7);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(29) {
    -webkit-animation: fall-29 5s 0s ease-out 1;
    animation: fall-29 5s 0s ease-out 1;
    opacity: 4
  }
  
  @-webkit-keyframes fall-29 {
    21.122% {
      -webkit-transform: translate(0, 0) scale(1.8);
      transform: translate(0, 0) scale(1.8);
      opacity: 3
    }
  
    to {
      -webkit-transform: translate(-65.0353vw, 100vh) scale(1.8);
      transform: translate(-65.0353vw, 100vh) scale(1.8);
      opacity: 0
    }
  }
  
  @keyframes fall-29 {
    21.122% {
      -webkit-transform: translate(0, 0) scale(1.8);
      transform: translate(0, 0) scale(1.8);
      opacity: 3
    }
  
    to {
      -webkit-transform: translate(-65.0353vw, 100vh) scale(1.8);
      transform: translate(-65.0353vw, 100vh) scale(1.8);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(30) {
    -webkit-animation: fall-30 4s 0s ease-out 1;
    animation: fall-30 4s 0s ease-out 1;
    opacity: 1.5
  }
  
  @-webkit-keyframes fall-30 {
    68.885% {
      -webkit-transform: translate(0, 0) scale(1.6);
      transform: translate(0, 0) scale(1.6);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-67.38255vw, 100vh) scale(1.6);
      transform: translate(-67.38255vw, 100vh) scale(1.6);
      opacity: 0
    }
  }
  
  @keyframes fall-30 {
    68.885% {
      -webkit-transform: translate(0, 0) scale(1.6);
      transform: translate(0, 0) scale(1.6);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-67.38255vw, 100vh) scale(1.6);
      transform: translate(-67.38255vw, 100vh) scale(1.6);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(31) {
    -webkit-animation: fall-31 5s 0s ease-out 1;
    animation: fall-31 5s 0s ease-out 1;
    opacity: 1.5
  }
  
  @-webkit-keyframes fall-31 {
    45.351% {
      -webkit-transform: translate(0, 0) scale(1.2);
      transform: translate(0, 0) scale(1.2);
      opacity: 5
    }
  
    to {
      -webkit-transform: translate(-42.4086vw, 100vh) scale(1.2);
      transform: translate(-42.4086vw, 100vh) scale(1.2);
      opacity: 0
    }
  }
  
  @keyframes fall-31 {
    45.351% {
      -webkit-transform: translate(0, 0) scale(1.2);
      transform: translate(0, 0) scale(1.2);
      opacity: 5
    }
  
    to {
      -webkit-transform: translate(-42.4086vw, 100vh) scale(1.2);
      transform: translate(-42.4086vw, 100vh) scale(1.2);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(32) {
    -webkit-animation: fall-32 5s 0s ease-out 1;
    animation: fall-32 5s 0s ease-out 1;
    opacity: 2
  }
  
  @-webkit-keyframes fall-32 {
    83.112% {
      -webkit-transform: translate(0, 0) scale(1.2);
      transform: translate(0, 0) scale(1.2);
      opacity: 3
    }
  
    to {
      -webkit-transform: translate(-47.57735vw, 100vh) scale(1.2);
      transform: translate(-47.57735vw, 100vh) scale(1.2);
      opacity: 0
    }
  }
  
  @keyframes fall-32 {
    83.112% {
      -webkit-transform: translate(0, 0) scale(1.2);
      transform: translate(0, 0) scale(1.2);
      opacity: 3
    }
  
    to {
      -webkit-transform: translate(-47.57735vw, 100vh) scale(1.2);
      transform: translate(-47.57735vw, 100vh) scale(1.2);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(33) {
    -webkit-animation: fall-33 4s 0s ease-out 1;
    animation: fall-33 4s 0s ease-out 1;
    opacity: 4
  }
  
  @-webkit-keyframes fall-33 {
    97.665% {
      -webkit-transform: translate(0, 0) scale(1.9);
      transform: translate(0, 0) scale(1.9);
      opacity: 4
    }
  
    to {
      -webkit-transform: translate(-38.33955vw, 100vh) scale(1.9);
      transform: translate(-38.33955vw, 100vh) scale(1.9);
      opacity: 0
    }
  }
  
  @keyframes fall-33 {
    97.665% {
      -webkit-transform: translate(0, 0) scale(1.9);
      transform: translate(0, 0) scale(1.9);
      opacity: 4
    }
  
    to {
      -webkit-transform: translate(-38.33955vw, 100vh) scale(1.9);
      transform: translate(-38.33955vw, 100vh) scale(1.9);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(34) {
    -webkit-animation: fall-34 4s 0s ease-out 1;
    animation: fall-34 4s 0s ease-out 1;
    opacity: 1.5
  }
  
  @-webkit-keyframes fall-34 {
    48.015% {
      -webkit-transform: translate(0, 0) scale(0.5);
      transform: translate(0, 0) scale(0.5);
      opacity: 3.5
    }
  
    to {
      -webkit-transform: translate(-53.71425vw, 100vh) scale(0.5);
      transform: translate(-53.71425vw, 100vh) scale(0.5);
      opacity: 0
    }
  }
  
  @keyframes fall-34 {
    48.015% {
      -webkit-transform: translate(0, 0) scale(0.5);
      transform: translate(0, 0) scale(0.5);
      opacity: 3.5
    }
  
    to {
      -webkit-transform: translate(-53.71425vw, 100vh) scale(0.5);
      transform: translate(-53.71425vw, 100vh) scale(0.5);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(35) {
    -webkit-animation: fall-35 4s 0s ease-out 1;
    animation: fall-35 4s 0s ease-out 1;
    opacity: 2.5
  }
  
  @-webkit-keyframes fall-35 {
    84.448% {
      -webkit-transform: translate(0, 0) scale(0.8);
      transform: translate(0, 0) scale(0.8);
      opacity: 1
    }
  
    to {
      -webkit-transform: translate(-10.3237vw, 100vh) scale(0.8);
      transform: translate(-10.3237vw, 100vh) scale(0.8);
      opacity: 0
    }
  }
  
  @keyframes fall-35 {
    84.448% {
      -webkit-transform: translate(0, 0) scale(0.8);
      transform: translate(0, 0) scale(0.8);
      opacity: 1
    }
  
    to {
      -webkit-transform: translate(-10.3237vw, 100vh) scale(0.8);
      transform: translate(-10.3237vw, 100vh) scale(0.8);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(36) {
    -webkit-animation: fall-36 4s 0s ease-out 1;
    animation: fall-36 4s 0s ease-out 1;
    opacity: 3.5
  }
  
  @-webkit-keyframes fall-36 {
    42.259% {
      -webkit-transform: translate(0, 0) scale(1.1);
      transform: translate(0, 0) scale(1.1);
      opacity: 5
    }
  
    to {
      -webkit-transform: translate(-18.74175vw, 100vh) scale(1.1);
      transform: translate(-18.74175vw, 100vh) scale(1.1);
      opacity: 0
    }
  }
  
  @keyframes fall-36 {
    42.259% {
      -webkit-transform: translate(0, 0) scale(1.1);
      transform: translate(0, 0) scale(1.1);
      opacity: 5
    }
  
    to {
      -webkit-transform: translate(-18.74175vw, 100vh) scale(1.1);
      transform: translate(-18.74175vw, 100vh) scale(1.1);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(37) {
    -webkit-animation: fall-37 5s 0s ease-out 1;
    animation: fall-37 5s 0s ease-out 1;
    opacity: 2.5
  }
  
  @-webkit-keyframes fall-37 {
    67.309% {
      -webkit-transform: translate(0, 0) scale(2);
      transform: translate(0, 0) scale(2);
      opacity: 5
    }
  
    to {
      -webkit-transform: translate(-93.37385vw, 100vh) scale(2);
      transform: translate(-93.37385vw, 100vh) scale(2);
      opacity: 0
    }
  }
  
  @keyframes fall-37 {
    67.309% {
      -webkit-transform: translate(0, 0) scale(2);
      transform: translate(0, 0) scale(2);
      opacity: 5
    }
  
    to {
      -webkit-transform: translate(-93.37385vw, 100vh) scale(2);
      transform: translate(-93.37385vw, 100vh) scale(2);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(38) {
    -webkit-animation: fall-38 4s 0s ease-out 1;
    animation: fall-38 4s 0s ease-out 1;
    opacity: 2.5
  }
  
  @-webkit-keyframes fall-38 {
    85.984% {
      -webkit-transform: translate(0, 0) scale(0.8);
      transform: translate(0, 0) scale(0.8);
      opacity: 2.5
    }
  
    to {
      -webkit-transform: translate(-81.88635vw, 100vh) scale(0.8);
      transform: translate(-81.88635vw, 100vh) scale(0.8);
      opacity: 0
    }
  }
  
  @keyframes fall-38 {
    85.984% {
      -webkit-transform: translate(0, 0) scale(0.8);
      transform: translate(0, 0) scale(0.8);
      opacity: 2.5
    }
  
    to {
      -webkit-transform: translate(-81.88635vw, 100vh) scale(0.8);
      transform: translate(-81.88635vw, 100vh) scale(0.8);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(39) {
    -webkit-animation: fall-39 4s 0s ease-out 1;
    animation: fall-39 4s 0s ease-out 1;
    opacity: 2
  }
  
  @-webkit-keyframes fall-39 {
    53.422% {
      -webkit-transform: translate(0, 0) scale(1.6);
      transform: translate(0, 0) scale(1.6);
      opacity: 2.5
    }
  
    to {
      -webkit-transform: translate(-91.65465vw, 100vh) scale(1.6);
      transform: translate(-91.65465vw, 100vh) scale(1.6);
      opacity: 0
    }
  }
  
  @keyframes fall-39 {
    53.422% {
      -webkit-transform: translate(0, 0) scale(1.6);
      transform: translate(0, 0) scale(1.6);
      opacity: 2.5
    }
  
    to {
      -webkit-transform: translate(-91.65465vw, 100vh) scale(1.6);
      transform: translate(-91.65465vw, 100vh) scale(1.6);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(40) {
    -webkit-animation: fall-40 5s 0s ease-out 1;
    animation: fall-40 5s 0s ease-out 1;
    opacity: 4
  }
  
  @-webkit-keyframes fall-40 {
    57.695% {
      -webkit-transform: translate(0, 0) scale(0.7);
      transform: translate(0, 0) scale(0.7);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-12.8359vw, 100vh) scale(0.7);
      transform: translate(-12.8359vw, 100vh) scale(0.7);
      opacity: 0
    }
  }
  
  @keyframes fall-40 {
    57.695% {
      -webkit-transform: translate(0, 0) scale(0.7);
      transform: translate(0, 0) scale(0.7);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-12.8359vw, 100vh) scale(0.7);
      transform: translate(-12.8359vw, 100vh) scale(0.7);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(41) {
    -webkit-animation: fall-41 5s 0s ease-out 1;
    animation: fall-41 5s 0s ease-out 1;
    opacity: 0.5
  }
  
  @-webkit-keyframes fall-41 {
    35.383% {
      -webkit-transform: translate(0, 0) scale(0.7);
      transform: translate(0, 0) scale(0.7);
      opacity: 3.5
    }
  
    to {
      -webkit-transform: translate(-48.1581vw, 100vh) scale(0.7);
      transform: translate(-48.1581vw, 100vh) scale(0.7);
      opacity: 0
    }
  }
  
  @keyframes fall-41 {
    35.383% {
      -webkit-transform: translate(0, 0) scale(0.7);
      transform: translate(0, 0) scale(0.7);
      opacity: 3.5
    }
  
    to {
      -webkit-transform: translate(-48.1581vw, 100vh) scale(0.7);
      transform: translate(-48.1581vw, 100vh) scale(0.7);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(42) {
    -webkit-animation: fall-42 5s 0s ease-out 1;
    animation: fall-42 5s 0s ease-out 1;
    opacity: 3.5
  }
  
  @-webkit-keyframes fall-42 {
    61.646% {
      -webkit-transform: translate(0, 0) scale(1.8);
      transform: translate(0, 0) scale(1.8);
      opacity: 2
    }
  
    to {
      -webkit-transform: translate(-19.45545vw, 100vh) scale(1.8);
      transform: translate(-19.45545vw, 100vh) scale(1.8);
      opacity: 0
    }
  }
  
  @keyframes fall-42 {
    61.646% {
      -webkit-transform: translate(0, 0) scale(1.8);
      transform: translate(0, 0) scale(1.8);
      opacity: 2
    }
  
    to {
      -webkit-transform: translate(-19.45545vw, 100vh) scale(1.8);
      transform: translate(-19.45545vw, 100vh) scale(1.8);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(43) {
    -webkit-animation: fall-43 4s 0s ease-out 1;
    animation: fall-43 4s 0s ease-out 1;
    opacity: 2.5
  }
  
  @-webkit-keyframes fall-43 {
    96.183% {
      -webkit-transform: translate(0, 0) scale(1.4);
      transform: translate(0, 0) scale(1.4);
      opacity: 1.5
    }
  
    to {
      -webkit-transform: translate(-88.5695vw, 100vh) scale(1.4);
      transform: translate(-88.5695vw, 100vh) scale(1.4);
      opacity: 0
    }
  }
  
  @keyframes fall-43 {
    96.183% {
      -webkit-transform: translate(0, 0) scale(1.4);
      transform: translate(0, 0) scale(1.4);
      opacity: 1.5
    }
  
    to {
      -webkit-transform: translate(-88.5695vw, 100vh) scale(1.4);
      transform: translate(-88.5695vw, 100vh) scale(1.4);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(44) {
    -webkit-animation: fall-44 5s 0s ease-out 1;
    animation: fall-44 5s 0s ease-out 1;
    opacity: 2
  }
  
  @-webkit-keyframes fall-44 {
    27.832% {
      -webkit-transform: translate(0, 0) scale(0.6);
      transform: translate(0, 0) scale(0.6);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-50.59415vw, 100vh) scale(0.6);
      transform: translate(-50.59415vw, 100vh) scale(0.6);
      opacity: 0
    }
  }
  
  @keyframes fall-44 {
    27.832% {
      -webkit-transform: translate(0, 0) scale(0.6);
      transform: translate(0, 0) scale(0.6);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-50.59415vw, 100vh) scale(0.6);
      transform: translate(-50.59415vw, 100vh) scale(0.6);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(45) {
    -webkit-animation: fall-45 5s 0s ease-out 1;
    animation: fall-45 5s 0s ease-out 1;
    opacity: 2
  }
  
  @-webkit-keyframes fall-45 {
    78.417% {
      -webkit-transform: translate(0, 0) scale(1.2);
      transform: translate(0, 0) scale(1.2);
      opacity: 4
    }
  
    to {
      -webkit-transform: translate(-40.17505vw, 100vh) scale(1.2);
      transform: translate(-40.17505vw, 100vh) scale(1.2);
      opacity: 0
    }
  }
  
  @keyframes fall-45 {
    78.417% {
      -webkit-transform: translate(0, 0) scale(1.2);
      transform: translate(0, 0) scale(1.2);
      opacity: 4
    }
  
    to {
      -webkit-transform: translate(-40.17505vw, 100vh) scale(1.2);
      transform: translate(-40.17505vw, 100vh) scale(1.2);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(46) {
    -webkit-animation: fall-46 4s 0s ease-out 1;
    animation: fall-46 4s 0s ease-out 1;
    opacity: 0.5
  }
  
  @-webkit-keyframes fall-46 {
    99.783% {
      -webkit-transform: translate(0, 0) scale(0.6);
      transform: translate(0, 0) scale(0.6);
      opacity: 3.5
    }
  
    to {
      -webkit-transform: translate(-73.91775vw, 100vh) scale(0.6);
      transform: translate(-73.91775vw, 100vh) scale(0.6);
      opacity: 0
    }
  }
  
  @keyframes fall-46 {
    99.783% {
      -webkit-transform: translate(0, 0) scale(0.6);
      transform: translate(0, 0) scale(0.6);
      opacity: 3.5
    }
  
    to {
      -webkit-transform: translate(-73.91775vw, 100vh) scale(0.6);
      transform: translate(-73.91775vw, 100vh) scale(0.6);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(47) {
    -webkit-animation: fall-47 5s 0s ease-out 1;
    animation: fall-47 5s 0s ease-out 1;
    opacity: 2
  }
  
  @-webkit-keyframes fall-47 {
    29.015% {
      -webkit-transform: translate(0, 0) scale(0.7);
      transform: translate(0, 0) scale(0.7);
      opacity: 1.5
    }
  
    to {
      -webkit-transform: translate(-88.0409vw, 100vh) scale(0.7);
      transform: translate(-88.0409vw, 100vh) scale(0.7);
      opacity: 0
    }
  }
  
  @keyframes fall-47 {
    29.015% {
      -webkit-transform: translate(0, 0) scale(0.7);
      transform: translate(0, 0) scale(0.7);
      opacity: 1.5
    }
  
    to {
      -webkit-transform: translate(-88.0409vw, 100vh) scale(0.7);
      transform: translate(-88.0409vw, 100vh) scale(0.7);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(48) {
    -webkit-animation: fall-48 5s 0s ease-out 1;
    animation: fall-48 5s 0s ease-out 1;
    opacity: 2
  }
  
  @-webkit-keyframes fall-48 {
    53.741% {
      -webkit-transform: translate(0, 0) scale(2);
      transform: translate(0, 0) scale(2);
      opacity: 2.5
    }
  
    to {
      -webkit-transform: translate(-32.1633vw, 100vh) scale(2);
      transform: translate(-32.1633vw, 100vh) scale(2);
      opacity: 0
    }
  }
  
  @keyframes fall-48 {
    53.741% {
      -webkit-transform: translate(0, 0) scale(2);
      transform: translate(0, 0) scale(2);
      opacity: 2.5
    }
  
    to {
      -webkit-transform: translate(-32.1633vw, 100vh) scale(2);
      transform: translate(-32.1633vw, 100vh) scale(2);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(49) {
    -webkit-animation: fall-49 5s 0s ease-out 1;
    animation: fall-49 5s 0s ease-out 1;
    opacity: 0.5
  }
  
  @-webkit-keyframes fall-49 {
    67.596% {
      -webkit-transform: translate(0, 0) scale(1.4);
      transform: translate(0, 0) scale(1.4);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-35.39175vw, 100vh) scale(1.4);
      transform: translate(-35.39175vw, 100vh) scale(1.4);
      opacity: 0
    }
  }
  
  @keyframes fall-49 {
    67.596% {
      -webkit-transform: translate(0, 0) scale(1.4);
      transform: translate(0, 0) scale(1.4);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-35.39175vw, 100vh) scale(1.4);
      transform: translate(-35.39175vw, 100vh) scale(1.4);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(50) {
    -webkit-animation: fall-50 4s 0s ease-out 1;
    animation: fall-50 4s 0s ease-out 1;
    opacity: 3
  }
  
  @-webkit-keyframes fall-50 {
    80.177% {
      -webkit-transform: translate(0, 0) scale(1.3);
      transform: translate(0, 0) scale(1.3);
      opacity: 2.5
    }
  
    to {
      -webkit-transform: translate(-79.07075vw, 100vh) scale(1.3);
      transform: translate(-79.07075vw, 100vh) scale(1.3);
      opacity: 0
    }
  }
  
  @keyframes fall-50 {
    80.177% {
      -webkit-transform: translate(0, 0) scale(1.3);
      transform: translate(0, 0) scale(1.3);
      opacity: 2.5
    }
  
    to {
      -webkit-transform: translate(-79.07075vw, 100vh) scale(1.3);
      transform: translate(-79.07075vw, 100vh) scale(1.3);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(51) {
    -webkit-animation: fall-51 5s 0s ease-out 1;
    animation: fall-51 5s 0s ease-out 1;
    opacity: 2.5
  }
  
  @-webkit-keyframes fall-51 {
    98.706% {
      -webkit-transform: translate(0, 0) scale(0.1);
      transform: translate(0, 0) scale(0.1);
      opacity: 3
    }
  
    to {
      -webkit-transform: translate(-14.66515vw, 100vh) scale(0.1);
      transform: translate(-14.66515vw, 100vh) scale(0.1);
      opacity: 0
    }
  }
  
  @keyframes fall-51 {
    98.706% {
      -webkit-transform: translate(0, 0) scale(0.1);
      transform: translate(0, 0) scale(0.1);
      opacity: 3
    }
  
    to {
      -webkit-transform: translate(-14.66515vw, 100vh) scale(0.1);
      transform: translate(-14.66515vw, 100vh) scale(0.1);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(52) {
    -webkit-animation: fall-52 5s 0s ease-out 1;
    animation: fall-52 5s 0s ease-out 1;
    opacity: 5
  }
  
  @-webkit-keyframes fall-52 {
    66.824% {
      -webkit-transform: translate(0, 0) scale(0.7);
      transform: translate(0, 0) scale(0.7);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-97.2627vw, 100vh) scale(0.7);
      transform: translate(-97.2627vw, 100vh) scale(0.7);
      opacity: 0
    }
  }
  
  @keyframes fall-52 {
    66.824% {
      -webkit-transform: translate(0, 0) scale(0.7);
      transform: translate(0, 0) scale(0.7);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-97.2627vw, 100vh) scale(0.7);
      transform: translate(-97.2627vw, 100vh) scale(0.7);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(53) {
    -webkit-animation: fall-53 5s 0s ease-out 1;
    animation: fall-53 5s 0s ease-out 1;
    opacity: 3.5
  }
  
  @-webkit-keyframes fall-53 {
    38.807% {
      -webkit-transform: translate(0, 0) scale(0.9);
      transform: translate(0, 0) scale(0.9);
      opacity: 4
    }
  
    to {
      -webkit-transform: translate(-29.83225vw, 100vh) scale(0.9);
      transform: translate(-29.83225vw, 100vh) scale(0.9);
      opacity: 0
    }
  }
  
  @keyframes fall-53 {
    38.807% {
      -webkit-transform: translate(0, 0) scale(0.9);
      transform: translate(0, 0) scale(0.9);
      opacity: 4
    }
  
    to {
      -webkit-transform: translate(-29.83225vw, 100vh) scale(0.9);
      transform: translate(-29.83225vw, 100vh) scale(0.9);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(54) {
    -webkit-animation: fall-54 5s 0s ease-out 1;
    animation: fall-54 5s 0s ease-out 1;
    opacity: 1
  }
  
  @-webkit-keyframes fall-54 {
    32.949% {
      -webkit-transform: translate(0, 0) scale(0.5);
      transform: translate(0, 0) scale(0.5);
      opacity: 5
    }
  
    to {
      -webkit-transform: translate(-36.28435vw, 100vh) scale(0.5);
      transform: translate(-36.28435vw, 100vh) scale(0.5);
      opacity: 0
    }
  }
  
  @keyframes fall-54 {
    32.949% {
      -webkit-transform: translate(0, 0) scale(0.5);
      transform: translate(0, 0) scale(0.5);
      opacity: 5
    }
  
    to {
      -webkit-transform: translate(-36.28435vw, 100vh) scale(0.5);
      transform: translate(-36.28435vw, 100vh) scale(0.5);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(55) {
    -webkit-animation: fall-55 4s 0s ease-out 1;
    animation: fall-55 4s 0s ease-out 1;
    opacity: 5
  }
  
  @-webkit-keyframes fall-55 {
    89.613% {
      -webkit-transform: translate(0, 0) scale(0.7);
      transform: translate(0, 0) scale(0.7);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-90.6713vw, 100vh) scale(0.7);
      transform: translate(-90.6713vw, 100vh) scale(0.7);
      opacity: 0
    }
  }
  
  @keyframes fall-55 {
    89.613% {
      -webkit-transform: translate(0, 0) scale(0.7);
      transform: translate(0, 0) scale(0.7);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-90.6713vw, 100vh) scale(0.7);
      transform: translate(-90.6713vw, 100vh) scale(0.7);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(56) {
    -webkit-animation: fall-56 5s 0s ease-out 1;
    animation: fall-56 5s 0s ease-out 1;
    opacity: 2.5
  }
  
  @-webkit-keyframes fall-56 {
    22.463% {
      -webkit-transform: translate(0, 0) scale(0.7);
      transform: translate(0, 0) scale(0.7);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-53.0044vw, 100vh) scale(0.7);
      transform: translate(-53.0044vw, 100vh) scale(0.7);
      opacity: 0
    }
  }
  
  @keyframes fall-56 {
    22.463% {
      -webkit-transform: translate(0, 0) scale(0.7);
      transform: translate(0, 0) scale(0.7);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-53.0044vw, 100vh) scale(0.7);
      transform: translate(-53.0044vw, 100vh) scale(0.7);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(57) {
    -webkit-animation: fall-57 4s 0s ease-out 1;
    animation: fall-57 4s 0s ease-out 1;
    opacity: 3
  }
  
  @-webkit-keyframes fall-57 {
    72.167% {
      -webkit-transform: translate(0, 0) scale(1.7);
      transform: translate(0, 0) scale(1.7);
      opacity: 1
    }
  
    to {
      -webkit-transform: translate(-23.45515vw, 100vh) scale(1.7);
      transform: translate(-23.45515vw, 100vh) scale(1.7);
      opacity: 0
    }
  }
  
  @keyframes fall-57 {
    72.167% {
      -webkit-transform: translate(0, 0) scale(1.7);
      transform: translate(0, 0) scale(1.7);
      opacity: 1
    }
  
    to {
      -webkit-transform: translate(-23.45515vw, 100vh) scale(1.7);
      transform: translate(-23.45515vw, 100vh) scale(1.7);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(58) {
    -webkit-animation: fall-58 5s 0s ease-out 1;
    animation: fall-58 5s 0s ease-out 1;
    opacity: 0.5
  }
  
  @-webkit-keyframes fall-58 {
    44.021% {
      -webkit-transform: translate(0, 0) scale(0.5);
      transform: translate(0, 0) scale(0.5);
      opacity: 1
    }
  
    to {
      -webkit-transform: translate(-59.45315vw, 100vh) scale(0.5);
      transform: translate(-59.45315vw, 100vh) scale(0.5);
      opacity: 0
    }
  }
  
  @keyframes fall-58 {
    44.021% {
      -webkit-transform: translate(0, 0) scale(0.5);
      transform: translate(0, 0) scale(0.5);
      opacity: 1
    }
  
    to {
      -webkit-transform: translate(-59.45315vw, 100vh) scale(0.5);
      transform: translate(-59.45315vw, 100vh) scale(0.5);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(59) {
    -webkit-animation: fall-59 4s 0s ease-out 1;
    animation: fall-59 4s 0s ease-out 1;
    opacity: 1
  }
  
  @-webkit-keyframes fall-59 {
    25.843% {
      -webkit-transform: translate(0, 0) scale(1.2);
      transform: translate(0, 0) scale(1.2);
      opacity: 2
    }
  
    to {
      -webkit-transform: translate(-98.7738vw, 100vh) scale(1.2);
      transform: translate(-98.7738vw, 100vh) scale(1.2);
      opacity: 0
    }
  }
  
  @keyframes fall-59 {
    25.843% {
      -webkit-transform: translate(0, 0) scale(1.2);
      transform: translate(0, 0) scale(1.2);
      opacity: 2
    }
  
    to {
      -webkit-transform: translate(-98.7738vw, 100vh) scale(1.2);
      transform: translate(-98.7738vw, 100vh) scale(1.2);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(60) {
    -webkit-animation: fall-60 5s 0s ease-out 1;
    animation: fall-60 5s 0s ease-out 1;
    opacity: 2.5
  }
  
  @-webkit-keyframes fall-60 {
    21.707% {
      -webkit-transform: translate(0, 0) scale(2);
      transform: translate(0, 0) scale(2);
      opacity: 3.5
    }
  
    to {
      -webkit-transform: translate(-34.64165vw, 100vh) scale(2);
      transform: translate(-34.64165vw, 100vh) scale(2);
      opacity: 0
    }
  }
  
  @keyframes fall-60 {
    21.707% {
      -webkit-transform: translate(0, 0) scale(2);
      transform: translate(0, 0) scale(2);
      opacity: 3.5
    }
  
    to {
      -webkit-transform: translate(-34.64165vw, 100vh) scale(2);
      transform: translate(-34.64165vw, 100vh) scale(2);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(61) {
    -webkit-animation: fall-61 5s 0s ease-out 1;
    animation: fall-61 5s 0s ease-out 1;
    opacity: 4.5
  }
  
  @-webkit-keyframes fall-61 {
    85.211% {
      -webkit-transform: translate(0, 0) scale(1.5);
      transform: translate(0, 0) scale(1.5);
      opacity: 1
    }
  
    to {
      -webkit-transform: translate(-71.4558vw, 100vh) scale(1.5);
      transform: translate(-71.4558vw, 100vh) scale(1.5);
      opacity: 0
    }
  }
  
  @keyframes fall-61 {
    85.211% {
      -webkit-transform: translate(0, 0) scale(1.5);
      transform: translate(0, 0) scale(1.5);
      opacity: 1
    }
  
    to {
      -webkit-transform: translate(-71.4558vw, 100vh) scale(1.5);
      transform: translate(-71.4558vw, 100vh) scale(1.5);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(62) {
    -webkit-animation: fall-62 5s 0s ease-out 1;
    animation: fall-62 5s 0s ease-out 1;
    opacity: 2
  }
  
  @-webkit-keyframes fall-62 {
    82.159% {
      -webkit-transform: translate(0, 0) scale(0.1);
      transform: translate(0, 0) scale(0.1);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-74.78865vw, 100vh) scale(0.1);
      transform: translate(-74.78865vw, 100vh) scale(0.1);
      opacity: 0
    }
  }
  
  @keyframes fall-62 {
    82.159% {
      -webkit-transform: translate(0, 0) scale(0.1);
      transform: translate(0, 0) scale(0.1);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-74.78865vw, 100vh) scale(0.1);
      transform: translate(-74.78865vw, 100vh) scale(0.1);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(63) {
    -webkit-animation: fall-63 5s 0s ease-out 1;
    animation: fall-63 5s 0s ease-out 1;
    opacity: 3.5
  }
  
  @-webkit-keyframes fall-63 {
    63.78% {
      -webkit-transform: translate(0, 0) scale(0.9);
      transform: translate(0, 0) scale(0.9);
      opacity: 3
    }
  
    to {
      -webkit-transform: translate(-62.91005vw, 100vh) scale(0.9);
      transform: translate(-62.91005vw, 100vh) scale(0.9);
      opacity: 0
    }
  }
  
  @keyframes fall-63 {
    63.78% {
      -webkit-transform: translate(0, 0) scale(0.9);
      transform: translate(0, 0) scale(0.9);
      opacity: 3
    }
  
    to {
      -webkit-transform: translate(-62.91005vw, 100vh) scale(0.9);
      transform: translate(-62.91005vw, 100vh) scale(0.9);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(64) {
    -webkit-animation: fall-64 5s 0s ease-out 1;
    animation: fall-64 5s 0s ease-out 1;
    opacity: 4.5
  }
  
  @-webkit-keyframes fall-64 {
    55.526% {
      -webkit-transform: translate(0, 0) scale(0.2);
      transform: translate(0, 0) scale(0.2);
      opacity: 3
    }
  
    to {
      -webkit-transform: translate(-68.19105vw, 100vh) scale(0.2);
      transform: translate(-68.19105vw, 100vh) scale(0.2);
      opacity: 0
    }
  }
  
  @keyframes fall-64 {
    55.526% {
      -webkit-transform: translate(0, 0) scale(0.2);
      transform: translate(0, 0) scale(0.2);
      opacity: 3
    }
  
    to {
      -webkit-transform: translate(-68.19105vw, 100vh) scale(0.2);
      transform: translate(-68.19105vw, 100vh) scale(0.2);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(65) {
    -webkit-animation: fall-65 4s 0s ease-out 1;
    animation: fall-65 4s 0s ease-out 1;
    opacity: 3.5
  }
  
  @-webkit-keyframes fall-65 {
    48.836% {
      -webkit-transform: translate(0, 0) scale(2);
      transform: translate(0, 0) scale(2);
      opacity: 1.5
    }
  
    to {
      -webkit-transform: translate(-93.05515vw, 100vh) scale(2);
      transform: translate(-93.05515vw, 100vh) scale(2);
      opacity: 0
    }
  }
  
  @keyframes fall-65 {
    48.836% {
      -webkit-transform: translate(0, 0) scale(2);
      transform: translate(0, 0) scale(2);
      opacity: 1.5
    }
  
    to {
      -webkit-transform: translate(-93.05515vw, 100vh) scale(2);
      transform: translate(-93.05515vw, 100vh) scale(2);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(66) {
    -webkit-animation: fall-66 4s 0s ease-out 1;
    animation: fall-66 4s 0s ease-out 1;
    opacity: 5
  }
  
  @-webkit-keyframes fall-66 {
    56.815% {
      -webkit-transform: translate(0, 0) scale(0.5);
      transform: translate(0, 0) scale(0.5);
      opacity: 4
    }
  
    to {
      -webkit-transform: translate(-94.59995vw, 100vh) scale(0.5);
      transform: translate(-94.59995vw, 100vh) scale(0.5);
      opacity: 0
    }
  }
  
  @keyframes fall-66 {
    56.815% {
      -webkit-transform: translate(0, 0) scale(0.5);
      transform: translate(0, 0) scale(0.5);
      opacity: 4
    }
  
    to {
      -webkit-transform: translate(-94.59995vw, 100vh) scale(0.5);
      transform: translate(-94.59995vw, 100vh) scale(0.5);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(67) {
    -webkit-animation: fall-67 5s 0s ease-out 1;
    animation: fall-67 5s 0s ease-out 1;
    opacity: 1
  }
  
  @-webkit-keyframes fall-67 {
    98.803% {
      -webkit-transform: translate(0, 0) scale(0.6);
      transform: translate(0, 0) scale(0.6);
      opacity: 3.5
    }
  
    to {
      -webkit-transform: translate(-56.6826vw, 100vh) scale(0.6);
      transform: translate(-56.6826vw, 100vh) scale(0.6);
      opacity: 0
    }
  }
  
  @keyframes fall-67 {
    98.803% {
      -webkit-transform: translate(0, 0) scale(0.6);
      transform: translate(0, 0) scale(0.6);
      opacity: 3.5
    }
  
    to {
      -webkit-transform: translate(-56.6826vw, 100vh) scale(0.6);
      transform: translate(-56.6826vw, 100vh) scale(0.6);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(68) {
    -webkit-animation: fall-68 4s 0s ease-out 1;
    animation: fall-68 4s 0s ease-out 1;
    opacity: 5
  }
  
  @-webkit-keyframes fall-68 {
    27.624% {
      -webkit-transform: translate(0, 0) scale(1.7);
      transform: translate(0, 0) scale(1.7);
      opacity: 4
    }
  
    to {
      -webkit-transform: translate(-50.78215vw, 100vh) scale(1.7);
      transform: translate(-50.78215vw, 100vh) scale(1.7);
      opacity: 0
    }
  }
  
  @keyframes fall-68 {
    27.624% {
      -webkit-transform: translate(0, 0) scale(1.7);
      transform: translate(0, 0) scale(1.7);
      opacity: 4
    }
  
    to {
      -webkit-transform: translate(-50.78215vw, 100vh) scale(1.7);
      transform: translate(-50.78215vw, 100vh) scale(1.7);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(69) {
    -webkit-animation: fall-69 5s 0s ease-out 1;
    animation: fall-69 5s 0s ease-out 1;
    opacity: 2.5
  }
  
  @-webkit-keyframes fall-69 {
    94.643% {
      -webkit-transform: translate(0, 0) scale(0.5);
      transform: translate(0, 0) scale(0.5);
      opacity: 5
    }
  
    to {
      -webkit-transform: translate(-42.219vw, 100vh) scale(0.5);
      transform: translate(-42.219vw, 100vh) scale(0.5);
      opacity: 0
    }
  }
  
  @keyframes fall-69 {
    94.643% {
      -webkit-transform: translate(0, 0) scale(0.5);
      transform: translate(0, 0) scale(0.5);
      opacity: 5
    }
  
    to {
      -webkit-transform: translate(-42.219vw, 100vh) scale(0.5);
      transform: translate(-42.219vw, 100vh) scale(0.5);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(70) {
    -webkit-animation: fall-70 4s 0s ease-out 1;
    animation: fall-70 4s 0s ease-out 1;
    opacity: 3.5
  }
  
  @-webkit-keyframes fall-70 {
    31.669% {
      -webkit-transform: translate(0, 0) scale(1.1);
      transform: translate(0, 0) scale(1.1);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-14.90255vw, 100vh) scale(1.1);
      transform: translate(-14.90255vw, 100vh) scale(1.1);
      opacity: 0
    }
  }
  
  @keyframes fall-70 {
    31.669% {
      -webkit-transform: translate(0, 0) scale(1.1);
      transform: translate(0, 0) scale(1.1);
      opacity: 0.5
    }
  
    to {
      -webkit-transform: translate(-14.90255vw, 100vh) scale(1.1);
      transform: translate(-14.90255vw, 100vh) scale(1.1);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(71) {
    -webkit-animation: fall-71 4s 0s ease-out 1;
    animation: fall-71 4s 0s ease-out 1;
    opacity: 4.5
  }
  
  @-webkit-keyframes fall-71 {
    87.248% {
      -webkit-transform: translate(0, 0) scale(1.7);
      transform: translate(0, 0) scale(1.7);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-47.9667vw, 100vh) scale(1.7);
      transform: translate(-47.9667vw, 100vh) scale(1.7);
      opacity: 0
    }
  }
  
  @keyframes fall-71 {
    87.248% {
      -webkit-transform: translate(0, 0) scale(1.7);
      transform: translate(0, 0) scale(1.7);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-47.9667vw, 100vh) scale(1.7);
      transform: translate(-47.9667vw, 100vh) scale(1.7);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(72) {
    -webkit-animation: fall-72 4s 0s ease-out 1;
    animation: fall-72 4s 0s ease-out 1;
    opacity: 4.5
  }
  
  @-webkit-keyframes fall-72 {
    35.782% {
      -webkit-transform: translate(0, 0) scale(0.1);
      transform: translate(0, 0) scale(0.1);
      opacity: 5
    }
  
    to {
      -webkit-transform: translate(-36.62705vw, 100vh) scale(0.1);
      transform: translate(-36.62705vw, 100vh) scale(0.1);
      opacity: 0
    }
  }
  
  @keyframes fall-72 {
    35.782% {
      -webkit-transform: translate(0, 0) scale(0.1);
      transform: translate(0, 0) scale(0.1);
      opacity: 5
    }
  
    to {
      -webkit-transform: translate(-36.62705vw, 100vh) scale(0.1);
      transform: translate(-36.62705vw, 100vh) scale(0.1);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(73) {
    -webkit-animation: fall-73 4s 0s ease-out 1;
    animation: fall-73 4s 0s ease-out 1;
    opacity: 1
  }
  
  @-webkit-keyframes fall-73 {
    71.868% {
      -webkit-transform: translate(0, 0) scale(1.1);
      transform: translate(0, 0) scale(1.1);
      opacity: 1.5
    }
  
    to {
      -webkit-transform: translate(2.88235vw, 100vh) scale(1.1);
      transform: translate(2.88235vw, 100vh) scale(1.1);
      opacity: 0
    }
  }
  
  @keyframes fall-73 {
    71.868% {
      -webkit-transform: translate(0, 0) scale(1.1);
      transform: translate(0, 0) scale(1.1);
      opacity: 1.5
    }
  
    to {
      -webkit-transform: translate(2.88235vw, 100vh) scale(1.1);
      transform: translate(2.88235vw, 100vh) scale(1.1);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(74) {
    -webkit-animation: fall-74 4s 0s ease-out 1;
    animation: fall-74 4s 0s ease-out 1;
    opacity: 4.5
  }
  
  @-webkit-keyframes fall-74 {
    65.044% {
      -webkit-transform: translate(0, 0) scale(1.7);
      transform: translate(0, 0) scale(1.7);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-71.5977vw, 100vh) scale(1.7);
      transform: translate(-71.5977vw, 100vh) scale(1.7);
      opacity: 0
    }
  }
  
  @keyframes fall-74 {
    65.044% {
      -webkit-transform: translate(0, 0) scale(1.7);
      transform: translate(0, 0) scale(1.7);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-71.5977vw, 100vh) scale(1.7);
      transform: translate(-71.5977vw, 100vh) scale(1.7);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(75) {
    -webkit-animation: fall-75 4s 0s ease-out 1;
    animation: fall-75 4s 0s ease-out 1;
    opacity: 3
  }
  
  @-webkit-keyframes fall-75 {
    90.429% {
      -webkit-transform: translate(0, 0) scale(0.3);
      transform: translate(0, 0) scale(0.3);
      opacity: 1.5
    }
  
    to {
      -webkit-transform: translate(-60.1843vw, 100vh) scale(0.3);
      transform: translate(-60.1843vw, 100vh) scale(0.3);
      opacity: 0
    }
  }
  
  @keyframes fall-75 {
    90.429% {
      -webkit-transform: translate(0, 0) scale(0.3);
      transform: translate(0, 0) scale(0.3);
      opacity: 1.5
    }
  
    to {
      -webkit-transform: translate(-60.1843vw, 100vh) scale(0.3);
      transform: translate(-60.1843vw, 100vh) scale(0.3);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(76) {
    -webkit-animation: fall-76 4s 0s ease-out 1;
    animation: fall-76 4s 0s ease-out 1;
    opacity: 3
  }
  
  @-webkit-keyframes fall-76 {
    34.568% {
      -webkit-transform: translate(0, 0) scale(1);
      transform: translate(0, 0) scale(1);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-78.761vw, 100vh) scale(1);
      transform: translate(-78.761vw, 100vh) scale(1);
      opacity: 0
    }
  }
  
  @keyframes fall-76 {
    34.568% {
      -webkit-transform: translate(0, 0) scale(1);
      transform: translate(0, 0) scale(1);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-78.761vw, 100vh) scale(1);
      transform: translate(-78.761vw, 100vh) scale(1);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(77) {
    -webkit-animation: fall-77 4s 0s ease-out 1;
    animation: fall-77 4s 0s ease-out 1;
    opacity: 3
  }
  
  @-webkit-keyframes fall-77 {
    78.682% {
      -webkit-transform: translate(0, 0) scale(1);
      transform: translate(0, 0) scale(1);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-51.95415vw, 100vh) scale(1);
      transform: translate(-51.95415vw, 100vh) scale(1);
      opacity: 0
    }
  }
  
  @keyframes fall-77 {
    78.682% {
      -webkit-transform: translate(0, 0) scale(1);
      transform: translate(0, 0) scale(1);
      opacity: 4.5
    }
  
    to {
      -webkit-transform: translate(-51.95415vw, 100vh) scale(1);
      transform: translate(-51.95415vw, 100vh) scale(1);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(78) {
    -webkit-animation: fall-78 5s 0s ease-out 1;
    animation: fall-78 5s 0s ease-out 1;
    opacity: 0.5
  }
  
  @-webkit-keyframes fall-78 {
    61.086% {
      -webkit-transform: translate(0, 0) scale(0.7);
      transform: translate(0, 0) scale(0.7);
      opacity: 2.5
    }
  
    to {
      -webkit-transform: translate(-31.0714vw, 100vh) scale(0.7);
      transform: translate(-31.0714vw, 100vh) scale(0.7);
      opacity: 0
    }
  }
  
  @keyframes fall-78 {
    61.086% {
      -webkit-transform: translate(0, 0) scale(0.7);
      transform: translate(0, 0) scale(0.7);
      opacity: 2.5
    }
  
    to {
      -webkit-transform: translate(-31.0714vw, 100vh) scale(0.7);
      transform: translate(-31.0714vw, 100vh) scale(0.7);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(79) {
    -webkit-animation: fall-79 5s 0s ease-out 1;
    animation: fall-79 5s 0s ease-out 1;
    opacity: 2.5
  }
  
  @-webkit-keyframes fall-79 {
    74.885% {
      -webkit-transform: translate(0, 0) scale(1.9);
      transform: translate(0, 0) scale(1.9);
      opacity: 3
    }
  
    to {
      -webkit-transform: translate(-95.1281vw, 100vh) scale(1.9);
      transform: translate(-95.1281vw, 100vh) scale(1.9);
      opacity: 0
    }
  }
  
  @keyframes fall-79 {
    74.885% {
      -webkit-transform: translate(0, 0) scale(1.9);
      transform: translate(0, 0) scale(1.9);
      opacity: 3
    }
  
    to {
      -webkit-transform: translate(-95.1281vw, 100vh) scale(1.9);
      transform: translate(-95.1281vw, 100vh) scale(1.9);
      opacity: 0
    }
  }
  
  .effect-color.runner-ball .color-circle:nth-child(80) {
    -webkit-animation: fall-80 4s 0s ease-out 1;
    animation: fall-80 4s 0s ease-out 1;
    opacity: 2.5
  }
  
  @-webkit-keyframes fall-80 {
    38.887% {
      -webkit-transform: translate(0, 0) scale(1.4);
      transform: translate(0, 0) scale(1.4);
      opacity: 3.5
    }
  
    to {
      -webkit-transform: translate(-32.47825vw, 100vh) scale(1.4);
      transform: translate(-32.47825vw, 100vh) scale(1.4);
      opacity: 0
    }
  }
  
  @keyframes fall-80 {
    38.887% {
      -webkit-transform: translate(0, 0) scale(1.4);
      transform: translate(0, 0) scale(1.4);
      opacity: 3.5
    }
  
    to {
      -webkit-transform: translate(-32.47825vw, 100vh) scale(1.4);
      transform: translate(-32.47825vw, 100vh) scale(1.4);
      opacity: 0
    }
  }
  
  .ball--color {
    position: absolute;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background-color: var(--skin-color);
    z-index: 9999
  }
  
  * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
  }
  
  body#error {
    overflow: hidden;
    background-color: var(--bg-black-900)
  }
  
  body#error .container {
    position: relative;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 40px;
    text-align: center
  }
  
  body#error .container .contain-logo {
    margin-top: 1.25rem;
    padding-inline: 15px;
    width: 100%;
    -webkit-box-shadow: 0px 5px 5px rgba(255, 255, 255, 0.1);
    box-shadow: 0px 5px 5px rgba(255, 255, 255, 0.1)
  }
  
  body#error .container .contain-logo .logo-link {
    position: static;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    inset: unset;
    -webkit-transform: unset;
    transform: unset;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
  }
  
  body#error .container h1 {
    font-size: clamp(9rem, 15vw, 20rem);
    font-weight: 900;
    background: url(./../../../imgs/404.webp) no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: cover;
    background-position: center
  }
  
  body#error .container h2 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase
  }
  
  body#error .container p {
    color: rgb(219, 219, 219);
    font-size: 14px;
    font-weight: 400;
    margin-top: 0
  }
  
  body#error .container .btn {
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 600;
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0.3125rem 0.9375rem;
    border: none;
    background: var(--skin-color);
    -webkit-transition: 400ms ease-in-out all;
    transition: 400ms ease-in-out all
  }
  
  body#error .container .btn:after,
  body#error .container .btn:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 1px;
    width: 0;
    background: var(--skin-color);
    -webkit-box-shadow: -1px -1px 4px 0px #fff, 7px 2px 20px 0px rgba(0, 0, 0, 0.2), 4px 1px 10px 0px rgba(0, 0, 0, 0.1333333333);
    box-shadow: -1px -1px 4px 0px #fff, 7px 2px 20px 0px rgba(0, 0, 0, 0.2), 4px 1px 10px 0px rgba(0, 0, 0, 0.1333333333);
    -webkit-transition: 400ms ease-in-out all;
    transition: 400ms ease-in-out all
  }
  
  body#error .container .btn:after {
    right: inherit;
    top: inherit;
    left: 0;
    bottom: 0;
    -webkit-box-shadow: 1px 1px 4px 0px #fff, 7px 2px 20px 0px rgba(0, 0, 0, 0.2), 4px 1px 10px 0px rgba(0, 0, 0, 0.1333333333);
    box-shadow: 1px 1px 4px 0px #fff, 7px 2px 20px 0px rgba(0, 0, 0, 0.2), 4px 1px 10px 0px rgba(0, 0, 0, 0.1333333333)
  }
  
  body#error .container .btn:hover {
    color: var(--skin-color);
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none
  }
  
  body#error .container .btn:hover:after,
  body#error .container .btn:hover:before {
    width: 100%;
    -webkit-transition: 800ms ease-in-out all;
    transition: 800ms ease-in-out all
  }