/* Critical CSS for faster initial render */
body {
  background: #EDF3F8;
  color: #3A5A77;
  font-family: 'Satoshi', Arial, Helvetica, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

header {
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

main {
  min-height: 50vh;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Hide content until fully loaded */
.js .invisible-until-loaded {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.js.loaded .invisible-until-loaded {
  opacity: 1;
}

/* Ensure proper hero section layout */
@media (min-width: 1024px) {
  .lg\:flex-row {
    flex-direction: row !important;
  }
  
  .lg\:w-3\/5 {
    width: 60% !important;
  }
  
  .lg\:w-2\/5 {
    width: 40% !important;
  }
  
  .lg\:text-left {
    text-align: left !important;
  }
  
  .lg\:justify-start {
    justify-content: flex-start !important;
  }
}

/* Ensure image covers the hero section properly */
section[class*="relative"] img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}