/* Template css resource: Core 8 - Fluid - Module subdocuments - Homepage items */
/* Module: blue-features
Purpose: styles for the features block (kept in its own module file)
*/
.blue-features {
background: #11423F; /* deep blue */
color: #fff;
/* increase top spacing so there's more room above the block */
padding: 50px 0 60px;
/* full-bleed background even when inside a centered container */
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 40px;
width: 100vw;
}
.blue-features .inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
display: grid;
/* make left column slightly smaller so right features get more space */
grid-template-columns: 30% 70%;
gap: 40px;
align-items: start;
}
.blue-features__left { grid-column: 1 / 2; }
.blue-features__left .eyebrow {
display: block;
color: #cfc441!important;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 10px;
font-size: 13px;
}
.blue-features__left h2 {
margin: 0 0 10px 0;
font-size: 36px;
line-height: 1.05;
}
.blue-features__left .cta-link a {
color: #fff;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
opacity: 0.95;
}
.blue-features__cols {
display: grid;
/* allow feature cells to grow a bit wider while still collapsing nicely */
grid-template-columns: repeat(2, minmax(260px, 1fr));
gap: 28px 32px;
}
.blue-features__col {
/* kept for backwards-compatibility, but features are flattened */
display: contents;
}
.blue-feature {
/* use a small 2-col grid so the icon column is fixed and the content column
can take the remaining width — this helps the text be wider and align
consistently across rows */
display: grid;
grid-template-columns: 56px 1fr;
gap: 18px;
align-items: start;
width: 100%;
}
.blue-feature .icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
}
.blue-feature svg { width: 64px; height: 64px; fill: #f5b700 }
.blue-feature .icon img { width: 64px; height: 64px; display: block; object-fit: contain; }
.blue-feature h3 {
margin: 0 0 6px 0;
/* responsive font size: scales between 16px and ~22px */
font-size: clamp(1rem, calc(1rem + 0.6vw), 1.375rem);
line-height: 1.08;
}
.blue-feature p {
margin: 0;
opacity: 0.95;
max-width: none;
/* responsive paragraph size for feature items */
font-size: clamp(0.875rem, calc(0.9rem + 0.4vw), 1rem);
line-height: 1.45;
}
@media (max-width: 900px) {
/* reduce the outer padding a bit on smaller screens */
.blue-features { padding: 60px 0 40px; }
.blue-features .inner { grid-template-columns: 1fr; padding: 40px 20px; }
.blue-features__cols { grid-template-columns: 1fr; gap: 20px; }
.blue-features__left { grid-column: 1 / -1; }
.blue-features__left h2 { font-size: 28px; }
/* make the icon a touch smaller on narrower screens */
.blue-feature { grid-template-columns: 48px 1fr; }
.blue-feature .icon { width: 48px; height: 48px; }
.blue-feature svg { width: 26px; height: 26px; }
}
@media (max-width: 480px) {
/* compact adjustments for very small devices */
.blue-features { padding: 48px 0 32px; }
.blue-feature { grid-template-columns: 44px 1fr; }
.blue-feature .icon { width: 44px; height: 44px; }
.blue-feature svg { width: 22px; height: 22px; }
}
/* fixes 12-5-2026 hv ivm overflow */
.blue-features {
left: unset;
right: unset;
margin-left: unset;
margin-right: unset;
width: auto;
overflow: hidden;
}