table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
    align-self: center;
}
    
@media (max-width: 768px) { /* Adjust the breakpoint as needed */
  table {
    width: 100%; /* Width for smaller screens (mobile) */
  }
}
    
.table-container {
  overflow-x: auto;
}
    
td, th {
  border-bottom: 1px solid #000;
    border-top: none;
    border-left: none;
    border-right: none;
  text-align: center;
  padding: 8px;
    height: 50px;
}

td[data-label="Feature"] {
  text-align: left; /* Aligns feature text to the left */
}
    
tr:nth-child(even) {
  background-color: #fff;
}

.check-mark {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-image: url(ghjk/check.png);
  margin-right: 10px;
}

.cross-mark {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #f44336;
  margin-right: 10px;
}

.question-mark {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #008CBA;
  margin-right: 10px;
}
    
.gradient-text {
  background: linear-gradient(to right, #313233, #5593bd); /* Define the gradient colors */
  -webkit-background-clip: text; /* Clips the background to the text */
  -webkit-text-fill-color: transparent; /* Makes the text color transparent */
}