/* Features */
.features { 
  color: var(--navy);
  padding: 60px 15%; 
}

.features h2 { 
  color: black; 
  font-size:2rem; 
  margin-bottom:40px; 
}

.features-grid { 
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.feature-card {
  padding: 15px;
}

.feature-card a {
  display:block;
  aspect-ratio: 16 / 10;
  overflow:hidden;
  border-radius:10px;
}

.feature-card img {
  width:100%;
  height: auto;
  object-fit:cover;
}

.feature-card img:hover{
  transform: translateY(-6px);
  transition: all .25s ease;
} 
/* Pricing */
.pricing { 
  color: #333; 
  padding:60px 10%; 
  background:#f3f4f6e1; 
}

.pricing h2 { 
  text-align:center; 
  font-size:2rem; 
  margin-bottom:40px; 
}

.pricing-cards { 
  display:grid; 
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); 
  gap:30px; 
}

.card { 
  background:#fff; 
  padding:30px; 
  border-radius:10px;
  box-shadow:0 2px 10px 
  rgba(0,0,0,0.05); 
  text-align:center; 
}

.card .price { 
  font-size:2rem; 
  font-weight:bold; 
  margin:20px 0; 
}

.card ul { 
  list-style:none; 
  margin:20px 0; 
  padding:0; 
}

.card ul li { 
  margin-bottom:10px; 
}

/* Responsive */
@media (max-width:768px){

  .hero{
    padding: 140px 20px 60px;
  }

  .nav{
    gap:15px;
  }

  .hero { 
    flex-direction:column-reverse; 
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

}