/* ================= SERVICES ================= */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
  align-items: stretch;
}

.service-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: white;
    padding: 38px 30px;
    border: 1px solid #f0ede6;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
    width: 100%;
    height: 100%;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.18);
}

.service-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 100%;
  background: #00649F;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s ease;
}

.service-card:hover::before { transform: scaleY(1); }

.service-card h3 {
  font-family: "Libre Baskerville", serif;
  font-size: 20px;
  text-align: center;
  margin-bottom: 18px;
  color: #1f2a44;
}

.service-card p { text-align: justify; line-height: 1.7; color: #555; font-size: 15px; }

.service-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-color: #E6ECEF;
  text-decoration: none;
}

.service-link::before {
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  background:#00649F;
  opacity:0.25;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s ease;
}

.service-link:hover { transform: translateY(-8px); box-shadow:0 18px 38px rgba(0,0,0,0.18); }
.service-link:hover::after { opacity:1; transform: translateX(5px); }
.service-link::after { content:"→"; position:absolute; right:22px; bottom:20px; font-size:18px; opacity:0; transition:all .3s ease; }
.service-link:active { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,0.12); }