<style>


/* ================= HERO SECTION (Fixed Structure) ================= */

/* 1. The Master Container: Centers the block on the page */
.hero-content {
  display: flex ;
  flex-direction: column ;
  align-items: flex-start ; /* Forces everything to the left */
  text-align: left ;       /* Forces text to align left */
  max-width: 720px ;
  margin: 0 auto ;        /* Centers the whole block */
}

/* 2. Global font/color for all hero text */
.hero-content h1,
.hero-content p,
.hero-content li,
.hero-content strong {
  font-family: 'Montserrat', Arial, sans-serif ;
  color: #020540 ;
  text-align: left ;
}

/* 3. Sizing Hierarchy */
.hero-content h1 {
  font-size: 2.5rem ;
  margin-bottom: 1rem ;
}

.hero-content p {
  font-size: 1.2rem ;
  line-height: 1.6 ;
  margin: 0 ;
}

/* 4. The Bullet List (The "Gap" Fix) */
.hero-bullets {
  list-style: none ;
  padding: 0 ;
  margin: 1rem 0 ;
  width: 100% ;
}

.hero-bullets li {
  font-size: 1.2rem ;
  position: relative ;
  padding-left: 1.5rem ; /* Controls distance between bullet and text */
  margin-bottom: 0.5rem ;
  display: block ;      /* Ensures they don't try to inline */
}

.hero-bullets li::before {
  content: "•" ;
  position: absolute ;
  left: 0 ;             /* Snaps bullet to the far left */
  color: #157EBF ;
  font-weight: bold ;
  font-size: 1.4em ;
}

/* 5. Footer/Strong Text */
.hero-content strong.hero-footer {
  display: block ;
  margin-top: 1.5rem ;
  font-size: 1.15rem ;
  font-weight: 700 ;
}



  .hero-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    padding: 0 1rem 2rem;
  }
  .hero-image-container {
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #020540;
    overflow: hidden;
  }
  .full-width-contain-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
 
  .hero-ctas {
    display: flex;
    gap: 1rem;
    margin: 3rem auto 0;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cta-button {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
  }
  .cta-button.primary {
    background: #157EBF;
    color: white;
  }
  .cta-button.primary:hover {
    background: #1252A6;
    transform: translateY(-1px);
  }
  .cta-button.secondary {
    background: transparent;
    color: #157EBF;
    border: 2px solid #157EBF;
  }
  .cta-button.secondary:hover {
    background: #f0f7fc;
  }
  .hero-trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5rem;
    padding: 1.5rem 1rem 0;
    border-top: 1px solid #eaeaea;
    margin-top: 3rem;
    width: 100%;
    max-width: 800px;
  }
  .trust-item {
    font-size: 0.95rem;
    color: #444;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .trust-num {
    font-weight: 700;
    color: #157EBF;
    font-size: 1.1rem;
  }
  
  @media (max-width: 600px) {
    .hero-ctas { flex-direction: column; align-items: center; }
    .cta-button { width: 100%; max-width: 300px; text-align: center; }
    .hero-trust-strip { gap: 1rem; flex-direction: column; align-items: center; }
  }
</style>

