.apart-section {
  padding: 48px 12px;
  /* background: #f7f8fc; */
  text-align: center;
}

.apart-title {
  font-size: 2.1rem;
  color: #194a76;
  font-weight: 800;
  margin-bottom: 32px;
}

.apart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  justify-content: center;
  max-width: 950px;
  margin: 0 auto;
}

.apart-card {
  background: linear-gradient(120deg, #e9f3fc 60%, #f5eafb 100%);
  border-radius: 18px;
  padding: 32px 18px 22px 18px;
  box-shadow: 0 4px 32px rgba(45, 98, 153, 0.13);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.23s, box-shadow 0.22s;
  cursor: pointer;
  border: 2px solid #e1e8f8;
  min-height: 220px;
  position: relative;
}

.apart-card:hover {
  transform: translateY(-6px) scale(1.035);
  box-shadow: 0 12px 44px 0 rgba(41, 116, 193, 0.14), 0 0px 24px #c4e8ee88;
  border-color: #a5caf7;
  background: linear-gradient(120deg, #e0f6fc 75%, #e4ddf9 100%);
}

.apart-icon {
  font-size: 2.5rem;
  margin-bottom: 14px;
  transition: text-shadow 0.3s;
  text-shadow: 0 6px 13px #b7d0fa66;
  filter: drop-shadow(0 1px 8px #68dff6);
}

.apart-card:hover .apart-icon {
  text-shadow: 0 0px 27px #a4cdfcbb;
  filter: drop-shadow(0 2px 14px #48adf6);
}

.apart-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #2776b5;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
  text-transform: capitalize;
}

.apart-desc {
  font-size: 1.01rem;
  color: #33396a;
  opacity: 0.95;
}

@media (max-width: 860px) {
  .apart-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .apart-grid { grid-template-columns: 1fr; }
  .apart-card { min-height: unset; padding: 22px 12px 18px 12px;}
}