.services {
   padding: 4rem 1rem;
   max-width: 1200px;
   margin: 0 auto;
}

.services__heading {
   text-align: center;
   margin-bottom: 3rem;
}

.services__title {
   font-size: 2.5rem;
   font-weight: 700;
   color: #333;
   margin-bottom: 1rem;
}

.services__title-highlight {
   color: #149c9c;
}

.services__description {
   font-size: 1.1rem;
   color: #555;
   max-width: 700px;
   margin: 0 auto;
   line-height: 1.6;
}

.services__grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 2rem;
}

.service-card {
   background-color: #f5f5f5;
   border-radius: 10px;
   padding: 2rem;
   text-align: center;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.service-card__icon-container {
   width: 80px;
   height: 80px;
   background-color: #8c9aa9;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1.5rem;
}

.service-card__icon {
   width: 40px;
   height: 40px;
   color: white;
}

.service-card__title {
   font-size: 1.5rem;
   font-weight: 700;
   margin-bottom: 1rem;
   color: #333;
}

.service-card__description {
   color: #555;
   line-height: 1.6;
   margin-bottom: 1rem;
}

.service-card__list {
   list-style: none;
   padding: 0;
   margin: 0;
   text-align: center;
}

.service-card__list-item {
   margin-bottom: 0.5rem;
   color: #555;
   line-height: 1.6;
}


/* Loading spinner styles */
.loading-spinner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   grid-column: 1 / -1;
   padding: 2rem;
}

.spinner {
   width: 50px;
   height: 50px;
   border: 5px solid rgba(0, 0, 0, 0.1);
   border-radius: 50%;
   border-top-color: #3498db;
   animation: spin 1s ease-in-out infinite;
   margin-bottom: 1rem;
}

@keyframes spin {
   to { transform: rotate(360deg); }
}

/* Error state styles */
.error-state {
   grid-column: 1 / -1;
   text-align: center;
   padding: 2rem;
   color: #e74c3c;
}

.error-state svg {
   width: 48px;
   height: 48px;
   margin-bottom: 1rem;
}

/* No services state */
.no-services {
   grid-column: 1 / -1;
   text-align: center;
   padding: 2rem;
}

/* Service card image styles */
.service-card__icon {
   width: 48px;
   height: 48px;
   object-fit: contain;
}

/* Responsive Design */
@media (max-width: 767px) {
   .services__title {
       font-size: 2rem;
   }
   
   .services__grid {
       grid-template-columns: 1fr;
   }
}