/* Onyx's changes to the template. The template's lime accent is replaced by Onyx's teal in custom.css (--accent-color)
   and in the svg icons; what follows fixes what that change leaves behind. */
.email-reveal { font: inherit; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; }

/* the Onyx logo is a wide wordmark; the template's was a small square mark */
.navbar-brand img { height: 38px; width: auto; max-width: none; }




/* headings centred where the template relied on a wrapper we do not have */
.section-title-center { text-align: center; }
.security-note { padding: 0 0 70px; }
.security-note .section-footer-text { margin-top: 0; }

/* the phone menu sits on teal, so its links are white */
.slicknav_nav li a, .slicknav_nav .slicknav_row, .slicknav_nav a:hover, .slicknav_nav a:focus, .slicknav_nav .slicknav_row:hover { color: #fff; }

/* the dark link colour on dark sections, so the teal links stay readable */
.dark-section-prime .section-footer-text a { color: #7fd6e8; }

/* the footer opens with the call to action, and closes with the big faded name */
.footer-cta-prime { max-width: 460px; }
.footer-cta-prime p { color: var(--white-color); margin-bottom: 24px; }
.main-footer-prime > .container, .footer-header-prime { position: relative; z-index: 1; }
/* the watermark closes the footer as the template's did, and the copyright line is moved down onto it */
.footer-bg-title-prime { position: relative; z-index: 0; text-align: center; margin-top: -140px; user-select: none; pointer-events: none; }
.footer-bg-title-prime h2 { font-size: 340px; color: var(--dark-divider-color); line-height: 0.9em; margin-bottom: -80px; }
@media (max-width: 991px) { .footer-bg-title-prime h2 { font-size: 160px; margin-bottom: -40px; } .footer-bg-title-prime { margin-top: -60px; } }
.footer-copyright-text-prime { margin-bottom: -100px; }
.footer-copyright-text-prime a { color: inherit; text-decoration: underline; }

/* the "one platform" boxes: plain panels and pills where the template had pictures of a fictional finance app */
.onyx-panel { list-style: none; margin: 0; padding: 22px; border-radius: 10px; background: var(--primary-color); color: var(--white-color); }
.onyx-panel li { padding: 12px 0; border-bottom: 1px solid var(--dark-divider-color); font-weight: 600; }
.onyx-panel li:last-child { border-bottom: 0; }
.what-we-do-box-1-image .onyx-panel { aspect-ratio: 1 / 0.92; display: flex; flex-direction: column; justify-content: center; }
.onyx-panel-rows li { display: flex; flex-direction: column; gap: 2px; }
.onyx-panel-rows em { font-style: normal; font-weight: 400; font-size: 14px; color: #7fd6e8; }
.onyx-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.onyx-pills span { padding: 8px 16px; border-radius: 100px; background: var(--white-color); font-weight: 600; font-size: 14px; transform: rotate(-3deg); }
.onyx-pills span:nth-child(3n+2) { background: var(--primary-color); color: var(--white-color); transform: rotate(3deg); }
.onyx-pills span:nth-child(3n) { background: var(--accent-color); transform: rotate(-1deg); }

/* the contact form's hidden field for catching programs */
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#msgSubmit { margin-top: 20px; font-size: 20px; }

/* pills: dark text on the light and teal ones, white on the dark ones */
.onyx-pills span { color: var(--primary-color); }
.onyx-pills span:nth-child(3n+2) { color: var(--white-color); }

/* the contact page's heading sits on the template's dark panel, so it reads light */
.contact-us-body .section-title h3 { color: var(--white-color); background: var(--dark-divider-color); }
.contact-us-body .section-title h2 { color: var(--white-color); }
.contact-us-body .section-title p { color: var(--white-color); opacity: 0.85; }

/* the hero headline is long and its column is narrower than the template's, so it is set smaller */
.hero-content-prime .section-title h1 { font-size: clamp(38px, 4.4vw, 64px); }

/* ---- icons ----
   The template drew some icons with the Font Awesome font, which is not part of this site, so they showed as empty boxes.
   Each is redrawn here as a Lucide icon (the files are in /icons). */

/* the ticks in front of list items: a Lucide circle-check in the colour the template gave the glyph */
.about-us-item-content-prime ul li::before, .benefits-body-list-prime ul li::before, .cta-feature-list-prime ul li::before,
.why-choose-item h3::before, .core-feature-item h3::before, .pricing-item-list ul li::before,
.team-expertise-item-list ul li::before, .what-we-body-item-list-royal ul li::before,
.why-choose-item-list-royal ul li::before, .pricing-item-list-royal ul li::before {
	content: '';
	width: 1.1em;
	height: 1.1em;
	background-color: currentColor;
	-webkit-mask: url('/icons/circle-check.svg') center / contain no-repeat;
	mask: url('/icons/circle-check.svg') center / contain no-repeat;
}

/* the plus and minus in the FAQ's circle */
.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after {
	content: '';
	background-image: url('/icons/plus-dark.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px;
}
.faq-accordion .accordion-button:not(.collapsed)::after {
	content: '';
	background-image: url('/icons/minus-dark.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px;
}

/* the template's icon images are now inline Lucide icons, drawn in the dark colour of the box they sit on */
.icon-box svg { position: relative; z-index: 1; width: 28px; height: 28px; color: var(--primary-color); display: block; transition: color 0.4s ease-in-out; }
/* some boxes fill with dark when hovered or active, and their icon turns light to stay visible */
.about-us-item-prime:hover .icon-box svg, .about-us-item-prime.active .icon-box svg, .approach-item:hover .icon-box svg,
.feature-item:hover .icon-box svg, .why-choose-item-prime:hover .icon-box svg { color: var(--white-color); }
/* the boxes that turn white on hover (the feature cards, the hero items, the contact line) keep the dark icon */
.satisfy-client-image.add-more svg { width: 22px; height: 22px; color: var(--primary-color); }