/* ===========================================================================
NICVD-2026 — Design System tokens (single source of truth)
Brand extracted from the approved site. Use these vars in all custom sections.
=========================================================================== */
/* Poppins is enqueued as a real in nicvd-conference.php, not @import-ed
here — an @import forces a second, SERIAL render-blocking request that can't
begin until this file has downloaded and parsed. */
:root{
--nicvd-red:#DD183B;
--nicvd-red-dk:#CC1939;
--nicvd-red-deep:#9E0F26;
--nicvd-navy:#0F172A;
--nicvd-ink:#3A3A3A;
--nicvd-muted:#6b7280;
--nicvd-peach:#FFEDE6;
--nicvd-peach-2:#FFD1BF;
--nicvd-line:#e0e0e0;
--nicvd-field-bd:#d4d4d4;
--nicvd-radius:15px;
--nicvd-radius-sm:8px;
--nicvd-radius-pill:7px;
/* Anton (ultra-bold poster font) replaced sitewide with Poppins — a
cleaner, more professional geometric sans that reads as "premium
conference" rather than "gig poster." Oswald kept as a fallback since
it's already loaded. */
--nicvd-disp:'Poppins','Oswald','Arial Narrow',sans-serif;
--nicvd-body:'Roboto',-apple-system,BlinkMacSystemFont,sans-serif;
--nicvd-shadow-card:0 18px 44px rgba(20,6,9,.08);
--nicvd-shadow-btn:0 10px 22px rgba(221,24,59,.38);
--nicvd-container:1200px;
}
/* Hero ECG "heartbeat" motif — faint, blurred, gently alive (cardiac theme).
Add class `nicvd-hero` to a hero container to enable it. */
.nicvd-hero,
.elementor-element-home_hero,
.elementor-element-abs_hero,
.elementor-element-reg_hero{position:relative;overflow:hidden}
.nicvd-hero::before,
.elementor-element-home_hero::before,
.elementor-element-abs_hero::before,
.elementor-element-reg_hero::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'%3E%3Cpath d='M0 100 H270 L292 100 L305 72 L319 100 L333 100 L346 30 L360 170 L374 100 H520 L542 100 L555 74 L569 100 L592 100 L605 38 L619 162 L633 100 H812 L834 100 L847 72 L861 100 L980 100 L993 44 L1007 156 L1021 100 H1200' fill='none' stroke='%23DD183B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:center;background-size:118% auto;
opacity:.12;filter:blur(1px);
animation:nicvd-ecg 4.5s ease-in-out infinite;
}
.nicvd-hero>*,
.elementor-element-home_hero>*,
.elementor-element-abs_hero>*,
.elementor-element-reg_hero>*{position:relative;z-index:1}
@keyframes nicvd-ecg{0%,100%{opacity:.07}50%{opacity:.16}}
@media (prefers-reduced-motion:reduce){.elementor-element-home_hero::before,.elementor-element-abs_hero::before,.elementor-element-reg_hero::before{animation:none;opacity:.11}}
/* ==========================================================================
People grid (Speakers / Committee) — auto-populated from CPT
Full-bleed portrait cards: the photo fills the whole card and the name /
designation sit ON the image over a gradient scrim, rather than under a
small thumbnail. Two variants share this block — speakers are taller and
left-aligned, committee cards are squarer and centred (see the --committee
overrides) so the two sections read as siblings without being identical.
No decorative accent bars anywhere here — see the DESIGN NOTE further down.
========================================================================== */
.nicvd-people{display:grid;grid-template-columns:repeat(var(--nicvd-people-cols,3),1fr);gap:26px;
/* width:100% is load-bearing. The shortcode widget sits in an Elementor
flex container that shrink-wraps it, so without an explicit width the
1fr columns resolve against the items' max-content size. */
width:100%}
/* The card is a flex column with the text block IN NORMAL FLOW, pinned to the
bottom by justify-content. Only the photo and the scrim are absolute. An
earlier version positioned the text absolutely too, which left the card with
zero intrinsic size — inside Elementor's shrink-wrapping flex container that
collapsed every card to 0x0 and the grid rendered empty. Keeping real content
in flow means the card can never collapse, whatever the ancestor does, and
min-height is a second guard if aspect-ratio is ever unavailable. */
.nicvd-person{
position:relative;
display:flex;
flex-direction:column;
justify-content:flex-end;
/* Height is min-height + content, NOT a fixed aspect-ratio. A locked ratio
clipped the long designations (the keynote card's role runs to six lines)
because overflow is hidden. Grid's default stretch still equalises every
card in a row, so the portrait proportion is kept without capping text. */
min-height:560px;
border-radius:18px;
overflow:hidden;
background:var(--nicvd-navy);
box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 12px 30px rgba(15,23,42,.13);
transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
isolation:isolate;
}
/* Hairline ring above the image, so the card keeps a defined edge on both the
light section background and against a dark portrait. */
.nicvd-person::after{
content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.nicvd-person:hover{transform:translateY(-6px);box-shadow:0 28px 58px rgba(15,23,42,.26)}
/* Media layer ---------------------------------------------------------- */
.nicvd-person-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.nicvd-person-media img{
width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block;
/* The source WebPs are compressed hard enough to read as soft; a small
contrast/saturation nudge restores apparent sharpness without artefacts. */
filter:contrast(1.06) saturate(1.04);
transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.nicvd-person:hover .nicvd-person-media img{transform:scale(1.06)}
/* No-photo state: a branded panel, not an empty grey box. Most entries are
in this state until real portraits are supplied, so it has to look
finished on its own — deep red-navy wash with the heart + ECG motif. */
.nicvd-person.is-nophoto .nicvd-person-media{
background:
/* diagonal sheen keeps the panel from looking flat */
linear-gradient(118deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 42%),
radial-gradient(96% 62% at 50% 0%, rgba(221,24,59,.55) 0%, rgba(221,24,59,0) 62%),
linear-gradient(170deg, #33425A 0%, #1E2B3C 46%, #101927 100%);
}
/* No-photo card: initials monogram + small heart/ECG mark, stacked in the
upper two-thirds where a face would be. Outlined (transparent fill with a
stroke) rather than solid so it reads as a designed mark, not as text
someone forgot to replace. */
.nicvd-person-ph{
position:absolute;left:0;right:0;top:0;height:66%;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:16px;color:#fff;pointer-events:none;
}
.nicvd-person-mono{
font-family:var(--nicvd-disp);font-weight:800;
font-size:clamp(46px,5.4vw,68px);line-height:1;letter-spacing:.06em;
color:transparent;
-webkit-text-stroke:1.6px rgba(255,255,255,.44);
text-stroke:1.6px rgba(255,255,255,.44);
text-indent:.06em; /* balances the trailing letter-space */
}
.nicvd-person-mark{width:64px;height:auto;display:block;opacity:.34}
/* Grades the monogram down a touch on the squarer committee cards. */
.nicvd-people--committee .nicvd-person-mono{font-size:clamp(40px,4.6vw,56px)}
.nicvd-people--committee .nicvd-person-mark{width:54px}
/* Editorial index, top-right. Sits above the scrim but under the text. */
.nicvd-person-idx{
position:absolute;z-index:2;top:16px;right:18px;
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:12px;font-weight:500;letter-spacing:.14em;
color:rgba(255,255,255,.52);
}
/* Scrim: strongest at the bottom where the text sits, clearing by mid-card so
a real portrait's face is never dulled. */
/* Light seating tint only. The heavy darkening that used to live here covered
more than half the portrait; the readable backing now travels with the text
block instead (see .nicvd-person-body), which both keeps the photo visible
and means the dark area auto-sizes to however long a designation runs. */
.nicvd-person-scrim{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to top,
rgba(11,16,24,.34) 0%,
rgba(11,16,24,.16) 26%,
rgba(11,16,24,.02) 52%,
rgba(11,16,24,0) 70%),
radial-gradient(120% 84% at 50% 0%, rgba(11,16,24,.20) 0%, rgba(11,16,24,0) 62%);
}
/* Badge ("Keynote Speaker" etc.) — only rendered when the Badge field is set */
.nicvd-person-badge{
position:absolute;z-index:3;top:14px;left:14px;
font-family:var(--nicvd-disp);font-weight:700;text-transform:uppercase;
font-size:10.5px;letter-spacing:.09em;color:#fff;
padding:6px 13px;border-radius:999px;
background:linear-gradient(135deg,var(--nicvd-red) 0%,var(--nicvd-red-deep) 100%);
box-shadow:0 4px 14px rgba(158,15,38,.45);
}
/* Text layer ----------------------------------------------------------- */
.nicvd-person-body{
position:relative;z-index:2;
padding:52px 22px 24px;
background:linear-gradient(to top,
rgba(9,13,20,.95) 0%,
rgba(9,13,20,.90) 42%,
rgba(9,13,20,.66) 68%,
rgba(9,13,20,.28) 86%,
rgba(9,13,20,0) 100%);
}
.nicvd-person-name{
font-family:var(--nicvd-disp);font-weight:700;text-transform:uppercase;
letter-spacing:.2px;color:#fff;font-size:19px;line-height:1.24;margin:0;
text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.nicvd-person-rule{
display:block;width:34px;height:2px;margin:11px 0 9px;border-radius:2px;
background:var(--nicvd-red);
transition:width .28s cubic-bezier(.22,.61,.36,1);
}
.nicvd-person:hover .nicvd-person-rule{width:56px}
.nicvd-person-role{
font-family:var(--nicvd-body);font-weight:400;font-size:13px;line-height:1.55;
margin:0;color:rgba(255,255,255,.8);
}
/* Committee variant — squarer and centred, so it reads as a sibling of the
speaker grid rather than a copy of it. */
.nicvd-people--committee .nicvd-person{min-height:370px}
.nicvd-people--committee .nicvd-person-body{text-align:center;padding:0 18px 22px}
.nicvd-people--committee .nicvd-person-name{font-size:16px}
.nicvd-people--committee .nicvd-person-rule{margin-left:auto;margin-right:auto}
.nicvd-people--committee .nicvd-person-role{font-size:13px}
/* ==========================================================================
People-grid section width (Home 4388)
The shortcode widget is shrink-to-fit inside its Elementor container, so the
grid was sizing to its own CONTENT rather than the section. That made each
section's width depend on how long its longest designation happened to be —
the speakers grid was stretched wide by the keynote card's very long role,
while the committee grid collapsed to roughly the width of the word
"Treasurer". Forcing the widget (and its wrappers) to full width, then
setting an explicit content width, makes both sections deliberate and stable
regardless of the text inside them.
nh080 = speakers shortcode / nh081 = its section
nh086 = committee shortcode / nh087 = its section
========================================================================== */
.elementor-4388 .elementor-element-nh081,
.elementor-4388 .elementor-element-nh087{ --content-width:1400px; }
.elementor-4388 .elementor-element-nh080,
.elementor-4388 .elementor-element-nh086{ width:100%; align-self:stretch; }
.elementor-4388 .elementor-element-nh080 > .elementor-widget-container,
.elementor-4388 .elementor-element-nh086 > .elementor-widget-container,
.elementor-4388 .elementor-element-nh080 .elementor-shortcode,
.elementor-4388 .elementor-element-nh086 .elementor-shortcode{ width:100%; }
@media (max-width:1024px){
.nicvd-people{grid-template-columns:repeat(2,1fr);gap:20px}
.nicvd-person{min-height:440px}
.nicvd-people--committee .nicvd-person{min-height:370px}
.nicvd-person-mono{font-size:clamp(52px,7vw,72px)}
}
/* Phones go to ONE column. 2-up was tried first and failed: at ~160px of card
width these designations ("Associate Professor & Convenor of Cardiovascular
Surgical Conference of NICVD-2026, Department of Cardiac Surgery") wrapped to
nine or more lines and overran the card. One column at full width keeps every
name and role fully readable, and the portrait proportion is what makes the
card look intentional at this size. */
@media (max-width:700px){
.nicvd-people{grid-template-columns:1fr;gap:16px;max-width:420px;margin-inline:auto}
.nicvd-person{min-height:0;aspect-ratio:4/5;border-radius:14px}
.nicvd-people--committee .nicvd-person{min-height:0;aspect-ratio:4/4.2}
.nicvd-person-body{padding:46px 18px 20px}
.nicvd-person-name{font-size:17.5px}
.nicvd-person-role{font-size:13px}
.nicvd-person-rule{width:30px;margin:9px 0 8px}
.nicvd-person-badge{font-size:9.5px;padding:5px 11px;top:12px;left:12px}
.nicvd-person-idx{top:13px;right:14px;font-size:11px}
.nicvd-person-mono{font-size:clamp(54px,15vw,74px)}
.nicvd-person-mark{width:58px}
.nicvd-people--committee .nicvd-person-name{font-size:17px}
.nicvd-people--committee .nicvd-person-role{font-size:12.5px}
.nicvd-people--committee .nicvd-person-mono{font-size:clamp(48px,13vw,64px)}
}
/* Very narrow phones: the ratio would otherwise make a tall, mostly-empty
card, so let content set the height again with a floor. */
@media (max-width:400px){
.nicvd-person,
.nicvd-people--committee .nicvd-person{aspect-ratio:auto;min-height:330px}
.nicvd-person-name{font-size:15px}
.nicvd-person-role{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
.nicvd-person,.nicvd-person-media img,.nicvd-person-rule{transition:none}
.nicvd-person:hover{transform:none}
.nicvd-person:hover .nicvd-person-media img{transform:none}
}
/* Reusable red gradient "pill" (section labels) — matches Registration/Abstract */
.nicvd-pill{
display:inline-block;font-family:var(--nicvd-disp);font-weight:700;color:#fff;
font-size:20px;letter-spacing:.4px;text-transform:uppercase;
padding:11px 30px;border-radius:var(--nicvd-radius-sm);
background:linear-gradient(180deg,#E4213F 0%,var(--nicvd-red) 42%,var(--nicvd-red-deep) 100%);
box-shadow:0 8px 18px rgba(221,24,59,.32);
}
/* ============================================================
CLIENT PASS — headings, buttons, date badge, instruction note box, map
============================================================ */
h1.elementor-heading-title,
h2.elementor-heading-title,
.elementor-button,
.nicvd-btn,
.nicvd-pill{
font-family:'Poppins','Oswald','Arial Narrow',sans-serif;
}
/* Homepage hero — prominent date badge */
.nicvd-date-badge{
display:inline-block;background:var(--nicvd-red);color:#fff;
font-family:'Poppins','Oswald',sans-serif;font-weight:700;font-size:18px;line-height:1;letter-spacing:.4px;
padding:7px 15px 6px;border-radius:6px;
box-shadow:0 5px 14px rgba(221,24,59,.32);vertical-align:middle;
}
/* Instruction / payment note box */
.nicvd-note{
display:flex;gap:12px;align-items:flex-start;
background:#FFF4F0;border:1px solid #f2c9bd;
border-radius:8px;padding:14px 16px;font-size:15px;color:var(--nicvd-navy);line-height:1.55;margin-bottom:4px;
}
.nicvd-note-ico{flex:0 0 20px;width:20px;height:20px;margin-top:1px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DD183B'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E") center/contain no-repeat}
.nicvd-note-num{color:var(--nicvd-red);font-size:16px;white-space:nowrap}
.nicvd-note-tag{display:inline-block;background:var(--nicvd-red);color:#fff;font-size:12px;font-weight:600;
padding:2px 9px;border-radius:4px;margin-left:2px;vertical-align:middle}
/* Venue Google map embed (responsive) */
.nicvd-map iframe{width:100%;min-height:400px;border:0;border-radius:10px;display:block}
@media (max-width:768px){.nicvd-map iframe{min-height:300px}}
/* Most headings/buttons/pills set their OWN explicit font-family
("Anton"), font-weight (400 — Anton's only weight) and letter-spacing
(0.5px, calibrated for Anton's cramped default tracking) directly in
their Elementor widget settings, which compiles to a more specific
per-page rule than a plain element+class selector can beat. !important
is required on all three properties below to actually force Poppins in,
at a weight that reads as a real heading instead of Poppins Regular, and
at a letter-spacing suited to Poppins' normal (not cramped) tracking —
1.4px was right for Anton, but is too loose for Poppins. */
.elementor-button, .nicvd-btn, .nicvd-pill,
h1.elementor-heading-title, h2.elementor-heading-title,
.nicvd-date-badge{
font-family:'Poppins','Oswald','Arial Narrow',sans-serif !important;
transform:none !important;
}
h1.elementor-heading-title, h2.elementor-heading-title{
font-weight:700 !important;
letter-spacing:.3px !important;
}
.elementor-button, .nicvd-btn, .nicvd-pill{
font-weight:600 !important;
letter-spacing:.3px;
}
.elementor-button .elementor-button-text{ display:inline-block; }
/* ============================================================
ICON BADGE — universal, safe for every icon widget regardless of
whether its row is arranged horizontally or vertically (see note
below on why alignment itself is NOT handled generically anymore).
Bare Font Awesome glyphs (fa-star, fa-calendar-day, fa-map-marker-alt...)
each have slightly different optical metrics, so lined up as plain
inline icons next to text they never quite share one baseline — one
looks a couple of pixels higher or lower than the next. Wrapping every
icon in an identical flex-centered circular badge removes that per-glyph
variance and reads as a considerably more finished, "premium" list
style than a bare glyph ever did. No margin here — spacing is added
per-section below, only where actually verified needed, because a
blanket margin-right subtly off-centers icons in centered COLUMN cards
(see note below). */
.elementor-widget-icon .elementor-icon{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:40px;
height:40px;
min-width:40px;
padding:0 !important;
border-radius:50%;
background:var(--nicvd-peach);
border:none !important; /* the tinted ring read as a hard outline — dropped */
box-shadow:none !important; /* and the glow made the circle look muddy */
line-height:1 !important;
text-align:center;
}
/* Elementor's own stylesheet sets ".elementor-icon i{width:1em;height:1em;
display:block}". A Font Awesome glyph does NOT sit symmetrically inside its
own 1em box (each glyph has different side/baseline bearings), so a 1em
block centred in the circle still LOOKS off-centre — that's the "icon is
not in center" problem. Collapsing the i to auto size and making it a
flex box centres on the glyph's real ink instead of its em box. */
.elementor-widget-icon .elementor-icon i,
.elementor-icon-list-icon i{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:auto !important;
height:auto !important;
line-height:1 !important;
}
.elementor-widget-icon .elementor-icon svg,
.elementor-icon-list-icon svg{
display:block;
width:auto;
height:1em;
margin:0 !important;
}
/* NOTE ON ALIGNMENT: this file went through several rounds of trying to
guess a row's layout (row vs column, 2 vs 3 children) from CSS alone to
apply align-items/gap generically. That approach is fundamentally
unreliable — e.g. both Home's "Important Dates" (3 children) AND About's
"Who Should Attend?" (2 children) are centered COLUMN cards, so child
count alone doesn't distinguish shape, and a blanket rule kept fixing
one page while breaking another. Alignment fixes below are instead
applied ONLY to element IDs individually confirmed (by reading each
container's actual flex_direction/align_items in the saved Elementor
data) to be a ROW that's set to align-items:center with text that can
wrap — the one genuinely broken pattern (icon drifts to the vertical
middle of a multi-line paragraph instead of anchoring to line 1). Every
other icon row on the site already had the right native setting and is
deliberately left untouched. */
/* COMPLETE list, from a systematic scan of EVERY icon widget on every page
(Events, Venue, About, Home, Programme, Contact) rather than only the
sections that happened to get reported — earlier passes fixed named
sections and kept missing their neighbours on the same page.
Events (7890) row+center: pe064/068/072/076 (Conference Overview),
pe085/089/093/097/101 (Key Scientific Tracks), pe119/123 (Wet Lab),
pe149/153 (Correspondence & Secretariat).
Venue (7893) row: vp009/012/015 (Conference Location), vp027/031 (How to
Reach), vp040/044/048/052 (Facilities).
Programme (7899) row: vp131/135 (Contact for Inquiries).
Deliberately EXCLUDED (column+center, already correct — forcing
flex-start onto these is what broke them in an earlier pass):
Events pe133/137/141, About pe038/041/044/047, Home nh043/047/051,
Programme vp119/123. */
.elementor-7890 .elementor-element-pe064,
.elementor-7890 .elementor-element-pe068,
.elementor-7890 .elementor-element-pe072,
.elementor-7890 .elementor-element-pe076,
.elementor-7890 .elementor-element-pe085,
.elementor-7890 .elementor-element-pe089,
.elementor-7890 .elementor-element-pe093,
.elementor-7890 .elementor-element-pe097,
.elementor-7890 .elementor-element-pe101,
.elementor-7890 .elementor-element-pe119,
.elementor-7890 .elementor-element-pe123,
.elementor-7890 .elementor-element-pe149,
.elementor-7890 .elementor-element-pe153,
.elementor-7893 .elementor-element-vp009,
.elementor-7893 .elementor-element-vp012,
.elementor-7893 .elementor-element-vp015,
.elementor-7893 .elementor-element-vp027,
.elementor-7893 .elementor-element-vp031,
.elementor-7893 .elementor-element-vp040,
.elementor-7893 .elementor-element-vp044,
.elementor-7893 .elementor-element-vp048,
.elementor-7893 .elementor-element-vp052,
.elementor-7899 .elementor-element-vp131,
.elementor-7899 .elementor-element-vp135{
align-items:flex-start !important;
}
.elementor-7890 .elementor-element-pe064 > .elementor-widget-icon .elementor-icon,
.elementor-7890 .elementor-element-pe068 > .elementor-widget-icon .elementor-icon,
.elementor-7890 .elementor-element-pe072 > .elementor-widget-icon .elementor-icon,
.elementor-7890 .elementor-element-pe076 > .elementor-widget-icon .elementor-icon,
.elementor-7890 .elementor-element-pe085 > .elementor-widget-icon .elementor-icon,
.elementor-7890 .elementor-element-pe089 > .elementor-widget-icon .elementor-icon,
.elementor-7890 .elementor-element-pe093 > .elementor-widget-icon .elementor-icon,
.elementor-7890 .elementor-element-pe097 > .elementor-widget-icon .elementor-icon,
.elementor-7890 .elementor-element-pe101 > .elementor-widget-icon .elementor-icon,
.elementor-7890 .elementor-element-pe119 > .elementor-widget-icon .elementor-icon,
.elementor-7890 .elementor-element-pe123 > .elementor-widget-icon .elementor-icon,
.elementor-7890 .elementor-element-pe149 > .elementor-widget-icon .elementor-icon,
.elementor-7890 .elementor-element-pe153 > .elementor-widget-icon .elementor-icon,
.elementor-7893 .elementor-element-vp009 > .elementor-widget-icon .elementor-icon,
.elementor-7893 .elementor-element-vp012 > .elementor-widget-icon .elementor-icon,
.elementor-7893 .elementor-element-vp015 > .elementor-widget-icon .elementor-icon,
.elementor-7893 .elementor-element-vp027 > .elementor-widget-icon .elementor-icon,
.elementor-7893 .elementor-element-vp031 > .elementor-widget-icon .elementor-icon,
.elementor-7893 .elementor-element-vp040 > .elementor-widget-icon .elementor-icon,
.elementor-7893 .elementor-element-vp044 > .elementor-widget-icon .elementor-icon,
.elementor-7893 .elementor-element-vp048 > .elementor-widget-icon .elementor-icon,
.elementor-7893 .elementor-element-vp052 > .elementor-widget-icon .elementor-icon,
.elementor-7899 .elementor-element-vp131 > .elementor-widget-icon .elementor-icon,
.elementor-7899 .elementor-element-vp135 > .elementor-widget-icon .elementor-icon{
margin-top:3px;
margin-right:16px;
}
/* Icon-list widget (Contact's "Conference Secretariat & Venue" / "Get in
Touch") is a different Elementor widget entirely from the icon widget
above, with its own markup — but unlike the icon widget, icon-list items
are ALWAYS a horizontal row (Elementor doesn't offer a column variant of
it), so the badge + top-alignment treatment is safe to apply to every
instance of it site-wide without the per-ID verification needed above. */
.elementor-icon-list-icon{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:34px;
height:34px;
min-width:34px;
padding:0 !important;
border-radius:50%;
background:var(--nicvd-peach);
border:none !important;
box-shadow:none !important;
line-height:1 !important;
margin-right:14px !important;
}
.elementor-icon-list-item{ align-items:flex-start !important; }
/* ROW icon-cards' outer white-bordered box. CARD IDs (≠ the row IDs above —
the row is the flex parent of the icon, the card is the bordered box that
wraps it) taken from a full scan that maps every icon row to its nearest
bordered ancestor. An earlier pass listed only pe065 out of Conference
Overview's four cards (pe065/069/073/077), which is why exactly one card
showed the red accent and the other three looked unstyled.
Events — pe065/069/073/077 (Conference Overview),
pe086/090/094/098/102 (Key Scientific Tracks),
pe120/124 (Wet Lab), pe150/154 (Correspondence).
Venue — vp016 (Conference Location, one card shared by 3 rows),
vp028/032 (How to Reach), vp041/045/049/053 (Facilities).
Programme — vp132/136 (Contact for Inquiries). */
.elementor-7890 .elementor-element-pe065,
.elementor-7890 .elementor-element-pe069,
.elementor-7890 .elementor-element-pe073,
.elementor-7890 .elementor-element-pe077,
.elementor-7890 .elementor-element-pe086,
.elementor-7890 .elementor-element-pe090,
.elementor-7890 .elementor-element-pe094,
.elementor-7890 .elementor-element-pe098,
.elementor-7890 .elementor-element-pe102,
.elementor-7890 .elementor-element-pe120,
.elementor-7890 .elementor-element-pe124,
.elementor-7890 .elementor-element-pe150,
.elementor-7890 .elementor-element-pe154,
.elementor-7893 .elementor-element-vp016,
.elementor-7893 .elementor-element-vp028,
.elementor-7893 .elementor-element-vp032,
.elementor-7893 .elementor-element-vp041,
.elementor-7893 .elementor-element-vp045,
.elementor-7893 .elementor-element-vp049,
.elementor-7893 .elementor-element-vp053,
.elementor-7899 .elementor-element-vp132,
.elementor-7899 .elementor-element-vp136{
position:relative;
transition:box-shadow .2s ease, transform .2s ease;
}
.elementor-7890 .elementor-element-pe065:hover,
.elementor-7890 .elementor-element-pe069:hover,
.elementor-7890 .elementor-element-pe073:hover,
.elementor-7890 .elementor-element-pe077:hover,
.elementor-7890 .elementor-element-pe086:hover,
.elementor-7890 .elementor-element-pe090:hover,
.elementor-7890 .elementor-element-pe094:hover,
.elementor-7890 .elementor-element-pe098:hover,
.elementor-7890 .elementor-element-pe102:hover,
.elementor-7890 .elementor-element-pe120:hover,
.elementor-7890 .elementor-element-pe124:hover,
.elementor-7890 .elementor-element-pe150:hover,
.elementor-7890 .elementor-element-pe154:hover,
.elementor-7893 .elementor-element-vp016:hover,
.elementor-7893 .elementor-element-vp028:hover,
.elementor-7893 .elementor-element-vp032:hover,
.elementor-7893 .elementor-element-vp041:hover,
.elementor-7893 .elementor-element-vp045:hover,
.elementor-7893 .elementor-element-vp049:hover,
.elementor-7893 .elementor-element-vp053:hover,
.elementor-7899 .elementor-element-vp132:hover,
.elementor-7899 .elementor-element-vp136:hover{
transform:translateY(-3px);
box-shadow:0 16px 34px rgba(15,23,42,.13) !important;
}
/* Column icon-cards (icon on top, centered, already correctly aligned
natively — see note above) get the same premium red-accent treatment
as everything else, as a TOP bar since a left bar would look wrong on a
centered vertical card, plus a hover lift. Explicit IDs, verified
column+center containers only: Home "Important Dates", About "Who
Should Attend?", Programme "Important Deadlines". */
.elementor-4388 .elementor-element-nh043,
.elementor-4388 .elementor-element-nh047,
.elementor-4388 .elementor-element-nh051,
.elementor-7889 .elementor-element-pe038,
.elementor-7889 .elementor-element-pe041,
.elementor-7889 .elementor-element-pe044,
.elementor-7889 .elementor-element-pe047,
.elementor-7890 .elementor-element-pe133,
.elementor-7890 .elementor-element-pe137,
.elementor-7890 .elementor-element-pe141,
.elementor-7899 .elementor-element-vp119,
.elementor-7899 .elementor-element-vp123{
position:relative;
transition:box-shadow .2s ease, transform .2s ease;
}
.elementor-4388 .elementor-element-nh043:hover,
.elementor-4388 .elementor-element-nh047:hover,
.elementor-4388 .elementor-element-nh051:hover,
.elementor-7889 .elementor-element-pe038:hover,
.elementor-7889 .elementor-element-pe041:hover,
.elementor-7889 .elementor-element-pe044:hover,
.elementor-7889 .elementor-element-pe047:hover,
.elementor-7890 .elementor-element-pe133:hover,
.elementor-7890 .elementor-element-pe137:hover,
.elementor-7890 .elementor-element-pe141:hover,
.elementor-7899 .elementor-element-vp119:hover,
.elementor-7899 .elementor-element-vp123:hover{
transform:translateY(-4px);
box-shadow:0 18px 36px rgba(15,23,42,.13) !important;
}
@media (max-width:480px){
.elementor-widget-icon .elementor-icon,
.elementor-icon-list-icon{ width:32px;height:32px;min-width:32px; }
.elementor-widget-icon .elementor-icon i,
.elementor-icon-list-icon i{ font-size:16px !important; }
}
/* ============================================================
PROGRAMME SCHEDULE — was one flat undifferentiated box holding 8 plain
rows of [red time pill] [session text]. Restyled as a clean agenda list:
each time slot is its own white card with a red accent and hover lift,
the time pill is a proper gradient chip with a clock glyph. (A previous
version also tried a muted background for break/meal slots, but that
read as messier rather than cleaner and had a CSS specificity bug where
the override never actually applied — dropped entirely; every slot now
gets the same consistent treatment.)
Scoped to the Programme page's own element IDs, structural (parent >
child), not hand-written per row, so it holds up if rows are reordered.
============================================================ */
.elementor-7899 .elementor-element-vp102{
background:transparent !important;
border:none !important;
box-shadow:none !important;
padding:4px !important;
gap:16px !important;
}
.elementor-7899 .elementor-element-vp102 > .e-con{
position:relative;
background:#fff;
border-radius:10px;
border:1px solid #ece7e3;
box-shadow:0 2px 6px rgba(15,23,42,.05);
padding:14px 20px !important;
align-items:center !important;
transition:background-color .15s ease, box-shadow .15s ease;
}
.elementor-7899 .elementor-element-vp102 > .e-con:hover{
background:#fffafa;
box-shadow:0 6px 16px rgba(15,23,42,.08);
}
/* Time chip: previous version was an oversized glossy 3-stop gradient pill
with a heavy drop shadow, which dominated the row and read as cheap
rather than premium. Now a flat, compact, tightly-padded chip — the time
is supporting metadata, so it should sit quietly beside the session
title, not outshout it. Fixed min-width keeps every chip the same
width so all session titles start on one clean vertical line. */
.elementor-7899 .elementor-element-vp102 > .e-con > .e-con:first-child{
border-radius:6px !important;
background:var(--nicvd-red) !important;
box-shadow:none !important;
padding:7px 12px !important;
min-width:150px;
flex:0 0 auto !important;
}
.elementor-7899 .elementor-element-vp102 > .e-con > .e-con:first-child .elementor-widget-text-editor p{
font-size:13px !important;
letter-spacing:.2px;
white-space:nowrap;
}
@media (max-width:600px){
.elementor-7899 .elementor-element-vp102 > .e-con{
padding:14px 16px !important;
flex-direction:column !important;
align-items:flex-start !important;
gap:8px !important;
}
.elementor-7899 .elementor-element-vp102 > .e-con > .e-con:first-child{ min-width:0; }
}
/* ============================================================
KEY SCIENTIFIC TRACKS — uniform card size
The 5 cards sit in a wrapping flex row at 31% width each, so they form
two lines (3 + 2). flex-wrap stretches each LINE independently, which is
why "Heart Failure Surgery, TAVI (Transcatheter Aortic Valve
Replacement)" — the only title long enough to wrap to 3 lines — made its
card visibly taller than every other card on the page. A shared
min-height makes all five read as one consistent set regardless of title
length, and centring the row's content keeps short titles optically
balanced inside the now-taller box.
============================================================ */
.elementor-7890 .elementor-element-pe086,
.elementor-7890 .elementor-element-pe090,
.elementor-7890 .elementor-element-pe094,
.elementor-7890 .elementor-element-pe098,
.elementor-7890 .elementor-element-pe102{
min-height:104px;
justify-content:center !important;
}
/* Same treatment for the four Conference Overview cards (one of which —
"Event Name — Cardiovascular Surgical Conference of NICVD 2026" — also
wraps to 2 lines while its neighbours stay on 1). */
.elementor-7890 .elementor-element-pe065,
.elementor-7890 .elementor-element-pe069,
.elementor-7890 .elementor-element-pe073,
.elementor-7890 .elementor-element-pe077{
min-height:92px;
justify-content:center !important;
}
/* Wet Lab (2 cards) and Correspondence (2 cards) — same idea, smaller. */
.elementor-7890 .elementor-element-pe120,
.elementor-7890 .elementor-element-pe124{
min-height:88px;
justify-content:center !important;
}
@media (max-width:767px){
.elementor-7890 .elementor-element-pe065,
.elementor-7890 .elementor-element-pe069,
.elementor-7890 .elementor-element-pe073,
.elementor-7890 .elementor-element-pe077,
.elementor-7890 .elementor-element-pe086,
.elementor-7890 .elementor-element-pe090,
.elementor-7890 .elementor-element-pe094,
.elementor-7890 .elementor-element-pe098,
.elementor-7890 .elementor-element-pe102,
.elementor-7890 .elementor-element-pe120,
.elementor-7890 .elementor-element-pe124{
min-height:0; /* let cards hug their content once stacked 1-per-row */
}
}
/* ============================================================
CORRESPONDENCE & SECRETARIAT (Events) — redesigned as a distinct
"get in touch" callout rather than two more white cards identical to
the six above it. It's the page's closing contact block, so it now
reads as navy panels with inverted text and solid red icon badges:
clearly terminal/actionable, and it echoes the site's navy hero
instead of repeating the generic card pattern a fourth time.
============================================================ */
.elementor-7890 .elementor-element-pe150,
.elementor-7890 .elementor-element-pe154{
background:linear-gradient(160deg,#16255c 0%,var(--nicvd-navy) 100%) !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:14px !important;
padding:26px 28px !important;
min-height:96px;
justify-content:center !important;
box-shadow:0 10px 26px rgba(15,23,42,.22) !important;
}
.elementor-7890 .elementor-element-pe150:hover,
.elementor-7890 .elementor-element-pe154:hover{
box-shadow:0 18px 38px rgba(15,23,42,.30) !important;
}
/* Invert the text (its #3A3A3A is set per-widget, hence !important) */
.elementor-7890 .elementor-element-pe150 .elementor-widget-text-editor,
.elementor-7890 .elementor-element-pe154 .elementor-widget-text-editor,
.elementor-7890 .elementor-element-pe150 .elementor-widget-text-editor p,
.elementor-7890 .elementor-element-pe154 .elementor-widget-text-editor p{
color:#EEF1F8 !important;
font-size:15.5px !important;
line-height:1.7 !important;
}
/* Solid red badge instead of the peach one, for contrast on navy */
.elementor-7890 .elementor-element-pe149 .elementor-icon,
.elementor-7890 .elementor-element-pe153 .elementor-icon{
background:var(--nicvd-red) !important;
color:#fff !important;
}
.elementor-7890 .elementor-element-pe149 .elementor-icon i,
.elementor-7890 .elementor-element-pe153 .elementor-icon i{ color:#fff !important; }
@media (max-width:767px){
.elementor-7890 .elementor-element-pe150,
.elementor-7890 .elementor-element-pe154{
padding:22px !important;
min-height:0;
}
}
/* ==========================================================================
DESIGN NOTE — no coloured accent bars
An earlier pass added a 3–4px red border-top / border-left to most card
components (speaker & committee cards, the Events/Venue/Programme icon
cards, Important Dates / Important Deadlines / Who Should Attend, the
Programme Schedule rows, the Correspondence panels and the payment note).
Repeated on every page it read as a template signature rather than as part
of this institute's identity, so all of it has been removed: cards now rely
on their own hairline border, radius and shadow, and the brand red is
reserved for genuinely active elements — buttons, links, the section pills
and the icon badges. Please don't reintroduce a decorative accent bar here;
if a card needs emphasis, use elevation or spacing instead of colour.
========================================================================== */
/* ==========================================================================
CLS FIX — site logo in the header (and its sticky-header clone)
Header/Footer Elementor's Site Logo widget hand-writes a bare tag
with no width/height/aspect-ratio attributes for this render path — a
limitation in the plugin's own template (inc/widgets-manager/widgets/
site-logo/site-logo.php), not something set in the widget's configured
options, so it can't be fixed from the editor and shouldn't be patched
directly in a vendor file that a plugin update would overwrite. It
renders TWICE per page (once for the normal header, once for Elementor
Pro's sticky-header clone), and having zero reserved space for either
copy was flagged as a real layout-shift source (CLS regressed to 0.197).
The uploaded logo's native ratio is 303x375 (matches its "medium" crop,
242x300, which is what's actually served) — reserving that ratio lets
the browser allocate the right box before the image arrives, without
touching the widget's own width logic (still controlled by its existing
responsive width settings; only height now derives from that + the ratio,
instead of collapsing to 0 until load). */
.hfe-site-logo-img{
aspect-ratio: 303 / 375;
height: auto;
}
/* ==========================================================================
HOME — "A Warm Welcome to NICVD 2026"
The section was a bare left-hand photo beside four stacked paragraphs, and
read as very plain. This turns it into a single elevated card: the portrait
sits in its own framed panel with the conference's heart/ECG motif and a
red arc sweeping the base, and the copy column gets a proper editorial
rhythm (eyebrow rule → heading with a short red dash → lead paragraph →
hairline-separated body → set-apart signature block).
Targeted by Elementor's hand-authored element IDs on the Home page (4388),
the same approach already used for the hero and the icon-cards above:
nh020 = card shell nh013 = photo column nh012 = photo widget
nh019 = copy column nh014 = eyebrow nh015 = heading
nh016 = lead para nh017 = body para nh018 = signature
========================================================================== */
.elementor-4388 .elementor-element-nh020{
background:#fff;
border:1px solid #efeae7;
border-radius:22px;
box-shadow:0 22px 60px rgba(15,23,42,.09);
padding:34px;
overflow:hidden;
}
/* ---- Photo panel ---- */
.elementor-4388 .elementor-element-nh013{
position:relative;
border-radius:18px;
overflow:hidden;
isolation:isolate;
/* Layered: anatomical-heart line-art watermark top-right (the conference's
own motif, reused at low contrast), over a warm off-white wash. */
background-image:
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 210' fill='none' stroke='rgba(150,8,31,0.17)' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M104 186C104 186 30 138 30 82C30 52 52 33 78 33C93 33 104 41 108 51C113 41 124 33 139 33'/%3E%3Cpath d='M139 33c26 0 47 19 47 49 0 56-82 104-82 104'/%3E%3Cpath d='M96 62c14 10 20 26 18 44'/%3E%3Cpath d='M126 58c-9 14-10 30-4 44'/%3E%3Cpath d='M108 51c-2 14 2 26 10 34'/%3E%3Cpath d='M74 24c6 6 9 13 9 21M92 18c4 7 6 14 6 22M148 24c-6 6-9 13-9 21'/%3E%3C/svg%3E"),
radial-gradient(96% 74% at 26% 8%, #FFF9F7 0%, #F9F3F0 50%, #F0E9E5 100%);
background-repeat:no-repeat,no-repeat;
background-position:104% -6%,0 0;
background-size:76% auto,cover;
box-shadow:inset 0 0 0 1px rgba(150,8,31,.06);
}
/* Dot-grid texture, upper-left, fading out diagonally so it reads as paper
texture rather than a pasted-on square. */
.elementor-4388 .elementor-element-nh013::before{
content:'';position:absolute;z-index:0;left:0;top:0;width:56%;height:52%;
background-image:radial-gradient(rgba(158,15,38,.26) 1.4px, transparent 1.5px);
background-size:16px 16px;
-webkit-mask-image:linear-gradient(142deg,#000 0%,rgba(0,0,0,.35) 48%,transparent 78%);
mask-image:linear-gradient(142deg,#000 0%,rgba(0,0,0,.35) 48%,transparent 78%);
pointer-events:none;
}
/* Red sweep across the base, behind the subject, with a white ECG trace
riding it — flatter and wider than a half-disc so it reads as a curve
sweeping through the frame instead of a semicircle sitting in it. */
.elementor-4388 .elementor-element-nh013::after{
content:'';position:absolute;z-index:0;pointer-events:none;
left:-30%;right:-8%;bottom:-70%;height:116%;
/* Asymmetric radii tilt the curve so it sweeps up to the right instead of
sitting as a symmetric dome — closer to the reference's S-curve. */
border-radius:64% 40% 0 0 / 100% 86% 0 0;
transform:rotate(-4deg);
background-image:
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' fill='none'%3E%3Cpath d='M0 21H62l7-14 10 28 8-14h32l7-10 8 10h106' stroke='rgba(255,255,255,0.72)' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"),
linear-gradient(142deg,#E01B41 0%,var(--nicvd-red) 26%,var(--nicvd-red-deep) 70%,#78091B 100%);
background-repeat:no-repeat,no-repeat;
background-position:46% 13%,0 0;
background-size:60% auto,cover;
box-shadow:0 -12px 40px rgba(150,8,31,.26);
}
.elementor-4388 .elementor-element-nh013>.elementor-element-nh012{
position:relative;z-index:1;margin-top:auto;padding-top:26px;
}
.elementor-4388 .elementor-element-nh012 img{
display:block;width:100%;height:auto;
/* The source file is a true cutout (alpha), so the shadow follows the
silhouette and lifts the subject off the sweep. */
filter:drop-shadow(0 20px 34px rgba(15,23,42,.22));
}
/* ---- Copy column ---- */
.elementor-4388 .elementor-element-nh019{
padding:6px 6px 6px 40px;
position:relative;
/* Faint line-art of the institute building, bottom-right — the depth cue
from the reference layout. Decorative only, sits under the copy. */
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 220' fill='none' stroke='rgba(150,8,31,0.10)' stroke-width='1.6'%3E%3Cpath d='M12 208h276M30 208V96h44v112M74 208V78h64v130M138 208V60h44v148M182 208V92h50v116M232 208V112h44v96'/%3E%3Cpath d='M96 34h20v26H96zM100 34l6-14 6 14'/%3E%3Cpath d='M42 112h8v18h-8zM58 112h8v18h-8zM88 96h10v20H88zM110 96h10v20h-10zM150 78h10v22h-10zM168 78h10v22h-10zM196 124h10v18h-10zM214 124h10v18h-10zM244 132h10v16h-10zM260 132h10v16h-10z'/%3E%3Cpath d='M42 150h8v18h-8zM58 150h8v18h-8zM88 136h10v20H88zM110 136h10v20h-10zM150 116h10v22h-10zM168 116h10v22h-10z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:112% 106%;
background-size:58% auto;
}
.elementor-4388 .elementor-element-nh019>*{position:relative;z-index:1}
/* Eyebrow: uppercase, letterspaced, with a rule trailing off to the right. */
.elementor-4388 .elementor-element-nh014 p{
display:flex;align-items:center;gap:14px;
font-family:var(--nicvd-disp);font-weight:700;text-transform:uppercase;
letter-spacing:.22em;font-size:13px;color:var(--nicvd-red);margin:0 0 18px;
}
.elementor-4388 .elementor-element-nh014 p::after{
content:'';flex:0 0 74px;height:2px;border-radius:2px;
background:linear-gradient(90deg,var(--nicvd-red) 0%,rgba(221,24,59,0) 100%);
}
/* Heading + the short red dash beneath it. */
.elementor-4388 .elementor-element-nh015 .elementor-heading-title{
margin:0;line-height:1.14;letter-spacing:-.01em;
}
.elementor-4388 .elementor-element-nh015{position:relative;padding-bottom:26px;margin-bottom:4px}
.elementor-4388 .elementor-element-nh015::after{
content:'';position:absolute;left:0;bottom:0;width:62px;height:4px;border-radius:3px;
background:var(--nicvd-red);
}
/* Lead paragraph carries slightly more weight than the body copy below it. */
.elementor-4388 .elementor-element-nh016 p{
font-size:16.5px;line-height:1.78;color:#2C3644;margin:0;
}
/* Body paragraph, separated by a hairline instead of just whitespace. */
.elementor-4388 .elementor-element-nh017{
border-top:1px solid #ECE7E3;margin-top:24px;padding-top:24px;
}
.elementor-4388 .elementor-element-nh017 p{
font-size:15.5px;line-height:1.8;color:var(--nicvd-muted);margin:0;
}
/* Signature block — set apart on a soft tint so the attribution reads as a
signature rather than a fourth paragraph. */
.elementor-4388 .elementor-element-nh018{
margin-top:26px;padding:20px 22px;
background:linear-gradient(135deg,#FFF6F7 0%,#FFFBFB 100%);
border:1px solid #F6E4E7;border-radius:12px;
font-size:14.5px;line-height:1.75;color:var(--nicvd-muted);
}
.elementor-4388 .elementor-element-nh018 strong{
font-family:var(--nicvd-disp);font-weight:700;font-size:16px;
color:var(--nicvd-navy);letter-spacing:.2px;
}
/* Small heart mark ahead of the signatory's name. */
.elementor-4388 .elementor-element-nh018 strong::before{
content:'';display:inline-block;vertical-align:-2px;
width:15px;height:15px;margin-right:9px;
background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.8 4.8 0 0 1 8-3.2A4.8 4.8 0 0 1 20 10c0 5.8-8 11-8 11z' fill='%23C8102E'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width:1024px){
.elementor-4388 .elementor-element-nh020{padding:26px}
.elementor-4388 .elementor-element-nh019{padding:30px 4px 4px}
.elementor-4388 .elementor-element-nh013::before{width:104px;height:92px;left:14px;top:14px}
}
@media (max-width:600px){
.elementor-4388 .elementor-element-nh020{padding:16px;border-radius:16px}
.elementor-4388 .elementor-element-nh013{border-radius:12px}
.elementor-4388 .elementor-element-nh013::before{width:78px;height:70px;background-size:12px 12px}
.elementor-4388 .elementor-element-nh019{padding:24px 2px 2px}
.elementor-4388 .elementor-element-nh014 p{font-size:11.5px;letter-spacing:.16em;gap:10px;margin-bottom:14px}
.elementor-4388 .elementor-element-nh014 p::after{flex-basis:38px}
.elementor-4388 .elementor-element-nh015{padding-bottom:20px}
.elementor-4388 .elementor-element-nh015::after{width:48px;height:3px}
.elementor-4388 .elementor-element-nh016 p{font-size:15px;line-height:1.72}
.elementor-4388 .elementor-element-nh017{margin-top:18px;padding-top:18px}
.elementor-4388 .elementor-element-nh017 p{font-size:14.5px}
.elementor-4388 .elementor-element-nh018{margin-top:20px;padding:16px 16px;font-size:13.5px}
.elementor-4388 .elementor-element-nh018 strong{font-size:15px}
}
/* ---------------------------------------------------------------------------
Footer credit link ("Developed by Digitalk") — bold, never underlined.
The link carries inline styles from the HFE copyright widget's shortcode
field; this rule guarantees the no-underline state survives the theme's own
generic footer-link styling, and adds a keyboard focus ring so removing the
underline does not cost accessibility.
--------------------------------------------------------------------------- */
.credit-link,
.credit-link:hover,
.credit-link:focus{
font-weight:700;
text-decoration:none !important;
}
.credit-link:focus-visible{
outline:2px solid #FF3D5E;
outline-offset:2px;
border-radius:2px;
}