.header-logo-text {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.header-logo-text .logo img {
    max-height: 60px;
}

.header-logo-text .site-title {
    margin-left: 15px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #004466;
}


.goajs-readmore {
  color: var(--goajs-dark);
  font-weight: 600;
  text-decoration: underline;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .goajs-features {
    grid-template-columns: 1fr;
  }

  .goajs-bottom-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .goajs-bottom-img {
    width: 100%;
    max-width: 360px;
  }
}
3) Load Font Awesome (once)
Settings → Website → Advanced → Additional Content → Header

html
Copy
Edit
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />
(Or bundle your own icons/SVGs if you prefer no CDN.)

Where exactly in OJS?
Fastest:

Paste HTML in Website → Appearance → Homepage content.

Upload the CSS under Website → Appearance → Theme → Upload Custom Stylesheet.

Reusable on multiple pages:

Create it as a Custom Block (Plugins → Custom Block Manager), then position it in a sidebar or in a theme template.

If you tell me which theme (Default, Bootstrap, Health Sciences, etc.) you’re on and where you want this section to appear (homepage only, below the slider, etc.), I can give you the exact file / hook or template override to drop it into.