/* .tab-container {
    background-image: linear-gradient(to bottom, indigo, blue, dodgerblue);
      border-radius: .5rem .5rem 0 0;
  }
   */
  /* ==============
      THE TABS
  ============== */
  ul.tabs {
      list-style: none;
      font-size: 2.75vmin;
      line-height: 1.6;
      display: flex;
  }
  ul.tabs li {
      /* width: 25%; */
      color: #FFDB00;
      text-align: center;
      padding: .4rem 20px;
      border: 2px solid #FFDB00;
      cursor: pointer;
      margin: 0px 10px;
      border-radius: 26px;
      display: inline-block;
      font-size: 14px;
      font-weight: 500;
  }
  .feature-tabs ul.tabs li{

    color: #000;
    text-align: center;
    padding: .2rem 20px;
    border: 2px solid #000;
    cursor: pointer;
    margin: 0px 10px;
    border-radius: 26px;
    font-size: 16px;
    font-weight: 500;
  }
  .feature-tabs .tab-link.active{

    border: none;
    font-weight: 600;
  }

  @media(max-width:992px){
    ul.tabs li{

        padding: 0.4rem 20px;
        border: 2px solid #FFDB00;
        cursor: pointer;
        margin: 0px 10px;
        border-radius: 26px;
        font-size: 12px;
    }

  }
  ul.tabs li:hover{

    background-color: #FFDB00;
    color: #000;
  }
  /* ul.tabs li:first-child {
      border-radius: .5rem 0 0;
  }
   ul.tabs li:last-child {
      border-radius: 0 .5rem 0 0;
  } */
  ul.tabs, .tab-link {
      transition: all 0.5s ease-in-out;
  }
  /* .tab-link:hover {
      color: #fff;
  } */
  .tab-link.active{

    background-color: #FFDB00;
    color: #000;
  }
  
  /* ==== CONTENT ==== */
  .tab-content{
      display: none;
      /* padding: 1vmin 5vmin 5vmin 5vmin; */
      transition-property: transform, opacity;
      transition-duration: 0.4s;
      transition-timing-function: ease-out;
  }
  .tab-content.current{
      display: inherit;
      /* background: ivory; */
      animation: fade 0.3s ease-in-out both;
  }
  @keyframes fade {
      0% {opacity: 0; transform: translateY(2rem);}
      100% {opacity: 1; transform: translateY(0);}
  }
  
  .tab-content > * {
      margin: 1rem 0;
  }
  .tab-content img {
      max-width: 100%;
      border-radius: .5rem;
  }
  .icons-technology p{

    color: #fff;
    font-weight: 700;
    font-size: 14px;
  }
  .icons-technology img{

    width: auto!important;
    width: 35px;
    height: 35px;
  }
  .services-card .card-body img{
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
  }
  @-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

/* animattion */
.confetti {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  position: absolute;
  top: -6rem;
  left: -10rem;
  z-index: 0;
}
.confetti .rotate {
  animation: driftyRotate 1s infinite both ease-in-out;
  perspective: 1000;
}
.confetti .askew {
  background: linear-gradient(
  var(--grad-direction, to bottom),
  hsl(63, 100%, 50%) 25%,
  hsl(23, 100%, 50%) 0% 66.667%,
  hsl(43, 100%, 100%) 0% 100%);
  transform: skewY(10deg);
  width: 2rem;
  height: 3.2rem;
  animation: drifty 1s infinite alternate both ease-in-out;
  perspective:1000;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}


.confetti:nth-of-type(7n) .askew {
  animation-delay: -.6s;
  animation-duration: 2.25s;
}
.confetti:nth-of-type(7n + 1) .askew {
  animation-delay: -.879s;
  animation-duration: 3.5s;
}
.confetti:nth-of-type(7n + 2) .askew {
  animation-delay: -.11s;
  animation-duration: 1.95s;
}
.confetti:nth-of-type(7n + 3) .askew {
  animation-delay: -.246s;
  animation-duration: .85s;
}
.confetti:nth-of-type(7n + 4) .askew {
  animation-delay: -.43s;
  animation-duration: 2.5s;
}
.confetti:nth-of-type(7n + 5) .askew {
  animation-delay: -.56s;
  animation-duration: 1.75s;
}
.confetti:nth-of-type(7n + 6) .askew {
  animation-delay: -.76s;
  animation-duration: 1.5s;
}
  
.confetti:nth-of-type(9n) .rotate {
  animation-duration: 2s;
}
.confetti:nth-of-type(9n + 1) .rotate {
  animation-duration: 2.3s;
}
.confetti:nth-of-type(9n + 2) .rotate {
  animation-duration: 1.1s;
}
.confetti:nth-of-type(9n + 3) .rotate {
  animation-duration: .75s;
}
.confetti:nth-of-type(9n + 4) .rotate {
  animation-duration: 4.3s;
}
.confetti:nth-of-type(9n + 5) .rotate {
  animation-duration: 3.05s;
}
.confetti:nth-of-type(9n + 6) .rotate {
  animation-duration: 2.76s;
}
.confetti:nth-of-type(9n + 7) .rotate {
  animation-duration: 7.6s;
}
.confetti:nth-of-type(9n + 8) .rotate {
  animation-duration: 1.78s;
}

@keyframes drifty {
  0% {
    transform: skewY(10deg) translate3d(-250%, 0, 0);
  }
  100% {
    transform: skewY(-12deg) translate3d(250%, 0, 0);
  }
}
@keyframes driftyRotate {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(359deg);
  }
}


select {
  position: absolute;
  left: 1rem;
  top: 1rem;
  font-size: 1rem;
  z-index: 100;
}


[data-type=leaves] .confetti:nth-child(4n) {
  color: hsl(343, 80%, 30%);
}
[data-type=leaves] .confetti:nth-child(4n + 1) {
  color: hsl(103, 80%, 30%);
}
[data-type=leaves] .confetti:nth-child(4n + 2) {
  color: hsl(43, 80%, 40%);
}
[data-type=leaves] .confetti:nth-child(4n + 3) {
  color: hsl(23, 70%, 40%);
}

[data-type=bookmarks] .confetti:nth-child(4n) {
  color: hsl(18, 100%, 50%);
}
[data-type=bookmarks] .confetti:nth-child(4n + 1) {
  color: hsl(183, 100%, 50%);
}
[data-type=bookmarks] .confetti:nth-child(4n + 2) {
  color: hsl(43, 100%, 50%);
}
[data-type=bookmarks] .confetti:nth-child(4n + 3) {
  color: hsl(133, 100%, 90%);
}


[data-type=leaves] .confetti .askew {
  background: currentColor linear-gradient(to right, rgba(0,0,0,0) 48%, rgba(0,0,0,.12) 0% 52%, rgba(0,0,0,0) 92%);
  width: 2.5rem;
  height: 4.2rem;
  clip-path: polygon(50% 0%, 100% 20%, 80% 30%, 100% 45%, 74% 60%, 94% 80%, 82% 100%, 18% 100%, 6% 80%, 26% 60%, 0% 45%, 20% 30%, 0% 20%);
  clip-path: polygon(56% 0%, 56% 16%, 60% 20%, 85% 40%, 100% 60%, 85% 75%, 70% 90%, 50% 100%, 15% 75%, 0% 60%, 15% 40%, 40% 20%, 44% 16%, 44% 0%)
}

[data-type=snowflake] .confetti .askew {
  background: hsl(223, 40%, 96%);
  clip-path: polygon(evenodd,
  20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%, 22% 2%, 78% 2%, 98% 22%, 98% 78%, 78% 98%, 22% 98%, 2% 78%, 2% 22%, 30% 10%, 70% 10%, 90% 30%, 90% 70%, 70% 90%, 30% 90%, 10% 70%, 10% 30%, 32% 12%, 68% 12%, 88% 32%, 88% 68%, 68% 88%, 32% 88%, 12% 68%, 12% 32%, 40% 20%, 60% 20%, 80% 40%, 80% 60%, 60% 80%, 40% 80%, 20% 60%, 20% 40%
  );
}
[data-type=bookmarks] .confetti .askew {
  background: currentColor;
  width: 1rem;
  height: 2rem;
  clip-path: polygon(evenodd,
  0% 0%, 100% 0%, 100% 100%, 50% 90%, 0% 100%
  );
}


.banner_left-content h2 span {
  display: inline-block;
  opacity: 0;
  transform: translateY(-20px);
  transform-origin: top;
  animation: in 2s forwards;

}
.banner_left-content h2 span:nth-child(1) {
  animation-delay: 0.1s;
  letter-spacing: -7px;
}
.banner_left-content h2 span:nth-child(2) {
  animation-delay: 0.2s;
  letter-spacing: -7px;
}
.banner_left-content h2 span:nth-child(3) {
  animation-delay: 0.3s;
  letter-spacing: -7px;
}
.banner_left-content h2 span:nth-child(4) {
  animation-delay: 0.4s;
  letter-spacing: -7px;
}
.banner_left-content h2 span:nth-child(5) {
  animation-delay: 0.5s;
  letter-spacing: -7px;
}
.banner_left-content h2 span:nth-child(6) {
  animation-delay: 0.6s;
  letter-spacing: -7px;
}
.banner_left-content h2 span:nth-child(7) {
  animation-delay: 0.7s;
  letter-spacing: -7px;
}
.banner_left-content h2 span:nth-child(8) {
  animation-delay: 0.8s;
  letter-spacing: -7px;
}
.banner_left-content h2 span:nth-child(9) {
  animation-delay: 0.9s;
  letter-spacing: -7px;
}
.banner_left-content h2 span:nth-child(10) {
  animation-delay: 1s;
  letter-spacing: -7px;
}
.banner_left-content h2 span:nth-child(11) {
  animation-delay: 1.1s;
  letter-spacing: -7px;
}
.banner_left-content h2 span:nth-child(12) {
  animation-delay: 1.2s;
  letter-spacing: -7px;
}

@keyframes in {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}