/* ================= MAIN TITLE ================= */
.medical-title {
  font-size: 36px;
  font-weight: 500;
}

.title-underline {
  width: 220px;
  height: 2px;
  background: #00a0e3;
  margin-bottom: 30px;
}

/* ================= TIMELINE ================= */
.timeline {
  position: relative;
  padding-left: 40px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  width: 2px;
  height: 100%;
  background: #ccc;
}

.timeline-dot {
  position: absolute;
  left: 6px;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 2px solid #999;
  border-radius: 50%;
}

.dot-1 { top: 12px; }
.dot-2 { top: 460px; }

/* ================= SERVICE BOX ================= */
.service-box {
  background: #f3f7f8;
  padding: 30px;
  margin-bottom: 40px;
}


.titles {
    color: rgb(17, 17, 17);   /* default color */
    font-size: 20px;
    margin-bottom: 15px;
    font-weight: 400;
    font-family: 'Bitter';
    transition: color 0.3s ease-in-out; /* smooth hover */
}

.titles:hover {
    color: rgb(255, 51, 50); /* hover color */
}

.service-title {
  color: red;
  font-size: 20px;
  margin-bottom: 15px;
  color: rgb(255, 51, 50);
    font-size: 20px;
    margin-bottom: 15px;
    font-weight: 400;
        font-family: 'Bitter';

}

.service-content p {
      font-size: 16px;
    color: rgb(17, 17, 17);
    line-height: 23px;
    margin-bottom: 12px;
}

.highlight-question {
  color: red;
  font-weight: 500;
}

.service-img {
height: 225px;
    width: 225px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {

  .timeline {
    padding-left: 25px;
  }

  .medical-title {
    font-size: 28px;
  }

  .dot-2 {
    top: 100%;
  }
}
  /* height: 100%; */