main {
  display: grid;
  gap: 2em;
  inline-size: clamp(20em, 90vw, 1200px);
  margin-block: 2em;
  margin-inline: auto;
  padding: 1em;
}

.search {
  margin-bottom: 2em;
}

.search label {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.search .labelText {
  font-weight: 600;
  color: #333;
}

.search input {
  padding: 0.75em;
  border: 2px solid #ddd;
  border-radius: 0.5em;
  font-size: 1em;
  transition: border-color 0.3s ease;
}

.search input:focus {
  outline: none;
  border-color: #28a745;
}

.services-page .cards {
  margin-bottom: 2em;
}

.services-page .cards .col-3 {
  margin-bottom: 2em;
}

.services-page .card {
  background: white;
  border-radius: 1em;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.services-page .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.services-page .card-header {
  background: #28a745;
  color: white;
  padding: 1.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.services-page .card-title {
  font-size: 1.25em;
  font-weight: 600;
  margin: 0;
}

.services-page .card-icon {
  font-size: 2em;
  opacity: 0.8;
}

.services-page .card-content {
  padding: 1.5em;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.services-page .card-description {
  color: #666;
  margin-bottom: 1.5em;
  line-height: 1.6;
  flex-grow: 1;
}

.services-page .keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 1.5em;
}

.services-page .keywords span {
  background: #e8f5e8;
  color: #28a745;
  border: 1px solid #28a745;
  border-radius: 1em;
  padding: 0.5em 1em;
  font-size: 0.8em;
  font-weight: 500;
  transition: all 0.3s ease;
}

.services-page .keywords span:hover {
  background: #28a745;
  color: white;
}

.services-page .card-button {
  background: #28a745;
  color: white;
  border: none;
  border-radius: 0.5em;
  padding: 0.75em 1.5em;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.services-page .card-button:hover {
  background: #218838;
  color: white;
  text-decoration: none;
}

@media (max-width: 768px) {
 .services-page .cards {
    grid-template-columns: 1fr;
  }
  
  main {
    padding: 0.5em;
  }
  
  .services-page .card-header,
  .services-page .card-content {
    padding: 1em;
  }
  
}
.services-page .card-text {
       overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 3; /* number of lines to show */
           line-clamp: 3; 
   -webkit-box-orient: vertical;
  }
   .services-page a:hover, .services-page a:visited, .services-page a:active {
    text-decoration: none;
    color: #FFF;
  }