/* ===== ROADMAP SECTION ===== */
.comic-roadmap {
  padding: 60px 0;
background-image: url("/images/roadmap-2.png");
    background-position: center;
        background-size: cover;
        background-attachment: fixed;
}

@media (max-width: 768px) {
  .comic-roadmap {
    background-image: url("/images/roadmap-mb.png");
    background-position: center;
        background-size: cover;
        background-attachment: fixed;
  }
}

/* TITLE */
.roadmap-title {
  font-size: 2.8rem;
  font-weight: 900;
  background: #ffeb3b;
  padding: 15px 40px;
  border: 4px solid #000;
  border-radius: 22px;
  box-shadow: 6px 6px 0 #000;
  display: inline-block;
}

/* TIMELINE */
.roadmap-item {
  margin-bottom: 100px;
}

/* CENTER LINE */
.timeline-line {
  width: 6px;
  background: #000;
  height: 100%;
  position: relative;
}

/* FULL CENTER VERTICAL LINE */
.roadmap-timeline {
  position: relative;
}

.roadmap-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 6px;
  background: #000;
  transform: translateX(-50%);
}

.timeline-dot {
  width: 22px;
  height: 22px;
  background: #C56C78;
  border: 4px solid #000;
  border-radius: 50%;
  position: absolute;
  bottom: 180px;
  left: 50%;
  transform: translateX(-50%);
}

/* HIDE TIMELINE LINE ON MOBILE */
@media (max-width: 768px) {
  .roadmap-timeline::before {
    display: none;
  }

  .timeline-line {
    display: none;
  }

  .timeline-dot {
    display: none;
  }
}


/* PHASE CARD */
.phase-card {
  position: relative;
  background:
    linear-gradient(145deg, rgba(136,64,165,0.07), transparent 45%),
    #fff;
     outline: 3px dashed #8840A5;
  outline-offset: -8px;
  /* border: 4px solid #000; */
  border-radius: 20px;
  padding: 25px;
  margin-bottom: 20px;
  /* box-shadow: 6px 6px 0 #000; */
  transition: all 0.3s ease;
  overflow: hidden;
}

/* GRAFFITI SPLASH */
.phase-card::before {
  content: "";
  position: absolute;
  top: -25px;
  left: -35px;
  width: 140px;
  height: 140px;
  background: #8840A5;
  opacity: 0.12;
  border-radius: 55% 45% 60% 40%;
  transform: rotate(-18deg);
}

/* SPRAY DOTS */
.phase-card::after {
  content: "";
  position: absolute;
  bottom: 18px;
  right: 30px;
  width: 8px;
  height: 8px;
  background: #8840A5;
  border-radius: 50%;
  opacity: 0.45;
  box-shadow:
    -16px -10px 0 #8840A5,
    -32px 6px 0 #8840A5,
    -48px -6px 0 #8840A5;
}

.phase-card:hover::before {
  opacity: 0.25;
  transform: scale(1.1) rotate(-10deg);
}


/* HOVER EFFECT */
.phase-card:hover {
  transform: translateY(-12px) rotate(0.8deg);
  box-shadow: 10px 10px 0 #000;
}


.phase-card h4,
.phase-card h5 {
    font-size: 2rem;
  font-weight: 900;
}

.phase-card ul {
    font-size: 1.35rem;
  padding-left: 20px;
  margin: 0;
}

.phase-card ul li {
    font-size: 1.25rem;
  margin-bottom: 10px;
}

.phase-card p{
    font-size: 1.25rem;
}

.phase-card strong{
    font-size: 1.25rem;
}

/* IMAGE */
.roadmap-img {
  max-width: 100%;
}

/* MOBILE RESPONSIVE */
@media (max-width: 991px) {
  .timeline-line {
    display: none;
  }

  .roadmap-item {
    margin-bottom: 60px;
  }
}