.marquee {
  --marquee--colour: #108a09;
  --marquee--repeat-count: 6;
  --marquee--base-duration: 1s;
  --marquee--repeat-size: calc(100% / var(--marquee--repeat-count));
  --marquee--double-size: calc(var(--marquee--repeat-size) * 2);
  --marquee--duration: calc(
  	var(--marquee--base-duration) * var(--char-count, 20)
  );
  overflow: hidden;
  width: 110%;
  margin-left: -5%;
  mix-blend-mode: screen;
  transform: rotate(-2deg);
  background: var(--marquee--colour);
  color: #000;
}
.marquee:nth-child(even) {
  --marquee--direction: -1;
  transform: rotate(2deg);
  background: #000;
  color: #fff;
}
.marquee p {
  transform: translateY(0.07em);
  font-weight: bold;
  margin: 0;
  display: flex;
  gap: 0.5em;
  line-height: 1.1;
  font-size: clamp(2.5rem, 12vw, 6.2rem);
  font-family: "Bebas Neue", sans-serif;
  /* An empty psuedo element creates a gap after the last element */
}
.marquee p::after {
  content: "*";
  transform: translateY(0.175em);
}
.marquee p::before {
  content: "";
}

.marquee--inner {
  width: max-content;
  display: flex;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee--inner {
    animation: marquee var(--marquee--duration) infinite linear, reduce-marquee var(--marquee--duration) infinite linear paused;
    animation-composition: add;
  }
  .marquee--inner:hover {
    animation-play-state: running;
  }
}

@keyframes marquee {
  from {
    transform: translateX(calc( 		(-1 * var(--marquee--double-size)) - 			(var(--marquee--double-size) * var(--marquee--direction, 1)) 	));
  }
  to {
    transform: translateX(calc(var(--marquee--double-size) * -1));
  }
}
@keyframes reduce-marquee {
  from {
    transform: translateX(calc(var(--marquee--repeat-size) * var(--marquee--direction, 1)));
  }
  to {
    transfrom: translateX(calc(var(--marquee--double-size) * -1));
  }
}
/* body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url(https://images.unsplash.com/photo-1505356822725-08ad25f3ffe4?q=80&w=1587&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  background-size: cover;
  background-position: center;
  filter: brightness(0.25);
}
*/
.marquees {
  align-content: center;
  height: 100%;
  display: grid;
  gap: 2vw;
  overflow: hidden;
}

.marquees-btn {
  position: relative;
  top: 10px;
  left: 20px;
}
.marquees-btn[aria-pressed=true] {
  filter: invert(1);
}

[aria-pressed=true] + * .marquee--inner {
  animation-play-state: paused !important;
}

.text-white{color:#fff !important;}
.letter-space{letter-spacing:5px}
.uk-overlay-primary{background: rgba(0, 0, 0, .7);}
.mycolor{color:#108a09 !important}
.uk-heading-medium{bottom:2.7em}
.caramel-regular {font-family: "Caramel", cursive !important;font-weight: 400;font-style: normal;}
.bg-black{background: #111}
.bg-white{background: #eee}
.title {margin-left: -2.6em;}
.timeline-year{color:#666;font-size: 3rem;}
.bg-remove{background: transparent !important;box-shadow:none;}
.textwhite{color:#fff;} .texthire{color:#888 !important;}
.uk-checkbox:checked:focus, .uk-checkbox:indeterminate:focus, .uk-radio:checked:focus {background-color: #118a0a;}
.uk-checkbox:checked, .uk-checkbox:indeterminate, .uk-radio:checked {background-color: #118a0a;border-color: transparent;}
.border-input{border:1px solid #333;}
.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
    outline: 0;
    background-color: transparent;
    color: #666;
    border-color: #2d9223;
}





.text {
  position: relative;
  width: 450px;
  overflow: visible;
}
.font-text{
    font-size: 120px;
    line-height: 140px;  
}
.p {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

.word {
  position: absolute;
  width: 620px;
  opacity: 0;
  margin-left: 12px;
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}

.letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
  transform: rotateX(-90deg);
}

.letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}



.skills-bar {
  padding: 5px 30px;
}

.skills-bar .bar {
  margin: 25px 0;
}

.skills-bar .bar .info span {
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 1.5px;
}

.skills-bar .bar .info {
  margin-bottom: 8px;
  color: #fff;
}

.skills-bar .bar .progress-line {
  position: relative;
  height: 15px;
  width: 100%;
  background: #434343;
  border-radius: 0px;
  transform: scaleX(0);
  transform-origin: left;
  animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}

.bar .progress-line span {
  position: absolute;
  background: #108a09;
  height: 100%;
  border-radius: 0px;
  transform: scaleX(0);
  transform-origin: left;
  text-transfrom = uppercase;
  animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}

@keyframes animate {
  100% {
    transform: scaleX(1);
  }
}

.progress-line .logo {
  width: 93%;
}
.progress-line .branding {
  width: 95%;
}
.progress-line .photoshop {
  width: 93%;
}
.progress-line .illustrator {
  width: 76%;
}
.progress-line .web {
  width: 92%;
}
.progress-line .html {
  width: 97%;
}
.progress-line .video {
  width: 75%;
}
.progress-line .uikit {
  width: 88%;
}
.bar .progress-line span::before {
  position: absolute;
  content: "";
  height: 0;
  right: 0;
  top: -14px;
  width: 0;
  border: 7px solid transparent;
  border-bottom-width: 0px;
  border-right-width: 0px;
  border-top-style: #f0f0f0;
  border-top-color: #108a09;
}

.bar .progress-line span::after {
  position: absolute;
  right: 0;
  top: -28px;
  color: #f0f0f0;
  font-size: 12px;
  font-weight: 700;
  background: #108a09;
  padding: 1px 8px;
  border-radius: 0px;
}


.progress-line .logo::after {
  content: "93%";
}
.progress-line .branding::after {
  content: "95%";
}
.progress-line .photoshop::after {
  content: "93%";
}
.progress-line .illustrator::after {
  content: "76%";
}
.progress-line .web::after {
  content: "92%";
}
.progress-line .html::after {
  content: "97%";
}
.progress-line .video::after {
  content: "75%";
}
.progress-line .uikit::after {
  content: "88%";
}

/* ////........Media Query........//// */

@media (max-width: 800px) {
  .skills{width: 100%;}.skills-bar{padding:5px 0px;}
  .skills-bar .bar .progress-line{width: 100%;}
  .text{overflow: hidden;width: auto}
  .font-text{font-size: 50px;line-height: 70px;}
  .word {margin-left:3px;}  
  .title {margin-left: 0em;position: relative;top: -53px;}
  .uk-list-circle{padding-left: 16px;}
  
  
}