/* services.css */

/* Services Section Styles */
.services {
  padding-bottom: 20px;
}

/* 1. Center the section title text */
.services .section-title {
  text-align: center;
  color:#fff
}

/* Optional: center the paragraphs inside the section title as well */
.services .section-title p {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px; /* Optional max width for better readability */
}

.services .service-card-row {
  margin-top: 40px;
  display: flex;
  flex-wrap: nowrap; /* Prevent wrapping */
  justify-content: center;
  gap: 24px; /* Horizontal gap between cards */
  max-width: 1200px; /* maximum container width */
  margin-left: auto;
  margin-right: auto;

  padding-top: 40px;    /* Added padding above cards */
  padding-bottom: 40px; /* Added padding below cards */
  padding-left: 0px;   /* Horizontal padding left with units */
  padding-right: 0px;  /* Added horizontal padding to right */
  overflow-x: auto;     /* Optional: allow horizontal scroll if smaller */
}


/* Service card styling */
.services .service-card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  margin-right: 30px;

  flex: 0 0 380px; /* fixed width to avoid shrink/grow */
  max-width: 380px;
  box-sizing: border-box;
}

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

.services .service-icon {
  font-size: 40px;
  color: var(--color-primary);
  margin-bottom: 15px;
  text-align: left;
}

.services .service-card h4 {
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--color-dark);
  text-align: left;
}

.services .service-card p {
  font-size: 14px;
  margin-bottom: 12px;
  color: #5a5a5a;
  text-align: left;
}

.services .service-card a {
  font-size: 16px;
  margin-top: auto;
  font-weight: 500;
  color: #2282ff; /* brand blue */
  text-decoration: none;
  text-align: left;
  transition: color 0.3s ease;
}

.services .service-card:hover {
  color: #1a5fcc; /* darker blue on hover */
}


.services .service-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 15px 0;
  text-align: left;
}

.services .service-card ul li {
  font-size: 14px;
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
}

.services .service-card ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: bold;
}

.services .service-link {
  margin-top: auto;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  text-align: left;
  transition: color 0.3s ease;
}

.services .service-link:hover {
  color: var(--color-primary-dark);
}

/* Service card color variations for icons */
.services .icon-box-red .service-icon {
  color: #ff687c;
}

.services .icon-box-pink .service-icon {
  color: #ff689b;
}

.services .icon-box-cyan .service-icon {
  color: #3fcdc7;
}

.services .icon-box-green .service-icon {
  color: #41cf2e;
}

.services .icon-box-blue .service-icon {
  color: #2282ff;
}

/* Responsive: stack vertically below 720px */
@media (max-width: 720px) {
  .services .service-card-row {
    flex-wrap: wrap; /* allow wrapping on small devices */
    gap: 20px;
  }

  .services .service-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}
.services .service-card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 24px; /* consistent gap between cards */
  max-width: 1200px;
  margin: 0px auto 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.services .service-card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  
  /* No fixed width needed — grid controls layout */
  box-sizing: border-box;
}

/* Responsive stacking */
@media (max-width: 720px) {
  .services .service-card-row {
    grid-template-columns: 1fr;
  }
}

/* Container padding safe defaults */
.services .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px; /* Default side padding for small screens */
  box-sizing: border-box;
}

/* Remove container horizontal padding on very large screens */
@media (min-width: 1200px) {
  .services .container {
    padding-left: 0;
    padding-right: 0; /* Full container width at large screens */
  }
}