/* ============================================================
wwwroot/css/home-pages.css
Configurações visuais da home original (pasta old_home_pages),
usadas pelo cabeçalho compartilhado e pelo restante do layout nestas rotas:
/ -> Home
/Solutions -> Soluções
/Contato -> Contato
/Error -> Erro
MainLayout aplica .home-pages ao cabeçalho em todas as suas rotas.
Fontes de conteúdo (old_home_pages):
wwwroot/app.css
wwwroot/css/header.css
wwwroot/css/default-table.css
wwwroot/css/modal-base.css
Layout/Header/Header.razor.css
Layout/Moderator/ModeratorSideBar.razor.css
============================================================ */
/* ------------------------------------------------------------------
0. Fontes (arquivos já pré-carregados em Components/App.razor)
------------------------------------------------------------------ */
@font-face {
font-family: "Plus Jakarta Sans Regular";
src: url("../fonts/PlusJakartaSans-Regular.ttf") format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Plus Jakarta Sans Medium";
src: url("../fonts/PlusJakartaSans-Medium.ttf") format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
/* ------------------------------------------------------------------
1. ESCOPO — tudo abaixo só tem efeito dentro de .home-pages
------------------------------------------------------------------ */
.home-pages,
.home-pages * {
font-family: "Plus Jakarta Sans Regular", sans-serif;
}
.home-pages {
background: none;
}
/* ------------------------------------------------------------------
1b. Altura de linha
O design system aplica `html, body { line-height: var(--typescale-body-medium-line-height) }`,
um valor ABSOLUTO (20px) pensado para o corpo de 14px. `line-height` é herdado
como comprimento calculado, então dentro da home — cujos títulos vão de 25px a
48px — cada linha recebia uma caixa de 20px e os glifos transbordavam, sobrepondo
a linha anterior e os blocos vizinhos.
A página original não tinha esse problema: ela era servida com o reboot do
Bootstrap 5.1, cujo `body { line-height: 1.5 }` era RELATIVO e escalava com a
fonte. Esta é a mesma condição restaurada dentro do escopo, e é ela também que
faz `.h1-title-text`/`.h2-title-text` (que são ``, não `
`/``) usarem
1.5 como na origem.
A declaração fica no wrapper e não em cada classe: é uma única condição de
herança, e todos os tamanhos do arquivo dependem dela.
------------------------------------------------------------------ */
.home-pages {
line-height: 1.5;
}
/* ------------------------------------------------------------------
2. Paleta de cores da home original
------------------------------------------------------------------ */
.home-pages {
--home-primary-orange: #eb5937;
--home-primary_orange_rgb: 235, 89, 55;
--home-primary-black: #0d0d0d;
--home-primary-white: #ffffff;
--home-primary-lavender: #e8c4f2;
--home-primary-green: #38735d;
--home-primary-yellow: #f2b705;
--home-primary-gray: #f0f0f0;
--home-primary-light_green: #E2F7F0;
--home-primary-light_yellow: #FFF8B6;
--home-primary-light_blue: #E2F1F7;
--home-primary-light_red: #FDE9E7;
--home-primary-light_gray: #F8F9FA;
--home-primary-dark_gray: #757575;
--home-primary-dark_yellow: #f2b705;
--home-primary-dark_purple: #7A0A68;
--home-primary-dark_green: #38735D;
--home-primary-dark_blue: #0B4881;
--home-primary-dark_red: #B42318;
--home-secondary-lavender: #c7b7eb;
--home-primary-orange-light: #fff4f0;
--home-primary-orange-dark: #c94729;
}
/* ------------------------------------------------------------------
2b. Aliases legados (--primary-*) — necessários porque o markup e o CSS
escopado dos componentes da home continuam usando os nomes originais:
Header.razor / Footer.razor / MobileSideBar.razor / PanelCard.razor
(Style inline), Header.razor.css (::deep a.navigation-link) e os painéis
de gestão que passam "var(--primary-orange)" às séries de gráfico.
Declarados dentro de .home-pages para resolverem no escopo da classe.
------------------------------------------------------------------ */
.home-pages {
--primary-orange: var(--home-primary-orange);
--primary_orange_rgb: var(--home-primary_orange_rgb);
--primary-black: var(--home-primary-black);
--primary-white: var(--home-primary-white);
--primary-lavender: var(--home-primary-lavender);
--primary-green: var(--home-primary-green);
--primary-yellow: var(--home-primary-yellow);
--primary-gray: var(--home-primary-gray);
--primary-light_green: var(--home-primary-light_green);
--primary-light_yellow: var(--home-primary-light_yellow);
--primary-light_blue: var(--home-primary-light_blue);
--primary-light_red: var(--home-primary-light_red);
--primary-light_gray: var(--home-primary-light_gray);
--primary-dark_gray: var(--home-primary-dark_gray);
--primary-dark_yellow: var(--home-primary-dark_yellow);
--primary-dark_purple: var(--home-primary-dark_purple);
--primary-dark_green: var(--home-primary-dark_green);
--primary-dark_blue: var(--home-primary-dark_blue);
--primary-dark_red: var(--home-primary-dark_red);
--secondary-lavender: var(--home-secondary-lavender);
--primary-orange-light: var(--home-primary-orange-light);
--primary-orange-dark: var(--home-primary-orange-dark);
}
/* ------------------------------------------------------------------
3. Overrides de tema Radzen — somente dentro de .home-pages,
para não alterar Ocorrência/Zeladoria (tokens semânticos).
------------------------------------------------------------------ */
.home-pages {
--rz-primary: var(--home-primary-orange);
--rz-primary-light: var(--home-primary-orange);
--rz-secondary: var(--home-primary-dark_gray);
--rz-datepicker-calendar-selected-hover-background-color: var(--home-primary-orange);
--rz-checkbox-checked-color: var(--home-primary-orange);
--rz-switch-checked-background-color: var(--home-primary-orange);
--rz-paginator-numeric-button-selected-color: var(--home-primary-dark_gray);
--rz-paginator-numeric-button-selected-background-color: var(--home-primary-white);
--rz-grid-header-background-color: var(--home-primary-light_gray);
--rz-grid-header-cell-padding: 1.2rem .8rem;
--rz-grid-cell-padding: 0.8rem 1.2rem;
--rz-grid-header-color: var(--home-primary-orange);
}
/* ------------------------------------------------------------------
4. Classes utilitárias de cor/preenchimento/alinhamento
------------------------------------------------------------------ */
.home-pages .f-color-white { color: var(--home-primary-white); }
.home-pages .f-color-black { color: var(--home-primary-black); }
.home-pages .f-primary-color { color: var(--home-primary-orange); }
.home-pages .f-color-gray { color: var(--home-primary-gray); }
.home-pages .f-color-dark-gray { color: var(--home-primary-dark_gray); }
.home-pages .f-color-dark-red { color: var(--home-primary-dark_red); }
.home-pages .f-color-secondary-gray { color: var(--home-secondary-lavender); }
.home-pages .bg-primary-color { background-color: var(--home-primary-orange); }
.home-pages .bg-primary-black { background-color: var(--home-primary-black); }
.home-pages .bg-primary-white { background-color: var(--home-primary-white); }
.home-pages .bg-primary-gray { background-color: var(--home-primary-gray) !important; }
.home-pages .bg-primary-dark-gray { background-color: var(--home-primary-dark_gray) !important; }
.home-pages .t-align-center { text-align: center; }
.home-pages .fill-primary-color { fill: var(--home-primary-orange) !important; }
.home-pages .fill-primary-white { fill: var(--home-primary-white) !important; }
.home-pages .fill-primary-black { fill: var(--home-primary-black) !important; }
.home-pages .fill-primary-dark-gray { fill: var(--home-primary-dark_gray) !important; }
.home-pages .fill-primary-gray { fill: var(--home-primary-gray) !important; }
/* ------------------------------------------------------------------
5. Botões e itens de ação da home original
------------------------------------------------------------------ */
.home-pages .btn-std {
font-weight: 400;
border-radius: .6rem;
background-color: var(--home-primary-orange);
border: none;
}
.home-pages .btn-home {
margin-top: 1rem;
padding: .4rem .6rem;
padding-right: .4rem;
white-space: nowrap;
}
.home-pages .arrow-icon { width: 30px; margin-right: .4rem; }
.home-pages .expand-arrow-icon {}
.home-pages .expand-arrow-icon:hover { cursor: pointer; }
.home-pages .arrow-expanded { transform: rotate(0.5turn); }
.home-pages .hvr-txt-black:hover {
color: var(--home-primary-black);
transition: .6s;
}
.home-pages .hvr-txt-black:hover .svg-arrow { fill: var(--home-primary-black) !important; transition: .6s; }
.home-pages .hvr-txt-black:hover .plus-signal { fill: var(--home-primary-black) !important; transition: .6s; }
.home-pages .svg-arrow { fill: var(--home-primary-white); }
.home-pages .btn-hvr:hover {
background-color: var(--home-primary-white);
color: var(--home-primary-orange);
transition: .6s;
}
.home-pages .btn-hvr:hover .svg-arrow { fill: var(--home-primary-orange); transition: .6s; }
.home-pages .plus-signal { fill: var(--home-primary-white) !important; }
.home-pages .cm-btn { color: var(--home-primary-dark_gray); }
.home-pages .cm-btn .modal-control-icon { fill: var(--home-primary-dark_gray); }
.home-pages .cm-btn:hover {
background-color: var(--home-primary-white);
color: var(--home-primary-orange) !important;
transition: .4s;
}
.home-pages .cm-btn:hover .modal-control-icon { fill: var(--home-primary-orange) !important; transition: .4s; }
.home-pages .cm-btn .modal-control-icon { width: 18px !important; margin-right: 4px; }
.home-pages .color-log {
border: none;
border-radius: 2rem;
text-align: center;
text-transform: uppercase;
}
.home-pages .color-log-blue, .home-pages .color-log-blue span {
color: var(--home-primary-dark_blue) !important;
background-color: var(--home-primary-light_blue) !important;
}
.home-pages .color-log-red, .home-pages .color-log-red span {
color: var(--home-primary-dark_red) !important;
background-color: var(--home-primary-light_red) !important;
}
.home-pages .color-log-purple, .home-pages .color-log-purple span {
color: var(--home-primary-dark_purple) !important;
background-color: var(--home-primary-lavender) !important;
}
.home-pages .color-log-green, .home-pages .color-log-green span, .home-pages .color-log-green li {
color: var(--home-primary-dark_green) !important;
background-color: var(--home-primary-light_green) !important;
}
.home-pages .color-log-yellow, .home-pages .color-log-yellow span {
color: var(--home-primary-orange) !important;
background-color: var(--home-primary-light_yellow) !important;
}
.home-pages .color-log-gray, .home-pages .color-log-gray span {
color: var(--home-primary-dark_gray) !important;
background-color: var(--home-primary-gray) !important;
}
/* panel icon */
.home-pages .panel-icon {
width: 25px;
height: 25px;
fill: var(--home-primary-orange) !important;
display: block;
}
/* ------------------------------------------------------------------
6. Hover pintados (dark-red-hover / dark-yellow-hover)
------------------------------------------------------------------ */
.home-pages .dark-red-hover {
transition: 0.6s;
color: var(--home-primary-gray);
}
.home-pages .dark-red-hover path { fill: var(--home-primary-dark_gray); }
.home-pages .dark-red-hover:hover span,
.home-pages .dark-red-hover:hover path {
color: var(--home-primary-dark_red) !important;
fill: var(--home-primary-dark_red) !important;
}
.home-pages .dark-yellow-hover {
transition: 0.6s;
color: var(--home-primary-gray);
}
.home-pages .dark-yellow-hover path { fill: var(--home-primary-dark_gray); }
.home-pages .dark-yellow-hover:hover span,
.home-pages .dark-yellow-hover:hover path {
color: var(--home-primary-dark_yellow) !important;
fill: var(--home-primary-dark_yellow) !important;
}
/* ------------------------------------------------------------------
7. Tamanhos de fonte da home original
------------------------------------------------------------------ */
.home-pages .f-size { font-size: 20px; font-weight: 400; }
.home-pages .f-size-sm { font-size: 14px; }
.home-pages .f-size-lg { font-size: 80px; }
.home-pages .h1-title-text {
font-size: xx-large;
font-family: "Plus Jakarta Sans Medium";
margin: 0;
padding: 0;
}
.home-pages .h2-title-text {
font-size: xx-large !important;
font-weight: 500 !important;
font-family: "Plus Jakarta Sans Medium" !important;
margin: 0;
padding: 0;
}
.home-pages .title-text {
font-family: "Plus Jakarta Sans Medium" !important;
font-weight: 500 !important;
margin: 0;
padding: 0;
}
.home-pages .description-text {
padding: 0;
margin: 0;
font-size: large;
}
.home-pages .sub-description-text {
padding: 0;
margin: 0;
font-size: large;
}
@media (min-width: 1280px) {
.home-pages .description-text { font-size: x-large; }
.home-pages .h1-title-text { font-size: xxx-large; }
}
@media (max-width: 300px) {
.home-pages .description-text { font-size: medium; }
.home-pages .h1-title-text { font-size: x-large; }
.home-pages .sub-description-text { font-size: small; }
.home-pages .h2-title-text { font-size: large; }
}
/* ------------------------------------------------------------------
8. Tabelas / datagrid (default-table.css)
------------------------------------------------------------------ */
.home-pages tbody .rz-data-row td {
background-color: var(--home-primary-white) !important;
}
.home-pages .rz-datatable { border: none; }
.home-pages .rz-grid-table td:not(:last-child) { border-right: none; }
.home-pages .rz-grid-table thead th { border-bottom: none; }
.home-pages .rz-datatable-thead th:not(:last-child),
.home-pages .rz-grid-table thead th:not(:last-child) {
border-right: none;
}
.home-pages .rz-grid-table thead th .rz-column-title-content {
text-transform: uppercase;
color: var(--home-primary-black);
font-family: "Plus Jakarta Sans Regular", sans-serif;
word-break: break-word;
}
.home-pages .table-control-icon {
width: 20px;
height: 20px;
fill: var(--home-primary-black);
}
.home-pages .table-control-icon:hover { cursor: pointer; }
.home-pages .rz-cell-data {
overflow: visible !important;
white-space: normal !important;
}
.home-pages .rz-grid-table { width: unset; }
/* ------------------------------------------------------------------
9. Gráficos Radzen (home original)
------------------------------------------------------------------ */
.home-pages .rz-chart svg { overflow: visible; }
.home-pages .rz-column-series path { opacity: .8 !important; }
.home-pages .rz-column-series path:hover { opacity: 1 !important; }
/* ------------------------------------------------------------------
10. Checkbox
------------------------------------------------------------------ */
.home-pages .rz-checkbox { font-weight: 500 !important; }
/* ------------------------------------------------------------------
11. Cartões de soluções
------------------------------------------------------------------ */
.home-pages .scrollable-row {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
padding-bottom: 10px;
}
@media (min-width: 1280px) {
.home-pages .scrollable-inner {
display: flex;
justify-content: center !important;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
flex-wrap: nowrap;
width: 100%;
}
}
@media (max-width: 1280px) {
.home-pages .scrollable-inner {
display: inline-flex;
justify-content: center;
gap: 10px;
}
}
.home-pages .solucoes-card-container {
flex-shrink: 0;
min-width: 250px;
margin: 0 5px;
}
.home-pages .solucoes-card { overflow: hidden; }
.home-pages .solucoes-card:hover { box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); }
.home-pages .solucoes-card .conteudo {
transform: translateY(40px);
transition: transform 0.6s ease;
}
.home-pages .solucoes-card:hover .conteudo { transform: translateY(0); }
.home-pages .solucoes-card .saiba-mais {
opacity: 0;
transition: opacity 0.6s ease;
text-decoration: underline;
}
.home-pages .solucoes-card .saiba-mais:hover { cursor: pointer; font-weight: 600; }
.home-pages .solucoes-card:hover .saiba-mais { opacity: 1; }
.home-pages .solution-custom-bar {}
@media (min-width: 768px) {
.home-pages .solution-custom-bar { right: 0px; top: 0px; }
}
@media (max-width: 768px) {
.home-pages .solution-custom-bar {
bottom: -25%;
right: 20%;
transform: rotate(90deg);
}
}
/* ------------------------------------------------------------------
12. Diálogos / modais (modal-base.css)
------------------------------------------------------------------ */
.home-pages .rz-dialog-titlebar { display: none !important; }
.home-pages .rz-dialog-side-titlebar { display: none !important; }
.home-pages .modal-base hr {
height: .4px !important;
margin: .4rem 0;
color: var(--home-primary-dark_gray);
background-color: var(--home-primary-dark_gray);
border: 0;
opacity: .2;
}
.home-pages .modal-control-icon {
width: 25px;
height: 25px;
fill: var(--home-primary-dark_gray);
}
.home-pages .modal-control-icon:hover { cursor: pointer; }
.home-pages .editing { fill: var(--home-primary-orange); }
.home-pages .modal-label,
.home-pages .rz-label {
margin: 0;
padding: 0;
font-family: "Plus Jakarta Sans Medium";
font-size: large;
}
.home-pages .modal-form-field-container { margin: 2rem 0; }
.home-pages .imagem-container {
width: 100%;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.home-pages .imagem-container img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
.home-pages .modal-control-icon-gray {}
.home-pages .modal-control-icon-gray:hover { transition: .6s; }
.home-pages .modal-control-icon-gray path { fill: var(--home-primary-dark_gray); }
.home-pages .modal-control-icon-gray:hover path {
fill: var(--home-primary-orange);
transition: .6s;
}
.home-pages .modal-hover-stroke-primary {
stroke-width: 0.4px;
stroke: var(--home-primary-dark_gray) !important;
fill: var(--home-primary-dark_gray) !important;
}
.home-pages .modal-hover-stroke-primary:hover {
fill: var(--home-primary-orange) !important;
stroke: var(--home-primary-orange) !important;
transition: .6s;
}
.home-pages .modal-hover-red {}
.home-pages .modal-hover-red:hover { fill: var(--home-primary-dark_red) !important; transition: .6s; }
.home-pages .modal-input-field:disabled {
color: var(--home-primary-dark_gray) !important;
background-color: transparent !important;
opacity: 1 !important;
border: none !important;
}
.home-pages .empty-message {
width: 100%;
padding: 1rem 1.5rem;
border-radius: 8px;
background-color: var(--home-primary-orange-light) !important;
color: var(--home-primary-orange) !important;
border: 1px solid var(--home-primary-orange) !important;
font-size: 1rem;
font-weight: 500;
}
/* ------------------------------------------------------------------
13. Animação de menu (header.css)
@keyframes é global por definição (não aceita escopo por seletor):
a animação fica registrada uma vez e só é USADA pelas regras
.home-pages .current-in-focus / .selected-item abaixo.
------------------------------------------------------------------ */
@keyframes expand {
0% { width: 0%; }
100% { width: 100%; }
}
.home-pages .menu-element { transition: .4s; }
.home-pages .current-in-focus,
.home-pages .selected-item {
display: block;
height: .1rem;
animation: expand .8s;
background-color: var(--home-primary-orange);
}
/* ------------------------------------------------------------------
14. Layout do cabeçalho (Header.razor.css)
------------------------------------------------------------------ */
.home-pages .base-header { padding: 1.4rem 0; }
.home-pages .item-icon { height: 38px; }
.home-pages #notification-count {
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 24px;
border-radius: 50%;
transform: translate(20%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
/* ------------------------------------------------------------------
15. Sidebar de painel (ModeratorSideBar) — apenas se usada na home
------------------------------------------------------------------ */
.home-pages .rz-navigation-item-wrapper,
.home-pages .rz-navigation-item {
overflow-x: visible;
overflow-y: visible;
}
.home-pages .rz-panel-menu .rz-navigation-item { border-color: transparent; }
.home-pages .rz-panel-menu .rz-navigation-item-wrapper:hover {
background-color: transparent;
}
.home-pages .rz-navigation-item-icon { fill: var(--home-secondary-lavender); }
.home-pages .rz-panel-menu .rz-navigation-item-icon {
height: 30px;
width: 30px;
}
.home-pages .rz-navigation-item-text {
color: var(--home-primary-dark_gray);
}
.home-pages .navigation-link {
text-decoration: none;
display: flex;
align-items: center;
}
.home-pages .active span.selected-element {
display: block;
position: absolute;
top: 8px;
left: -4.6vw;
width: 30px;
height: 30px;
background-color: var(--home-primary-orange);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.home-pages a.active .rz-navigation-item-text { color: var(--home-primary-orange); }
.home-pages a.active .rz-navigation-item-icon { fill: var(--home-primary-orange); }
/* ------------------------------------------------------------------
16. Componente moderador (se reaproveitado na home)
------------------------------------------------------------------ */
.home-pages .moderator-ui-component {
padding: .6rem 1rem;
border-radius: 1rem;
border: solid 1px var(--home-primary-gray);
}
.home-pages .no-pointer {}
.home-pages .no-pointer:hover { cursor: default; }
/* ------------------------------------------------------------------
17. Subconjunto de utilitários Bootstrap 5.1
A App.razor original carregava wwwroot/bootstrap/bootstrap.min.css.
A App.razor atual NÃO carrega Bootstrap (o arquivo existe, mas não é
referenciado), e nenhuma folha ativa redeclara estas utilidades.
O markup das páginas da home continua usando-as, portanto sem esta
seção o layout sai errado: `row`/`row-cols-1` não criam a faixa,
`text-md-start` não alinha os títulos, `h-100` não estica a coluna,
`pt-*`/`pb-*` não espaçam. Valores copiados de Bootstrap 5.1.0.
Somente as classes efetivamente usadas pelas páginas em escopo.
------------------------------------------------------------------ */
/* grid básico */
.home-pages .row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -.5);
margin-left: calc(var(--bs-gutter-x) * -.5);
}
.home-pages .row > * {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y);
}
.home-pages .row-cols-1 > * {
flex: 0 0 auto;
width: 100%;
}
/* coluna flexível; usada pelo banner de soluções (CardItemBanner) */
.home-pages .col {
flex: 1 0 0%;
}
.home-pages .justify-content-center { justify-content: center !important; }
.home-pages .justify-content-between { justify-content: space-between !important; }
.home-pages .align-items-center { align-items: center !important; }
.home-pages .d-flex { display: flex !important; }
.home-pages .d-none { display: none !important; }
/* dimensões e posicionamento */
.home-pages .w-100 { width: 100% !important; }
.home-pages .h-100 { height: 100% !important; }
.home-pages .position-relative { position: relative !important; }
/* alinhamento de texto */
.home-pages .text-start { text-align: left !important; }
.home-pages .text-center { text-align: center !important; }
.home-pages .text-end { text-align: right !important; }
/* espaçamentos */
.home-pages .m-0 { margin: 0 !important; }
.home-pages .mt-4 { margin-top: 1.5rem !important; }
.home-pages .my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.home-pages .me-3 { margin-right: 1rem !important; }
.home-pages .pt-2 { padding-top: .5rem !important; }
.home-pages .pt-3 { padding-top: 1rem !important; }
.home-pages .pt-4 { padding-top: 1.5rem !important; }
.home-pages .pb-2 { padding-bottom: .5rem !important; }
/* tipografia */
.home-pages .fw-normal { font-weight: 400 !important; }
.home-pages .fs-3 { font-size: calc(1.3rem + .6vw) !important; }
@media (min-width: 768px) {
.home-pages .text-md-start { text-align: left !important; }
.home-pages .text-md-center { text-align: center !important; }
.home-pages .text-md-end { text-align: right !important; }
}
@media (min-width: 992px) {
.home-pages .text-lg-center { text-align: center !important; }
}
@media (min-width: 1200px) {
.home-pages .fs-3 { font-size: 1.75rem !important; }
}