/* .hero-content { 
  display: grid; 
  grid-template-columns: 1fr; 
  align-items: center; 
  gap: calc(var(--spacing-unit) * 4); 
  text-align: center; 
} */

.hero-container {
  background: #0B1D37;
  padding: 20px 20px;
}

.hero-content {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-unit) * 3);
  margin: 0 30px; 
  flex-wrap: wrap;
}

.hero-text {
  flex: 1 100px;   
}

.hero-text h1 {
  color: #F5F5F5;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: bold;
  font-size: 64px;
  letter-spacing: -2%;
  margin-bottom: calc(var(--spacing-unit) * 2);
  min-width: 300px;
}

.hero-text h2 {
  color: #F5F5F5;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  /* regular */
  font-size: 32px;
  letter-spacing: -2%;
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.hero-signup-text {
  color: #F5F5F5;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  /* light */
  font-size: 28px;
  letter-spacing: -2%;
  max-width: 600px;
  /* margin: 0 auto calc(var(--spacing-unit) * 3) auto; */
  padding-top: var(--spacing-unit);
  line-height: normal;
}

.hero-btn {
  background: #FFB300;
  color: #0F1113;
}

.hero-btn:hover {
  opacity: 0.85;
}

.hero-image {
  position: relative;
  width: 400px; /* Adjust based on your image size */
  height: 600px;
  margin: 50px auto;
}

/* .hero-image { */
  /* max-width: 400px; */
  /* margin: 0 auto; */
  /* filter: drop-shadow(var(--shadow-medium)); */

  /* position: relative; */
  /* width: 100%; */
/* } */


.image {
  position: absolute;
  width: 75%; /* Ensures they are the same size */
  transition: transform 0.3s ease; /* Optional: for hover effects */
}

.back {
  /* top: 5px;  */
  bottom: 10px; 
  right: 0;
  z-index: 1; /* Lower number stays behind */
}

.front {
  bottom: 0;
  left: 0;
  right: 100px;
  width: 60%;
  z-index: 2; /* Higher number stays on top */
  /* Optional: add a shadow to create depth */
  box-shadow: -10px 10px 30px rgba(0,0,0,0.3);
}