.comparison {
  background: #ffffff;
  padding: 100px 0;
}

.comparison-title {
  font-size: 40px;
  font-weight: 700;
  color: #0f172a;
}

.comparison-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}

.traditional {
  color: #ef4444;
}

.jetzet {
  color: #1ba7a7;
}

.comparison-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  margin-bottom: 18px;
  border-radius: 14px;
  transition: all 0.3s ease;
}

.traditional-item {
  background: #fbeaea;
  border: 1px solid #f5c2c2;
  color: #8b1c1c;
}

.traditional-item i {
  color: #ef4444;
}

.jetzet-item {
  background: #e6f4f4;
  border: 1px solid #bce3e3;
  color: #0f172a;
}

.jetzet-item i {
  color: #1ba7a7;
}

.comparison-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.jetzet-item:hover {
  background: rgba(27,167,167,0.08);
  border-color: #1ba7a7;
}

.comparison-footer {
  margin-top: 60px;
  font-size: 20px;
  font-weight: 600;
  color: #0f172a;
}

/* ===============================
   MOBILE COMPARISON FIX
================================= */

@media (max-width:768px){

  .comparison .row{
    --bs-gutter-x:10px;   /* reduce bootstrap gutter */
  }

  .comparison-title{
    font-size:26px;
  }

  .comparison-label{
    font-size:12px;
  }

  .comparison-item{
    padding:10px;
    font-size:12px;
    margin-bottom:10px;
  }

  .comparison-item span{
    font-size:12px;
  }

  .comparison-item i{
    font-size:13px;
  }

}