.img-size1 {
  width: 110px;
}

.pt-c1 {
  padding-top: 154px;
}

.icon-imgs {
  width: 30px;
  height: 28px;
  margin-right: 5px;
}

.col-1-c {
  flex: 0 0 auto;
  width: 4% !important;
  margin-left: 1%;
}

.line {
  width: 2px;
  height: 100%;
  background-color: #ffffff6e;
  overflow: hidden;
  position: relative;

}

.line .scanner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 50%;
  animation: scanner-loop 7s ease-in-out infinite;
}

.line .scanner {
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  height: 10%;
}

.animatin-s2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  height: 10%;
  visibility: hidden;
  animation: scanner-loop2 7s ease-in-out infinite;
  animation-delay: 5.7S;
}

header a.nav-link {
  font-size: 20px;
}

.icon-imgs2 {
  width: 52px;
  margin-right: 5px;
}

.size-c1 {
  font-size: 30px;
  font-weight: 500;
}

.link-c {
  text-decoration: none;
  transition: 0.7s;
}
.link-c:hover{
  transform: scale(1.2);
}

/* page2 ----------------------------------------- */
.mt-c2 {
  margin-top: 1px;
}

.h-80 {
  height: 80%;
}

.pt-6 {
  padding-top: 5.1rem !important;
}

.mt-70px {
  margin-top: 70px;
}

.w-c75 {
  width: 75%;
}

.align-text-justify {
  text-align: justify;
}

.pt-c2 {
  padding-top: 100px;
}

.vh-md-100 {
  height: 100vh;
}

.pading-bottm {
  height: 50px;
}

/* page3 ----------------------------------------- */
.pading-top-heder {
  height: 70px;
}

.skils {
  margin: 50px 0px;
}

.line-size {
  width: 85%;
  position: relative;
}

#selectValue {
  width: 25px;
  height: 16px;
  position: absolute;
  top: -16px;
  right: 5px;
  background: #ffd200;
  border-radius: 4px;
  text-align: center;
  line-height: 15px;
  font-size: 11px;
  font-weight: bold;
}


#slider {
  -webkit-appearance: none;
  width: 100%;
  height: 7px;
  border-radius: 3px;
  position: absolute;
  top: 7px;
}

/* Design slider button */
#slider::-webkit-slider-thumb {
  -webkit-appearance: none;
}

#progressBar {

  height: 7px;
  background: #ffd000ea;
  border-radius: 3px;
  position: absolute;
  top: 7px;
  left: 0;
}

.f-size1 {
  font-size: 20px;
}

/* page4 ----------------------------------------- */

.circle2 {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #fffffff2;

}

.font-sc1 {
  font-size: 20px;
}

.pt-7rem {
  padding-top: 7rem;
}

.p-left20 {
  padding-left: 20px;
}

.h-268px {
  height: 290px;
}

/* page4 ----------------------------------------- */
.ml-34 {
  margin-left: 34px;
}

.pl-26 {
  padding-left: 26px !important;
}

.icon-imgs3 {
  width: 35px;
}

.size-c2 {
  font-size: 20px;
  font-weight: bold;
}

.mt-c3 {
  margin-top: 100px !important;
}

.mt-5rem {
  margin-top: 5rem !important;
}

.max-w-3 {
  max-width: 335px;
}

.link-style {
  text-decoration: none;
  font-size: 24px;
  color: white;
  font-weight: 800;
}
.ani{
  width: 4px;
  height: 5px;
}




/*---------------------------------------------------- one brack    -------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .col-1-c {
    margin-left: 1.2%;
  }

  .icon-imgs2 {
    width: 40px;
    margin-right: 5px;
  }

  .size-c1 {
    font-size: 25px;
    font-weight: 500;
  }

  .h-268px {
    height: 330px;
  }

}

/*----------------------------------------------------  md(tablet)  ------------------------------------------------------*/
@media screen and (max-width: 769px) {
  .col-1-c {
    margin-left: 2.1%;
  }

  .vh-md-100 {
    height: auto;
  }

  .h-268px {
    height: 383px;
  }

}

/*----------------------------------------------------  sm (phone)  ------------------------------------------------------*/
@media screen and (max-width: 430px) {
  .col-1-c {
    margin-left: 14px;
  }

  .pt-c1 {
    padding-top: 118px;
  }

  .size-c1 {
    font-size: 20px;
    font-weight: 400;
  }

  .w-c75 {
    width: 100% !important;
  }

  .pt-c2 {
    padding-top: 18px !important;
  }

  .align-text-justify {
    text-align: start;
  }

  .pt-6 {
    padding-top: 2.1rem !important;
  }

  .line-size {
    width: 98%;
  }

  .h-268px {
    height: auto;
  }

  .pading-top-heder {
    height: 30px;
  }

  .pt-7rem {
    padding-top: 1rem;
  }

  .ml-34 {
    margin-left: 15px;
  }

  .size-c2 {
    font-size: 17px;
  }

  .mt-5rem {
    margin-top: 1rem !important;
  }

  .mt-c3 {
    margin-top: 40px !important;
  }

  .link-style {
    font-size: 18px;
  }

}



/* --------------------------------------    animation     ------------------------------------------ */


@keyframes scanner-loop {
  0% {
    top: 0;
    opacity: 1;
  }

  78% {
    opacity: 1;
  }

  99% {
    opacity: 0;
  }

  100% {
    top: 100%;
  }
}

@keyframes scanner-loop2 {
  0% {
    top: 0;
    opacity: 0;
    visibility: visible;
  }

  1% {
    opacity: 1;
  }

  100% {
    top: 100%;
  }
}



/* --------------------------------------    animation     ------------------------------------------ */



/* for animation text pg4 */
.hero {
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  color: #fff;
  z-index: 2;
  letter-spacing: 2px;

  /* Bright things in dark environments usually cast that light, giving off a glow */
  filter: drop-shadow(0 1px 3px);
}.layers {
  position: relative;
}

.layers::before,
.layers::after {
  content: attr(data-text);
  position: absolute;
  width: 110%;
  z-index: -1;
}

.layers::before {
  top: 10px;
  left: 15px;
  color: #e0287d;
}

.layers::after {
  top: 5px;
  left: -10px;
  color: #1bc7fb;
}

.single-path {
  clip-path: polygon(
    0% 12%,
    53% 12%,
    53% 26%,
    25% 26%,
    25% 86%,
    31% 86%,
    31% 0%,
    53% 0%,
    53% 84%,
    92% 84%,
    92% 82%,
    70% 82%,
    70% 29%,
    78% 29%,
    78% 65%,
    69% 65%,
    69% 66%,
    77% 66%,
    77% 45%,
    85% 45%,
    85% 26%,
    97% 26%,
    97% 28%,
    84% 28%,
    84% 34%,
    54% 34%,
    54% 89%,
    30% 89%,
    30% 58%,
    83% 58%,
    83% 5%,
    68% 5%,
    68% 36%,
    62% 36%,
    62% 1%,
    12% 1%,
    12% 34%,
    60% 34%,
    60% 57%,
    98% 57%,
    98% 83%,
    1% 83%,
    1% 53%,
    91% 53%,
    91% 84%,
    8% 84%,
    8% 83%,
    4% 83%
  );
}

.paths {
  animation: paths 5s step-end infinite;
}

@keyframes paths {
  0% {
    clip-path: polygon(
      0% 43%,
      83% 43%,
      83% 22%,
      23% 22%,
      23% 24%,
      91% 24%,
      91% 26%,
      18% 26%,
      18% 83%,
      29% 83%,
      29% 17%,
      41% 17%,
      41% 39%,
      18% 39%,
      18% 82%,
      54% 82%,
      54% 88%,
      19% 88%,
      19% 4%,
      39% 4%,
      39% 14%,
      76% 14%,
      76% 52%,
      23% 52%,
      23% 35%,
      19% 35%,
      19% 8%,
      36% 8%,
      36% 31%,
      73% 31%,
      73% 16%,
      1% 16%,
      1% 56%,
      50% 56%,
      50% 8%
    );
  }

  5% {
    clip-path: polygon(
      0% 29%,
      44% 29%,
      44% 83%,
      94% 83%,
      94% 56%,
      11% 56%,
      11% 64%,
      94% 64%,
      94% 70%,
      88% 70%,
      88% 32%,
      18% 32%,
      18% 96%,
      10% 96%,
      10% 62%,
      9% 62%,
      9% 84%,
      68% 84%,
      68% 50%,
      52% 50%,
      52% 55%,
      35% 55%,
      35% 87%,
      25% 87%,
      25% 39%,
      15% 39%,
      15% 88%,
      52% 88%
    );
  }

  30% {
    clip-path: polygon(
      0% 53%,
      93% 53%,
      93% 62%,
      68% 62%,
      68% 37%,
      97% 37%,
      97% 89%,
      13% 89%,
      13% 45%,
      51% 45%,
      51% 88%,
      17% 88%,
      17% 54%,
      81% 54%,
      81% 75%,
      79% 75%,
      79% 76%,
      38% 76%,
      38% 28%,
      61% 28%,
      61% 12%,
      55% 12%,
      55% 62%,
      68% 62%,
      68% 51%,
      0% 51%,
      0% 92%,
      63% 92%,
      63% 4%,
      65% 4%
    );
  }

  45% {
    clip-path: polygon(
      0% 33%,
      2% 33%,
      2% 69%,
      58% 69%,
      58% 94%,
      55% 94%,
      55% 25%,
      33% 25%,
      33% 85%,
      16% 85%,
      16% 19%,
      5% 19%,
      5% 20%,
      79% 20%,
      79% 96%,
      93% 96%,
      93% 50%,
      5% 50%,
      5% 74%,
      55% 74%,
      55% 57%,
      96% 57%,
      96% 59%,
      87% 59%,
      87% 65%,
      82% 65%,
      82% 39%,
      63% 39%,
      63% 92%,
      4% 92%,
      4% 36%,
      24% 36%,
      24% 70%,
      1% 70%,
      1% 43%,
      15% 43%,
      15% 28%,
      23% 28%,
      23% 71%,
      90% 71%,
      90% 86%,
      97% 86%,
      97% 1%,
      60% 1%,
      60% 67%,
      71% 67%,
      71% 91%,
      17% 91%,
      17% 14%,
      39% 14%,
      39% 30%,
      58% 30%,
      58% 11%,
      52% 11%,
      52% 83%,
      68% 83%
    );
  }

  76% {
    clip-path: polygon(
      0% 26%,
      15% 26%,
      15% 73%,
      72% 73%,
      72% 70%,
      77% 70%,
      77% 75%,
      8% 75%,
      8% 42%,
      4% 42%,
      4% 61%,
      17% 61%,
      17% 12%,
      26% 12%,
      26% 63%,
      73% 63%,
      73% 43%,
      90% 43%,
      90% 67%,
      50% 67%,
      50% 41%,
      42% 41%,
      42% 46%,
      50% 46%,
      50% 84%,
      96% 84%,
      96% 78%,
      49% 78%,
      49% 25%,
      63% 25%,
      63% 14%
    );
  }

  90% {
    clip-path: polygon(
      0% 41%,
      13% 41%,
      13% 6%,
      87% 6%,
      87% 93%,
      10% 93%,
      10% 13%,
      89% 13%,
      89% 6%,
      3% 6%,
      3% 8%,
      16% 8%,
      16% 79%,
      0% 79%,
      0% 99%,
      92% 99%,
      92% 90%,
      5% 90%,
      5% 60%,
      0% 60%,
      0% 48%,
      89% 48%,
      89% 13%,
      80% 13%,
      80% 43%,
      95% 43%,
      95% 19%,
      80% 19%,
      80% 85%,
      38% 85%,
      38% 62%
    );
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    clip-path: none;
  }
}

.movement {
  /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
  position: relative;
  animation: movement 8s step-end infinite;
}

@keyframes movement {
  0% {
    top: 0px;
    left: -20px;
  }

  15% {
    top: 10px;
    left: 10px;
  }

  60% {
    top: 5px;
    left: -10px;
  }

  75% {
    top: -5px;
    left: 20px;
  }

  100% {
    top: 10px;
    left: 5px;
  }
}

.opacity {
  animation: opacity 5s step-end infinite;
}

@keyframes opacity {
  0% {
    opacity: 0.1;
  }

  5% {
    opacity: 0.7;
  }

  30% {
    opacity: 0.4;
  }

  45% {
    opacity: 0.6;
  }

  76% {
    opacity: 0.4;
  }

  90% {
    opacity: 0.8;
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    opacity: 0;
  }
}

.font {
  animation: font 7s step-end infinite;
}

@keyframes font {
  0% {
    font-weight: 100;
    color: #e0287d;
    filter: blur(3px);
  }

  20% {
    font-weight: 500;
    color: #fff;
    filter: blur(0);
  }

  50% {
    font-weight: 300;
    color: #1bc7fb;
    filter: blur(2px);
  }

  60% {
    font-weight: 700;
    color: #fff;
    filter: blur(0);
  }

  90% {
    font-weight: 500;
    color: #e0287d;
    filter: blur(6px);
  }
}

.glitch span {
  animation: paths 5s step-end infinite;
}

.glitch::before {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 8s step-end infinite, movement 10s step-end infinite;
}

.glitch::after {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 7s step-end infinite, movement 8s step-end infinite;
}

.hero-container {
  position: relative;
  padding: 10px 0;
  text-align: center;
  cursor: grab;
}

.environment {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  filter: blur(5px);
  background-size: cover;
}





/* for animation text pg4 */