/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

.skills-marquee {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

.skills-marquee:before, .skills-marquee:after {
  position: absolute;
  inset-block: 0;
  width: 100px;
  background: linear-gradient(90deg,rgba(255, 255, 255, 1) 30%, rgba(0, 0, 0, 0) 100%);
  content: '';
  left: 0;
  z-index: 1;
}

.skills-marquee:after {
  position: absolute;
  inset-block: 0;
  width: 100px;
  background: linear-gradient(270deg,rgba(255, 255, 255, 1) 30%, rgba(0, 0, 0, 0) 100%);
  content: '';
  left: auto;
  right: 0;
}

.marquee-row {
  overflow: hidden;
  white-space: nowrap;
}

.marquee-track {
  display: inline-flex;
  gap: 14px;
  animation: scroll 30s linear infinite;
}

.marquee-row:nth-child(2) .marquee-track{
	animation: scroll 25s linear infinite reverse;
}
.marquee-track:hover{
  animation-play-state: paused !important;
}

/* .marquee-row.slow .marquee-track {
  animation-duration: 35s;
}

.marquee-row.fast .marquee-track {
  animation-duration: 18s;
} */

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.chip {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid;
  background: #fff;
  white-space: nowrap;
}
.marquee-track .chip:nth-child(8n + 1){
  border-color: #f7df1e; background: #fffbe6;
}
.marquee-track .chip:nth-child(8n + 2){
  border-color: #3178c6; background: #eef5ff;
}
.marquee-track .chip:nth-child(8n + 3){
  border-color: #3c873a; background: #edf7ed;
}
.marquee-track .chip:nth-child(8n + 4){
  border-color: #e34c26; background: #fff1ec;
}
.marquee-track .chip:nth-child(8n + 5){
  border-color: #264de4; background: #eef1ff;
}
.marquee-track .chip:nth-child(8n + 6){
  border-color: #61dafb; background: #eefbff; 
}
.marquee-track .chip:nth-child(8n + 7){
  border-color: #f59e0b; background: #fff7ed; 
}
.marquee-track .chip:nth-child(8n + 8){ 
  border-color: #1867c0; background: #eef4fb;
}
/* Color variations */
/* .js { border-color: #f7df1e; background: #fffbe6; }
.ts { border-color: #3178c6; background: #eef5ff; }
.node { border-color: #3c873a; background: #edf7ed; }
.html { border-color: #e34c26; background: #fff1ec; }
.css { border-color: #264de4; background: #eef1ff; }

.vue { border-color: #42b883; background: #eafaf4; }
.react { border-color: #61dafb; background: #eefbff; }
.pinia { border-color: #f59e0b; background: #fff7ed; }
.vuetify { border-color: #1867c0; background: #eef4fb; }
.tailwind { border-color: #38bdf8; background: #f0f9ff; }

.git { border-color: #f05032; background: #fff0eb; }
.docker { border-color: #0db7ed; background: #eefbff; }
.ci { border-color: #10b981; background: #ecfdf5; }
.api { border-color: #8b5cf6; background: #f5f3ff; }
.graph { border-color: #e10098; background: #fff0fa; } */

/* Frontend & Core */
/* .js { border-color:#f7df1e; background:#fffbe6; }
.es { border-color:#facc15; background:#fffbeb; }
.ts { border-color:#3178c6; background:#eef5ff; }
.vue { border-color:#42b883; background:#eafaf4; }
.nuxt { border-color:#00dc82; background:#ecfdf5; }
.pinia { border-color:#f59e0b; background:#fff7ed; }
.ssr { border-color:#6366f1; background:#eef2ff; }
.vite { border-color:#646cff; background:#eef2ff; }
.vuetify { border-color:#1867c0; background:#eef4fb; }
.react { border-color:#61dafb; background:#eefbff; }
.node { border-color:#3c873a; background:#edf7ed; }
.graphql { border-color:#e10098; background:#fff0fa; }
.webpack { border-color:#1c78c0; background:#eef6ff; }
 */
/* Quality & Tooling */
/* .cicd { border-color:#10b981; background:#ecfdf5; }
.tdd { border-color:#14b8a6; background:#ecfeff; }
.jest { border-color:#99425b; background:#fdf2f8; }
.selenium { border-color:#43b02a; background:#f0fdf4; }
.tailwind { border-color:#38bdf8; background:#f0f9ff; }
.html { border-color:#e34c26; background:#fff1ec; }
.css { border-color:#264de4; background:#eef1ff; }
.scss { border-color:#cd6799; background:#fff0f6; }
.sass { border-color:#cc6699; background:#fff0f6; }
.bem { border-color:#64748b; background:#f8fafc; }
.npm { border-color:#cb3837; background:#fff1f2; }
.git { border-color:#f05032; background:#fff0eb; } */

/* Advanced / Visualization */
/* .dsa { border-color:#8b5cf6; background:#f5f3ff; }
.three { border-color:#000; background:#f4f4f5; }
.d3 { border-color:#f97316; background:#fff7ed; }
.animation { border-color:#ec4899; background:#fdf2f8; }
.canvas { border-color:#0ea5e9; background:#f0f9ff; }
.gsap { border-color:#84cc16; background:#f7fee7; }
.bootstrap { border-color:#7952b3; background:#f5f3ff; } */

/* Leadership & AI */
/* .leadership,
.management,
.mentorship,
.performance,
.strategy,
.decision,
.review,
.training {
  border-color:#334155;
  background:#f8fafc;
}

.copilot { border-color:#000; background:#f4f4f5; }
.openai { border-color:#10a37f; background:#ecfdf5; } */


.game-wrap {height: 200px; overflow: visible; display: none;}

.project-logo-wrap img{max-width: 200px;}
.about-project-logo-wrap img{max-width: 150px;}

.common-questions-wrap{
  background: #f1efe5 url('../demos/freelancer/images/bg.svg') no-repeat right center; padding-top: 240px
}

@media screen and (max-width: 767px){
  .shape-divider-wrap {
    margin-top: 50px !important;
  }

  .shape-divider-complete{
    height: 50px;
    top: -49px !important;
  }
  .shape-divider-complete svg{
    height: 100% !important;
  }

  .portfolio-title-wrap{
    padding: 10px 20px !important;
  }
  .portfolio-item .portfolio-image h3{
    font-size: 18px !important;
  }
  .portfolio-item .portfolio-image h5{
    font-size: 12px !important;
  }
  .project-logo-wrap{
    padding: 40px !important;
  }
  .project-logo-wrap img{
    max-width: 100%;
  }
  .common-questions-wrap{
    padding-top: 20px;
  }
}