.section-title-2 {
    font-size: 48px;
    font-weight: 700;
    color: balck;
    margin-bottom: 1rem;
    line-height: 1.2;
}

/* 1) Center icon + text inside each hero button */
.btn-hero-primary,
.btn-hero-secondary {
  justify-content: center;  /* was missing in global.css flex setup */  
}



/* 2) (Optional) Make the whole button-row sit in the middle of its container */
.hero-actions {
  justify-content: center;  /* center the flex-row of buttons */
}


.btn-secondary{
  justify-content: center;  /* was missing in global.css flex setup */  
}


/* 1) Center icon + text inside each CTA button */
.btn-cta-primary,
.btn-cta-secondary {
  justify-content: center;  /* override the default flex-start */  
}

/* 2) Center the buttons within the CTA block */
.cta-actions {
  justify-content: center;  /* center the flex-row of buttons */  
  /* (optional) if you need the whole block itself to shrink-and-center: */
  /* margin: 0 auto; */
}

/* 1) Center the icon + text within the secondary button */
.btn-secondary {
  /* already has display:flex and align-items:center */
  justify-content: center;  
}

/* 2) Turn the wrapper into a flex-container and center its child */
.features-action {
  display: flex;           /* make the div a flex container */
  justify-content: center; /* center its contents horizontally */
  align-items: center;     /* (optional) center vertically if you ever change the wrapper’s height */
}