:root{
  --bs-color:#3c3f64;
  --bs-bg:#fff;
  --bs-bg1:#eee; 
  --bs-bgtimeline:#f5af19;
  --color-end: red;
  font-family: 'Lato', sans-serif;
}
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navbar img{
  width: 80px !important;
  height: 80px !important;
  /* animation: btn 10s infinite; */
}
.white{
  background: black;
}

/* img effect */
.bg-img {
  background-image: url(../Image/background/3d-illustration-smiling-businessman-with-bag-pointing-finger-away_175690-161-removebg-preview.png);
  /* background : url();  */
  background-size : 100% 100%;
  height : 600px;
 
  }

  .bg-img:hover{
    background-image: url(../Image/background/businessman-with-laptop-sitting-on-the-floor-in-yoga-lotus-position-4559331-3784300-removebg-preview.png);
      /* background : url(); */
      background-size: 100% 100%;
  }





/* body color */
@keyframes background-color {
    0% {
        /* background: linear-gradient(to bottom,#DBFDDC, #F5ECE8); */
        /* background: linear-gradient(to bottom, #d33f34 50%, #a61322 50.1%); */
        background: linear-gradient(to bottom, #e8a, rgb(138, 149, 160), rgb(126, 105, 125));
    }

    25% {
        background: linear-gradient(135deg, #0ABDB6, #F6B997);
    }

    50% {
        background: linear-gradient(to bottom, #91ccac, #03CCAC);
    }

    100% {
        background: linear-gradient(-135deg, #fae37d, #881da8, #20668f);
    }

}
.main{
  /* background: linear-gradient(to bottom, 15deg, #d33f34 50%, #a61322 50.1%); */
    /* background: linear-gradient(to bottom, #421a31, #e95ed2); */
    background: linear-gradient(to bottom, #e8a, rgb(138, 149, 160), rgb(126, 105, 125));
    animation: background-color 20s infinite;
    min-height: 100vh;
}



.line {
    /* font: normal 10.6666666667px 'Titillium Web', sans-serif; */
    /* background: linear-gradient(54deg, #9164ff, #8bfff4); */
    /* color: #3c3f64; */
    color: var(--bs-color);
    overflow-x: hidden;
    padding-bottom: 50px;
}
.timeline ul li {
    list-style-type: none;
    position: relative;
    width: 6px;
    margin: 0 auto;
    padding-top: 140px;
    /* background: #fff; */
    background: var(--bs-bg);
}
.timeline ul li::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) rotate(45deg);
    z-index: 2;
    width: 20px;
    height: 20px;
    /* background: #eee; */
    background: var(--bs-bg1);
}
.timeline ul li div {
    position: relative;
    bottom: 0;
    width: 400px;
    padding: 20px;
    /* background: #fff; */
    background: var(--bs-bg);
    box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2);
    border-radius: 5px;
    display: flex;
    align-items: center;
}

.timeline ul li div .discovery:hover{
    scale: 1.2;
    transform: translate(-20px , 35px);
    background: linear-gradient(54deg, #9164ff, #8bfff4);
    transition-duration: 1s; 
}
.timeline ul li div:hover{
    /* animation: move 1s normal infinite; */
    scale: 0.9;
}

.timeline ul li div time {
    position: absolute;
    /* background: #f5af19; */
    background: var(--bs-bgtimeline);
    width: 80px;
    height: 30px;
    top: -15px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 2px;
}
.timeline ul li div div {
    /* height: 100px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.timeline ul li div div p {
    text-align: center;
}
.timeline ul li div .discovery {
    margin-right: 10px;
}
.timeline ul li:nth-of-type(odd) > div {
    left: 45px;
}
.timeline ul li:nth-of-type(even) > div {
    left: -439px;
}
.timeline ul li div {
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.timeline ul li:nth-of-type(odd) div {
    transform: translate3d(100px, -10px, 0) rotate(10deg);
}
.timeline ul li:nth-of-type(even) div {
    transform: translate3d(-100px, -10px, 0) rotate(10deg);
}
.timeline ul li.in-view div {
    transform: none;
    visibility: visible;
    opacity: 1;
}



@media screen and (max-width: 900px) {
    .timeline ul li div {
        width: 250px;
        flex-direction: column;
   }
    .timeline ul li div div {
        width: 80%;
        margin: 10px;
   }
    .timeline ul li:nth-of-type(even) > div {
        left: -289px;
   }
}
@media screen and (max-width: 600px) {
    /* body {
        background: #8bfff4;
   } */
    .timeline ul li {
        margin-left: 20px;
   }
    .timeline ul li div {
        width: calc(100vw - 91px);
   }
    .timeline ul li:nth-of-type(even) > div {
        left: 45px;
   }
}
@media screen and (max-width: 320px) {
    /* body {
        background: #8bfff4;
   } */
    .timeline ul li {
        margin-left: 20px;
   }
    .timeline ul li div {
        width: calc(90vw - 91px);
   }
    .timeline ul li:nth-of-type(even) > div {
        left: 45px;
   }
}




/* animation container */



#nav img{
  height: 100px;
  width: 30px;
}
/* nav */








/* card */


.hero-card {
    margin-top: 80px;
}

.hero-card .col-lg-4 {
    display: flex;
    justify-content: center;
}

.card {
    width: 280px;
    height: 280px;
    transform-style: preserve-3d;
    perspective: 500px;
    border: none;
    background-color: inherit;
}

.card .face {
    position: absolute;
    color: #fff;
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.06);
    transform-style: preserve-3d;
    transition: 0.5s;
    backface-visibility: hidden;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    /* border-right: 1px solid #999;
border-bottom: 1px solid #999; */
}

.card .face.front-face,
.card .face.back-face {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.card .face.front-face .profile {
    /* width: 150px;
    height: 150px; */
    /* border-radius: 50%; */
    object-fit: cover;
    width: 280px;
    height: 280px;
}


.card:hover .face.front-face {
    transform: rotateY(180deg);
    transition-duration: 2s;
}

.card .face.back-face {
    position: absolute;
    background: rgba(255, 255, 255, 0.06);
    transform: rotateY(180deg);
    padding: 20px 30px;
    text-align: center;
    user-select: none;
}
.hero-card .card:hover{
  transform: translateY(25px);
  /* transition-duration: 2s; */
}


.card:hover .face.back-face {
    transform: rotateY(360deg);
    scale: 1.1;
}

@media(max-width: 991.5px) {
    .col-lg-4 {
        margin-top: 40px;
        margin-bottom: 20px;
    }
}




  .contentskill {
  width : 100%;
  padding : 0 4%;
  padding-top : 250px;
  margin : 0 auto;
  display : flex;
  justify-content : center;
  align-items : center;
  }
  .cardsbar {
  width : 100%;
  max-width : 300px;
  min-width : 200px;
  height : 250px;
  margin-top : 20px;
  font-size : 16px;
  transition : all 0.3s ease;
  position : relative;
  display : flex;
  justify-content : center;
  align-items : center;
  flex-direction : column;
  cursor : pointer;
  transition : all 0.3s ease;



  color: #fff;
    /* width: 100%;
    height: 100%; */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.06);
    transform-style: preserve-3d;
    transition: 0.5s;
    backface-visibility: hidden;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
  }
  @media screen and (min-width: 425px) {
  .cardsbar {
  max-width : 340px;
  }
  }
  @media screen and (min-width: 768px) {
  .cardsbar {
  max-width : 300px;
  }
  }
  .icon {
  margin : 0 auto;
  width : 100%;
  height : 80px;
  max-width : 80px;
  background : linear-gradient(90deg, #fc5252 0%, #ea1e03 40%, rgb(0, 0, 0, 0.28) 60%);
  border-radius : 100%;
  display : flex;
  justify-content : center;
  align-items : center;
  color : white;
  transition : all 0.8s ease;
  background-position : 0;
  background-size : 200px;
  padding-top : 6px;
  }
  .cardsbar .text {
    width : 80%;
    margin : 0 auto;
    font-size : 13px;
    text-align : center;
    margin-top : 20px;
    color : white;
    font-weight : 200;
    letter-spacing : 2px;
    opacity : 0;
    max-height : 0;
    transition : all 0.3s ease;
    }
  .cardsbar .title {
  width : 100%;
  margin : 0;
  text-align : center;
  margin-top : 30px;
  color : white;
  font-weight : 600;
  text-transform : uppercase;
  letter-spacing : 4px;
  }
  .cardsbar:hover {
  /* height : 270px; */
  scale: 1.1;
  }
  .cardsbar:hover .title {
  color : #ea1e03;
  }
  .cardsbar:hover .info {
  height : 90%;
  }
  .card:hover .text {
  transition : all 0.3s ease;
  opacity : 1;
  max-height : 40px;
  }
  .cardsbar:hover .icon {
  background-position : -120px;
  transition : all 0.3s ease;
  }
  .cardsbar:hover .icon i {
  background : linear-gradient(90deg, #f46868, #ea1e03);
  opacity : 1;
  transition : all 0.3s ease;
  }
  .cardsbar:hover .text {
    transition : all 0.3s ease;
    opacity : 1;
    max-height : 40px;
    }

  #home .text-center,.colors{
    mix-blend-mode: difference;
    color: #fff;
    /* text-transform: uppercase; */
  }
  


  /* typing */










  .text_1 {
    animation: text1;
  }
  
  .text_2 {
    animation: text2;
  }
  .text_3 {
    animation: text3;
  }

  .text_1, .text_2, .text_3{
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    position: relative;
    /* color: red; */
    /* animation-duration: 20s; */
    animation-duration: 10s;
    animation-timing-function: steps(25, end);
    /* animation-timing-function: steps(20, end); */
    
    animation-iteration-count: infinite;
  }
  
  .text_1::after, .text_2::after, .text_3::after{
    content: "|";
    position: absolute;
    animation: caret infinite;
    animation-duration: 1s;
    /* animation-timing-function: steps(1, end); */
    animation-timing-function: steps(1, end);
  }
  @keyframes text3 {
    0%, 50%, 100% {
      width: 0;
    }
    85%, 99% {
      width: 10em;
    }
  }
  @keyframes text2 {
    0%, 50%, 100% {
      width: 0;
    }
    
    /* 60%, 90% {
      width: 10em;
    } */
    60%, 75% {
      width: 10em;
    }

  }
  
  @keyframes text1 {
    0%, 50%, 100% {
      width: 0;
    }
    /* 10%, 40% {
      width: 10em;
    } */
    10%, 20% {
      width: 10em;
    }

  }
  
  @keyframes caret {
    0%, 100% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }









  /* about button */
  .btn-three {
    color: #FFF;
    transition: all 0.5s;
    /* position: relative; */
  }
  .btn-three::before {
    content: '';
    position: absolute;
    /* top: 0;
    left: 0;
    width: 100%;
    height: 100%; */
    z-index: 1;
    /* background-color: rgba(207, 197, 197, 0.63); */
    border: 1px 0px solid;
    transition: all 0.3s;
  }

  .btn-three:hover{
    box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2);
    border: 1px solid white;
    animation: btn 1s normal;
    color: #267dd9;
  }
  @keyframes btn{
    10%{
      transform: rotateZ(-15deg);
      
  }
  20%{
      transform: rotateZ(15deg);
      transform: skew(180deg);
  }
  30%{
      transform: rotateZ(-10deg);
  }
  40%{
      transform: rotateZ(10deg);
  }
  }
  .skew{
    mix-blend-mode: difference;
    color: #fff;
    text-transform: uppercase;
    
  }
  .skew:hover{
    animation: skew2 1s normal;
    box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2);
    border: 1px solid white;
  }
  @keyframes skew2{
    10%{
      transform: rotateZ(-15deg);
      
  }
  20%{
      transform: rotateZ(15deg);
      transform: skew(180deg);
  }
  30%{
      transform: rotateZ(-10deg);
  }
    40%{
      transform: rotateZ(10deg);
      transform: skew(180deg);
    }
  }
  /* .btn-three:hover::after {
    opacity: 1;
    transform: scale(1,1);
  } */









  .animations {
    position: relative;
    /* padding: 60px 0; */
 }
  
  .animations {
    display: table;
    /* background: #fff; */
    /* padding: 200px 0; */
    padding: 120px 0;
    /* min-height: 100vh; */
    width: 100%;
    /* text-align: center; */
 }
  .ani {
    position: absolute;
 }
  
  .ani.ani-6 {
    height: 320px;
    width: 320px;
    right: 0;
    top: 0;
 }
  
  svg #followPath {
    fill: none;
    stroke: #3496d2;
    stroke-width: 8;
    stroke-dasharray: 2870px;
    stroke-dashoffset: 2870px;
    animation: drawPath 6s linear infinite;
    /* background: linear-gradient(to bottom, #000428, #004683);
    animation: background-color 20s; */
 }
  svg #dashedPath {
    fill: none;
    /* stroke: #fff; */
    stroke-width: 14;
    stroke-dasharray: 50px;
    /* background: linear-gradient(to bottom, #000428, #004683);
    animation: background-color 20s; */
 }
  svg #airplain {
    fill: #3496d2;
    /* background: linear-gradient(to bottom, #000428, #004683);
    animation: background-color 20s; */
    transform: translate(-10px, -45px);
 }
  
  @keyframes drawPath {
    0% {
      opacity: 1;
      stroke-dashoffset: 2870px;
   }
    53% {
      opacity: 1;
      stroke-dashoffset: 0;
   }
    78% {
      opacity: 0;
   }
    100% {
      opacity: 0;
      stroke-dashoffset: 0;
   }
 }
  @media (max-width: 1023px) {
    .ani.ani-6 {
      max-height: 30vw;
      max-width: 30vw;
      max-height: 140px;
      max-width: 140px;
   }
 }
 
  /* bubbble */
 
  .particle {
    position: absolute;
    border-radius: 50%;
    top: 0;
 }
  @keyframes particle-animation-1 {
    50% {
      transform: translate3d(27vw, 22vh, 2px);
   }
    100% {
      transform: translate3d(75vw, 44vh, 7px);
   }
 }
  .particle:nth-child(1) {
    animation: particle-animation-1 60s infinite;
    opacity: 0.82;
    height: 8px;
    width: 8px;
    animation-delay: -0.2s;
    transform: translate3d(7vw, 65vh, 4px);
    background: #d9b826;
 }
  @keyframes particle-animation-2 {
    50% {
      transform: translate3d(35vw, 6vh, 4px);
   }
    100% {
      transform: translate3d(62vw, 12vh, 2px);
   }
 }
  .particle:nth-child(2) {
    animation: particle-animation-2 60s infinite;
    opacity: 0.5;
    height: 9px;
    width: 9px;
    animation-delay: -0.4s;
    transform: translate3d(56vw, 59vh, 66px);
    background: #5cd926;
 }
  @keyframes particle-animation-3 {
    100% {
      transform: translate3d(77vw, 74vh, 42px);
   }
 }
  .particle:nth-child(3) {
    animation: particle-animation-3 60s infinite;
    opacity: 0.14;
    height: 10px;
    width: 10px;
    animation-delay: -0.6s;
    transform: translate3d(38vw, 29vh, 62px);
    background: #26d9c4;
 }
  @keyframes particle-animation-4 {
    100% {
      transform: translate3d(46vw, 90vh, 70px);
   }
 }
  .particle:nth-child(4) {
    animation: particle-animation-4 60s infinite;
    opacity: 0.79;
    height: 8px;
    width: 8px;
    animation-delay: -0.8s;
    transform: translate3d(10vw, 84vh, 32px);
    background: #d92665;
 }
  @keyframes particle-animation-5 {
    100% {
      transform: translate3d(47vw, 47vh, 23px);
   }
 }
  .particle:nth-child(5) {
    animation: particle-animation-5 60s infinite;
    opacity: 0.92;
    height: 7px;
    width: 7px;
    animation-delay: -1s;
    transform: translate3d(79vw, 24vh, 90px);
    background: #d3d926;
 }
  @keyframes particle-animation-6 {
    100% {
      transform: translate3d(9vw, 76vh, 3px);
   }
 }
  .particle:nth-child(6) {
    animation: particle-animation-6 60s infinite;
    opacity: 0.78;
    height: 7px;
    width: 7px;
    animation-delay: -1.2s;
    transform: translate3d(67vw, 39vh, 61px);
    background: #4dd926;
 }
  @keyframes particle-animation-7 {
    100% {
      transform: translate3d(2vw, 88vh, 16px);
   }
 }
  .particle:nth-child(7) {
    animation: particle-animation-7 60s infinite;
    opacity: 0.26;
    height: 6px;
    width: 6px;
    animation-delay: -1.4s;
    transform: translate3d(64vw, 67vh, 84px);
    background: #26d980;
 }
  @keyframes particle-animation-8 {
    100% {
      transform: translate3d(59vw, 57vh, 33px);
   }
 }
  .particle:nth-child(8) {
    animation: particle-animation-8 60s infinite;
    opacity: 0.75;
    height: 9px;
    width: 9px;
    animation-delay: -1.6s;
    transform: translate3d(65vw, 5vh, 12px);
    background: #8b26d9;
 }
  @keyframes particle-animation-9 {
    100% {
      transform: translate3d(66vw, 5vh, 92px);
   }
 }
  .particle:nth-child(9) {
    animation: particle-animation-9 60s infinite;
    opacity: 0.77;
    height: 10px;
    width: 10px;
    animation-delay: -1.8s;
    transform: translate3d(23vw, 63vh, 97px);
    background: #26d99a;
 }
  @keyframes particle-animation-10 {
    100% {
      transform: translate3d(47vw, 6vh, 29px);
   }
 }
  .particle:nth-child(10) {
    animation: particle-animation-10 60s infinite;
    opacity: 0.77;
    height: 10px;
    width: 10px;
    animation-delay: -2s;
    transform: translate3d(16vw, 26vh, 11px);
    background: #d92638;
 }
  @keyframes particle-animation-11 {
    100% {
      transform: translate3d(67vw, 89vh, 83px);
   }
 }
  .particle:nth-child(11) {
    animation: particle-animation-11 60s infinite;
    opacity: 0.46;
    height: 9px;
    width: 9px;
    animation-delay: -2.2s;
    transform: translate3d(83vw, 42vh, 19px);
    background: #7d26d9;
 }
  @keyframes particle-animation-12 {
    100% {
      transform: translate3d(67vw, 90vh, 11px);
   }
 }
  .particle:nth-child(12) {
    animation: particle-animation-12 60s infinite;
    opacity: 0.95;
    height: 7px;
    width: 7px;
    animation-delay: -2.4s;
    transform: translate3d(45vw, 45vh, 83px);
    background: #a026d9;
 }
  @keyframes particle-animation-13 {
    100% {
      transform: translate3d(3vw, 63vh, 51px);
   }
 }
  .particle:nth-child(13) {
    animation: particle-animation-13 60s infinite;
    opacity: 0.05;
    height: 10px;
    width: 10px;
    animation-delay: -2.6s;
    transform: translate3d(27vw, 67vh, 90px);
    background: #a326d9;
 }
  @keyframes particle-animation-14 {
    100% {
      transform: translate3d(23vw, 29vh, 72px);
   }
 }
  .particle:nth-child(14) {
    animation: particle-animation-14 60s infinite;
    opacity: 0.61;
    height: 7px;
    width: 7px;
    animation-delay: -2.8s;
    transform: translate3d(88vw, 52vh, 12px);
    background: #d97126;
 }
  @keyframes particle-animation-15 {
    100% {
      transform: translate3d(37vw, 46vh, 26px);
   }
 }
  .particle:nth-child(15) {
    animation: particle-animation-15 60s infinite;
    opacity: 0.87;
    height: 9px;
    width: 9px;
    animation-delay: -3s;
    transform: translate3d(26vw, 51vh, 1px);
    background: #cad926;
 }
  @keyframes particle-animation-16 {
    100% {
      transform: translate3d(82vw, 69vh, 84px);
   }
 }
  .particle:nth-child(16) {
    animation: particle-animation-16 60s infinite;
    opacity: 0.99;
    height: 6px;
    width: 6px;
    animation-delay: -3.2s;
    transform: translate3d(17vw, 42vh, 67px);
    background: #6e26d9;
 }
  @keyframes particle-animation-17 {
    100% {
      transform: translate3d(71vw, 13vh, 18px);
   }
 }
  .particle:nth-child(17) {
    animation: particle-animation-17 60s infinite;
    opacity: 1;
    height: 6px;
    width: 6px;
    animation-delay: -3.4s;
    transform: translate3d(54vw, 31vh, 24px);
    background: #bed926;
 }
  @keyframes particle-animation-18 {
    100% {
      transform: translate3d(46vw, 81vh, 55px);
   }
 }
  .particle:nth-child(18) {
    animation: particle-animation-18 60s infinite;
    opacity: 0.11;
    height: 9px;
    width: 9px;
    animation-delay: -3.6s;
    transform: translate3d(84vw, 67vh, 19px);
    background: #3526d9;
 }
  @keyframes particle-animation-19 {
    100% {
      transform: translate3d(19vw, 58vh, 29px);
   }
 }
  .particle:nth-child(19) {
    animation: particle-animation-19 60s infinite;
    opacity: 0.42;
    height: 10px;
    width: 10px;
    animation-delay: -3.8s;
    transform: translate3d(79vw, 53vh, 86px);
    background: #26d935;
 }
  @keyframes particle-animation-20 {
    100% {
      transform: translate3d(74vw, 86vh, 10px);
   }
 }
  .particle:nth-child(20) {
    animation: particle-animation-20 60s infinite;
    opacity: 0.68;
    height: 7px;
    width: 7px;
    animation-delay: -4s;
    transform: translate3d(47vw, 49vh, 62px);
    background: #d92665;
 }
  @keyframes particle-animation-21 {
    100% {
      transform: translate3d(3vw, 55vh, 56px);
   }
 }
  .particle:nth-child(21) {
    animation: particle-animation-21 60s infinite;
    opacity: 0.32;
    height: 6px;
    width: 6px;
    animation-delay: -4.2s;
    transform: translate3d(8vw, 85vh, 12px);
    background: #7d26d9;
 }
  @keyframes particle-animation-22 {
    100% {
      transform: translate3d(47vw, 47vh, 14px);
   }
 }
  .particle:nth-child(22) {
    animation: particle-animation-22 60s infinite;
    opacity: 0.29;
    height: 7px;
    width: 7px;
    animation-delay: -4.4s;
    transform: translate3d(57vw, 6vh, 37px);
    background: #26d9ca;
 }
  @keyframes particle-animation-23 {
    100% {
      transform: translate3d(78vw, 69vh, 36px);
   }
 }
  .particle:nth-child(23) {
    animation: particle-animation-23 60s infinite;
    opacity: 0.87;
    height: 9px;
    width: 9px;
    animation-delay: -4.6s;
    transform: translate3d(37vw, 16vh, 79px);
    background: #d92647;
 }
  @keyframes particle-animation-24 {
    100% {
      transform: translate3d(69vw, 40vh, 42px);
   }
 }
  .particle:nth-child(24) {
    animation: particle-animation-24 60s infinite;
    opacity: 0.18;
    height: 7px;
    width: 7px;
    animation-delay: -4.8s;
    transform: translate3d(63vw, 42vh, 85px);
    background: #26bbd9;
 }
  @keyframes particle-animation-25 {
    100% {
      transform: translate3d(56vw, 30vh, 24px);
   }
 }
  .particle:nth-child(25) {
    animation: particle-animation-25 60s infinite;
    opacity: 0.77;
    height: 6px;
    width: 6px;
    animation-delay: -5s;
    transform: translate3d(18vw, 80vh, 23px);
    background: #d95926;
 }
  @keyframes particle-animation-26 {
    100% {
      transform: translate3d(85vw, 11vh, 87px);
   }
 }
  .particle:nth-child(26) {
    animation: particle-animation-26 60s infinite;
    opacity: 0.09;
    height: 10px;
    width: 10px;
    animation-delay: -5.2s;
    transform: translate3d(11vw, 22vh, 62px);
    background: #7ad926;
 }
  @keyframes particle-animation-27 {
    100% {
      transform: translate3d(54vw, 49vh, 4px);
   }
 }
  .particle:nth-child(27) {
    animation: particle-animation-27 60s infinite;
    opacity: 0.22;
    height: 8px;
    width: 8px;
    animation-delay: -5.4s;
    transform: translate3d(40vw, 35vh, 15px);
    background: #d926c4;
 }
  @keyframes particle-animation-28 {
    100% {
      transform: translate3d(9vw, 8vh, 75px);
   }
 }
  .particle:nth-child(28) {
    animation: particle-animation-28 60s infinite;
    opacity: 0.03;
    height: 8px;
    width: 8px;
    animation-delay: -5.6s;
    transform: translate3d(62vw, 68vh, 24px);
    background: #2fd926;
 }
  @keyframes particle-animation-29 {
    100% {
      transform: translate3d(11vw, 76vh, 84px);
   }
 }
  .particle:nth-child(29) {
    animation: particle-animation-29 60s infinite;
    opacity: 0.09;
    height: 9px;
    width: 9px;
    animation-delay: -5.8s;
    transform: translate3d(34vw, 56vh, 34px);
    background: #267dd9;
 }
  @keyframes particle-animation-30 {
    100% {
      transform: translate3d(13vw, 15vh, 27px);
   }
   
 }
  .particle:nth-child(30) {
    animation: particle-animation-30 60s infinite;
    opacity: 0.81;
    height: 8px;
    width: 8px;
    animation-delay: -6s;
    transform: translate3d(2vw, 74vh, 58px);
    background: #d9267a;
 }
  
 .resume,.icons{

  display: inline-block;
/* padding: 20px 25px; */
padding: 10px 10px;
border-radius: 15%;
  color: #0a0a0a;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
 
}
.resume:hover{
  background: #03e9f4;
  color: #050801;
  box-shadow:
             
              0 0 5px #82b98c,
              0 0 25px #8fd0ee,
              0 0 50px #ece361,
              0 0 200px #03e9f4;
   -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.resume:nth-child(1){
  filter: hue-rotate(270deg);
}
.icons:hover{
  background: #03e9f4;
  color: #050801;
}








/* footer */
#footer .row{
  padding-bottom: 50px;
}
.small-letter{
  text-transform: lowercase;
}
.style-footer{
  position: absolute;
   opacity: 0.1; 
  width: 10px;
  height: 10px;
    /* margin-right: -50%; */
    transform: translate(-50%, -50%);
    
    border-radius: 0%;
    background-color: rgb(13, 102, 124);
    transform-origin: 50% 50%;
    
}

#f111,#f112,#f113,#f114{
  margin-top: 600px;
}
#f111{
  left: 50px;
  animation: f1 2s infinite;
}
#f211{
  left: 140px;
  animation: f1 2s infinite;
}
#f311{
  left: 145px;
  animation: f3 2s infinite;
}
#f411{
  left: 235px;
  animation: f3 2s infinite;
}




#f1{
  
  left: 50px;
  animation: f1 2s infinite;
}
#f2{
  left: 140px;
  animation: f1 2s infinite;
}
#f3{
  left: 145px;
  animation: f3 2s infinite;
}
#f4{
  left: 235px;
  animation: f3 2s infinite;
}
#f5{
  left: 240px;
  animation: f1 2s infinite;
}
#f6{
  left: 330px;
  animation: f1 2s infinite;
}
#f7{
  left: 335px;
  animation: f3 2s infinite;
}
#f8{
  left: 425px;
  animation: f3 2s infinite;
}
#f9{
  left: 430px;
  animation: f1 2s infinite;
}
#f10{
  left: 520px;
  animation: f1 2s infinite;
}
#f11{
  left: 525px;
  animation: f3 2s infinite;
}
#f12{
  left: 615px;
  animation: f3 2s infinite;
}
#f13{
  left: 600px;
  animation: f1 2s infinite;
}
#f14{
  left: 690px;
  animation: f1 2s infinite;
}
#f15{
  left: 695px;
  animation: f3 2s infinite;
}
#f16{
  left: 780px;
  animation: f3 2s infinite;
}
#f17{
  left: 785px;
  animation: f1 2s infinite;
}
#f18{
  left: 875px;
  animation: f1 2s infinite;
}
#f19{
  left: 880px;
  animation: f3 2s infinite;
}
#f20{
  left: 960px;
  animation: f3 2s infinite;
}
#f21{
  left: 965px;
  animation: f1 2s infinite;
}
#f22{
  left: 1055px;
  animation: f1 2s infinite;
}
#f23{
  left: 1160px;
  animation: f3 2s infinite;
}
#f24{
  left: 1230px;
  animation: f3 2s infinite;
}
#f25{
  left: 1130px;
  animation: f1 2s infinite;
}
@keyframes f1{
  0% {
    transform: rotate(90deg);
    border-radius: 0%;
}
10%{
  transform: translate(50px,50px) rotate(180deg);
}
50% {
    
    background-color: red;
    border-radius: 50%;
    transform: translate(150px,100px);

}
60%{
  background: #20668f;
  border-radius: 0%;
  transform: translate(50px,-50px) rotate(180deg);
}
100%{
  transform: translate(0px,0px) rotate(90deg);
}
}
@keyframes f3{
  0% {
    transform: rotate(90deg);
    border-radius: 0%;
}
10%{
  transform: translate(-50px,50px) rotate(180deg);
}
50% {
    
    background-color: red;
    border-radius: 50%;
    transform: translate(-150px,100px);

}
60%{
  background: #20668f;
  border-radius: 0%;
  transform: translate(-50px,-50px) rotate(180deg);
}
100%{
  transform: translate(0px,0px) rotate(90deg);
}
}





#f01{
  
  left: 50px;
  animation: f1 2s infinite;
}
#f02{
  left: 140px;
  animation: f1 2s infinite;
}
#f03{
  left: 145px;
  animation: f3 2s infinite;
}
#f04{
  left: 235px;
  animation: f3 2s infinite;
}
#f05{
  left: 240px;
  animation: f1 2s infinite;
}
#f06{
  left: 330px;
  animation: f1 2s infinite;
}
#f07{
  left: 335px;
  animation: f3 2s infinite;
}
#f08{
  left: 425px;
  animation: f3 2s infinite;
}
#f09{
  left: 430px;
  animation: f1 2s infinite;
}
#f010{
  left: 520px;
  animation: f1 2s infinite;
}
#f011{
  left: 525px;
  animation: f3 2s infinite;
}
#f012{
  left: 615px;
  animation: f3 2s infinite;
}
#f013{
  left: 600px;
  animation: f1 2s infinite;
}
#f014{
  left: 690px;
  animation: f1 2s infinite;
}
#f015{
  left: 695px;
  animation: f3 2s infinite;
}
#f016{
  left: 780px;
  animation: f3 2s infinite;
}
#f017{
  left: 785px;
  animation: f1 2s infinite;
}
#f018{
  left: 875px;
  animation: f1 2s infinite;
}
#f019{
  left: 880px;
  animation: f3 2s infinite;
}
#f020{
  left: 960px;
  animation: f3 2s infinite;
}
#f021{
  left: 965px;
  animation: f1 2s infinite;
}
#f022{
  left: 1055px;
  animation: f1 2s infinite;
}
#f023{
  left: 1160px;
  animation: f3 2s infinite;
}
#f024{
  left: 1230px;
  animation: f3 2s infinite;
}
#f025{
  left: 1170px;
  animation: f1 2s infinite;
}
@keyframes f1{
  0% {
    transform: rotate(90deg);
    border-radius: 0%;
}
10%{
  transform: translate(50px,50px) rotate(180deg);
}
50% {
    
    background-color: red;
    border-radius: 50%;
    transform: translate(150px,100px);

}
60%{
  background: #20668f;
  border-radius: 0%;
  transform: translate(50px,50px) rotate(180deg);
}
100%{
  transform: translate(0px,0px) rotate(90deg);
}
}
@keyframes f3{
  0% {
    transform: rotate(90deg);
    border-radius: 0%;
}
10%{
  transform: translate(-50px,-50px) rotate(180deg);
}
50% {
    
    background-color: red;
    border-radius: 50%;
    transform: translate(-150px,-100px);

}
60%{
  background: #20668f;
  border-radius: 0%;
  transform: translate(-50px,50px) rotate(180deg);
}
100%{
  transform: translate(0px,0px) rotate(90deg);
}
}


#f001,#f002,#f003,#f004,#f005,#f006,#f007,#f008,#f009,#f0010,#f0011,#f0012,#f0013,#f0014,#f0015,#f0016,#f0017,#f0018,#f0019,#f0020,#f0021,#f0022,#f0023,#f0024,#f0025{
  margin-top: 300px;
}
#f001{
  
  left: 50px;
  animation: f1 2s infinite;
}
#f002{
  left: 140px;
  animation: f1 2s infinite;
}
#f003{
  left: 145px;
  animation: f3 2s infinite;
}
#f004{
  left: 235px;
  animation: f3 2s infinite;
}
#f005{
  left: 240px;
  animation: f1 2s infinite;
}
#f006{
  left: 330px;
  animation: f1 2s infinite;
}
#f007{
  left: 335px;
  animation: f3 2s infinite;
}
#f008{
  left: 425px;
  animation: f3 2s infinite;
}
#f009{
  left: 430px;
  animation: f1 2s infinite;
}
#f0010{
  left: 520px;
  animation: f1 2s infinite;
}
#f0011{
  left: 525px;
  animation: f3 2s infinite;
}
#f0012{
  left: 615px;
  animation: f3 2s infinite;
}
#f0013{
  left: 600px;
  animation: f1 2s infinite;
}
#f0014{
  left: 690px;
  animation: f1 2s infinite;
}
#f0015{
  left: 695px;
  animation: f3 2s infinite;
}
#f0016{
  left: 780px;
  animation: f3 2s infinite;
}
#f0017{
  left: 785px;
  animation: f1 2s infinite;
}
#f0018{
  left: 875px;
  animation: f1 2s infinite;
}
#f0019{
  left: 880px;
  animation: f3 2s infinite;
}
#f0020{
  left: 960px;
  animation: f3 2s infinite;
}
#f0021{
  left: 965px;
  animation: f1 2s infinite;
}
#f0022{
  left: 1055px;
  animation: f1 2s infinite;
}
#f0023{
  left: 1160px;
  animation: f3 2s infinite;
}
#f0024{
  left: 1230px;
  animation: f3 2s infinite;
}
#f0025{
  left: 1130px;
  animation: f1 2s infinite;
}


/* end name */
.end-name{
  /* color: red; */
  color: var(--color-end);
}