/* modify retype
*/

  /* wider content */
  .max-w-core { max-width: 1800px; }
  .px-6, .pt-6 { padding: 0; }

  /* hide the retype page name */
  #saasmake { display: none; }

  /* remove the underline */
  a.w3-button { text-decoration: none !important; }

  /* make svg's transparent for dark/light mode */
  svg { background-color: none; }
  
  /* css for home.html
*/

html {
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
}

.gutter-16 > * { margin: 16px ! important; }
.gutter-32 > * { margin: 32px ! important; }

.w3-primary { background: #502bcf; color: white; }
.w3-text-primary { color: #502bcf !important; }
.w3-border-primary { border: 1px solid #502bcf; }

/* https://stackoverflow.com/questions/33451683/pen-highlighter-effect-in-css */
.highlighter {
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(to right, rgba(0, 225, 0, 0.1), rgba(255, 225, 0, 0.7) 4%, rgba(255, 225, 0, 0.3));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.page-content, 
.page-content .w3-bar
{
  max-width: 1366px;
}

.page-content {
  margin: auto;
}

.center-container {
  display: flex;
  flex-direction: column; /* Stack cards vertically */
  align-items: center; /* Center cards horizontally */
}

.why-card {
  width: 100%;
  max-width: 48em;
  background-color: white;
  padding: 0.5em 1em;
  margin: 1em;
  color: #502bcf;
  border-radius: 0.5em;
  box-shadow: none;
}

body { 
  font-size: 14px; 
  font-family: 'Segoe UI', 'Helvetica', sans serif;
  margin: 0; 
  padding: 0;
}

.hero-section {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem;
}

.hero-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-image {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.hero-title {
  font-size: 3.5rem;
  line-height: 4.35rem;
  font-weight: 500;
  font-weight: 500;
}
  
.hero-subtitle {
  font-size: 1.45rem;
  line-height: 2.0rem;
}

@media (min-width: 1024px) {
  .hero-section {
    flex-direction: row;
  }
  .hero-column {
    width: 100%;
  }
}

@media (max-width: 512px) {
  .hero-title {
    font-size: 2.5rem;
    line-height: 2.85rem;
    font-weight: 450;
  }
}

.feature {
  padding: 0 1rem;
  background: #f8f8f8;
  color: #502bcf;
  text-align: left;
  border-radius: 5px;
  font-size: 1.5em;
}
.feature * {
  display: inline-block;
}
.feature i { padding-right: 1rem; font-size: 1.3em; }
.feature > p  { font-size: 1em; font-weight: 500; }

/* Animation */