/*---------------------how it works-------------------*/
.how-it-works {
  padding: 80px 0;
  text-align: center;
}

.how-it-works .container-fluid {
  padding: 0 80px;
}

.how-it-works .subtitle {
  margin: 10px auto 60px;
  color: var(--color-text);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.step-card {
  position: relative;
  background: linear-gradient(359.05deg,
      rgba(102, 102, 102, 0.8) 0.65%,
      rgba(216, 216, 216, 0.8) 100.34%);
  border-radius: 20px;
  padding: 1px;
  text-align: left;
  min-height: 200px;
  transition: all 0.4s ease;
  height: 100%;
}

.step-card.active {
  border: none;
  transform: scale(1.05);
}

.step-card-wrapper {
  position: relative;
  background: var(--color-bg);
  border-radius: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: left;
  min-height: 280px;
  transition: all 0.4s ease;
  height: 100%;
}

.step-card.active::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  background: linear-gradient(120deg,
      #ffe6c1,
      #ffe0b2,
      #ffb347,
      #ff7a18,
      #fe5b15,
      #ff7a18,
      #ffb347,
      #ffe0b2,
      #ffe6c1);
  background-size: 300% 300%;
  animation: gradientMove 4s ease-in-out infinite;
  z-index: -1;
}

.step-card.active::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: white;
  border-radius: 10px;
  z-index: -1;
}

.step-number {
  position: absolute;
  top: -8px;
  right: 10px;
  font-size: 64px;
  font-weight: 800;
  opacity: 1;
  font-family: inter;
}

.outlined-text {
  color: transparent;
  -webkit-text-stroke: 0.8px #fe5b15;
}

.step-card h4 {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  padding: 15px;
}

.step-card .step-card-desc {
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 20px;
  width: 90%;
  padding: 15px;
}

.hiw-img {
  width: 100%;
}

.models {
  display: flex;
  gap: 10px;
}

.models span {
  padding: 10px 14px;
  background: #1c1c1c;
  border-radius: 12px;
  font-size: 13px;
}

.models .active {
  background: var(--orange);
}

.mock {
  background: #1c1c1c;
  padding: 20px;
  border-radius: 12px;
  font-size: 13px;
  text-align: center;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 20%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/*--------------requirements anime-------------*/
.requirements-anime-wrapper .frame {
  width: 100%;
  height: 332px;
  position: relative;
  overflow: hidden;
}

.requirements-anime-wrapper .card {
  width: 230px;
  padding: 14px;
  border-radius: 16px;
  position: absolute;
  left: 43%;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 1.45;
  color: #fff;
  opacity: 0;
  will-change: transform, top;
}

.requirements-anime-wrapper .card.second {
  color: var(--color-text);
}

.requirements-anime-wrapper .second {
  background: linear-gradient(109.46deg,
      rgba(201, 201, 201, 0.24) 1.57%,
      rgba(196, 196, 196, 0.03) 100%);
  transform: translateX(-50%) rotate(12deg);
  z-index: 0;
  border: 1px solid #ffffff;
}

.requirements-anime-wrapper .first {
  background: var(--color-primary);
  transform: translateX(-50%) rotate(-8deg);
  z-index: 2;
  border: 1px solid #ffffff;
}

.requirements-desc {
  margin-bottom: 0;
  font-size: 14px;
}

/*--------------match experts-------------*/
.matchexperts-anime-wrapper .frame {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
}

.matchexperts-anime-wrapper .user {
  text-align: center;
  transition: all 0.5s ease;
}

.matchexperts-anime-wrapper .avatar-wrapper {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #555;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s ease;
}

.matchexperts-anime-wrapper .user img.avatar {
  width: 58px;
  height: 58px;
  position: absolute;
}

.matchexperts-anime-wrapper .check {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 20px;
  height: 20px;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.4s ease;
}

.matchexperts-anime-wrapper .active .avatar-wrapper {
  background: #fe5b15;
  transform: scale(1.2);
}

.matchexperts-anime-wrapper .active .check {
  opacity: 1;
  transform: scale(1);
}

.matchexperts-anime-wrapper .active .role {
  color: #fe5b15;

  font-size: 12px;
}

.matchexperts-anime-wrapper .inactive .avatar-wrapper {
  background: #3a3a3a;
  transform: scale(0.9);
}

.matchexperts-anime-wrapper .name {
  margin-top: 27px;
  margin-left: -20px;
  font-size: 12px;
  color: #666666;
}

.matchexperts-anime-wrapper .role {
  font-size: 12px;
  margin-top: 5px;
  margin-left: -20px;
  color: var(--color-text);
}

.matchexperts-anime-wrapper .text-center {
  text-align: center;
}

.matchexperts-anime-wrapper #user2 {
  margin-top: 50px;
}

/*----------modal select----------*/
.choosemodal-anime-wrapper .frame {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.choosemodal-anime-wrapper .modal-card {
  width: 120px;
  height: 160px;
  padding: 16px;
  position: absolute;
  left: 50%;
  top: 60px;
  border-radius: 16px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  transform-origin: center;
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.6s ease,
    box-shadow 0.6s ease;
  text-align: center;

  border: 1px solid rgba(95, 95, 95, 0.5);
  border-radius: 16px;
  max-width: 400px;
  animation: rotate-gradient 3s infinite linear;
}

.choosemodal-anime-wrapper .light {
  background: var(--color-bg);
}

.choosemodal-anime-wrapper .active {
  background-color: #fe5b15;
}

.choosemodal-anime-wrapper .model-ic {
  padding-top: 20px;
  opacity: 50%;
}

.choosemodal-anime-wrapper .active .model-ic {
  opacity: 100%;
}

.choosemodal-anime-wrapper .model-ic img {
  width: 50px;
  filter: invert(1);
}

.modal-card.light.active .model-ic img {
  filter: none;
}

.modal-card.light.active .cd-txt {
  color: #fff;
  font-weight: 700;
}

.choosemodal-anime-wrapper .cd-txt {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}

/*--------get started---------*/
.step-card.active {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.get-started {
  width: 100%;
}

.get-started .frame {
  height: 240px;
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  padding: 5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.frame-wrapper {
  background: #fff;
  overflow: hidden;
  border-radius: 14px;
  height: 100%;
}

/* .scale {
  transform: scale(0.38);
  transform-origin: top left;
} */

/* APP LAYOUT */
.get-started .app {
  display: flex;
  width: 100%;
  min-height: 300px;
}

/* SIDEBAR */
.get-started .sidebar {
  width: 20px;
  background: #f4f4f4;
  border-radius: 12px;
  padding: 5px 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}

.get-started .logo img {
  width: 100%;
}

.get-started .icon {
  height: 6px;
  background: #ccc;
  border-radius: 4px;
}

.get-started .icon.active {
  background: #ff7a18;
}

/* CONTENT */
.get-started .content {
  flex: 1;
  padding: 5px;
}

/* GRID */

.get-started .board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  width: 100%;
}

/* COLUMN */
.get-started .column {
  background: #fafafa;
  border-radius: 12px;
  padding: 2px;
  min-width: 0;
  /* IMPORTANT */
}

.get-started .column h2 {
  font-size: 9px;
  margin-bottom: 10px;
  color: #333;
}

/* .get-started .column.drop-active::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 14px;
  border: 2px dashed #ff7a18;
  animation: dash 1s linear infinite;
} */
.get-started .drop-active #completed {
  content: "";

  inset: 10px;
  border-radius: 14px;
  border: 2px dashed #ff7a18;
  animation: dash 1s linear infinite;
}

@keyframes dash {
  to {
    border-offset: 20px;
  }
}

/* STACK */
.get-started .stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* CARD */
.get-started .card {
  background: #ffffff;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #eee;
  min-height: 60px;
  min-width: 0;
  /* IMPORTANT */
}

/* TEXT */
.get-started .line {
  height: 6px;
  background: #ddd;
  border-radius: 4px;
  margin-bottom: 6px;
}

.get-started .card.dragging {
  transform: scale(1.08);
  box-shadow: 0 18px 40px rgba(110, 110, 110, 0.235);
  z-index: 10;
}

/* STATUS */
.get-started .status {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.get-started .bars span {
  width: 3px;
  height: 7px;
  background: #ff7a18;
  display: inline-block;
}

.get-started .check {
  display: none;
  width: 20px;
  height: 20px;
  background: #2ecc71;
  border-radius: 50%;
}

.get-started .done .bars {
  display: none;
}

.get-started .done .check {
  display: block;
}

/* LINES */
/* .line {
  height: 7px;
  background: #333;
  border-radius: 4px;
  margin-bottom: 6px;
} */

/* HAND (ALWAYS VISIBLE) */
/* CURSOR */
.get-started .cursor {
  position: absolute;
  right: 4px;
  bottom: -6px;
  width: 18px;
  z-index: 1;
}

.card.dragging .cursor {
  transform: scale(1);
}

/* RESPONSIVE */
@media (max-width: 1200px) {
  .get-started .sidebar {
    width: 20px;
  }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet */
@media (max-width: 992px) {
  .get-started .sidebar {
    width: 20px;
  }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .get-started .board {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile */
@media (max-width: 576px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }

  .get-started .board {
    grid-template-columns: repeat(3, 1fr);
  }

  .get-started .sidebar {
    display: none;
  }
}