/* styles-products.css */

/* --- Footer CTA Section --- */
#cta {
  background-color: var(--primary); /* Uses the warm orange from base */
  padding: 60px 0;
  color: #fff; 
  text-align: center;
  position: relative; 
  margin-top: 50px;
}

#cta .wrap {
  max-width: 1000px; 
  margin: 0 auto; 
}

#cta h2 {
  font-size: 2.5rem; 
  margin-bottom: 20px; 
}

#cta .sub {
  font-size: 1.125rem; 
  margin-bottom: 30px; 
}

#cta .btn {
  font-size: 1rem;
  padding: 15px 30px;
  background-color: var(--accent); /* Uses navy from base */
  color: #fff; 
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}

#cta .btn:hover {
  background-color: #001a38; /* Darker navy for hover */
}

/* --- Oval Button --- */
#cta .oval-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  font-size: 1.2rem;
  padding: 18px 40px; 
  background-color: #fff; 
  color: var(--primary); 
  border: 2px solid var(--primary); 
  border-radius: 50px; 
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  z-index: 10; 
  transition: all 0.3s ease; 
}

#cta .oval-btn:hover {
  background-color: var(--primary); 
  color: #fff; 
  border-color: var(--primary); 
}

/* --- Product Container Layout --- */
.product-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two columns for the first row */
  grid-gap: 30px; 
  margin-top: 30px;
}

/* Ensure product cards are properly styled */
.product-card {
  background-color: var(--secondary);
  padding: 30px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Adjust the images inside product cards */
.product-card img.product-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 20px;
}

/* Heading styles */
.product-card h2 {
  font-size: 28px;
  margin-bottom: 15px;
}

.product-card .card h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

/* Investment Options card that should span the full width (second row) */
.product-container .product-card:nth-child(3) {
  grid-column: span 2; 
  margin-top: 30px; 
}

/* Ensure the hero section content is spaced properly */
.hero-content {
  margin-bottom: 50px;
}