/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* =====================================================================
   HEADER DESIGN ENHANCEMENTS  (VIVA 365)
   Scoped to Astra's header. Targets both the Header Builder (Astra 3/4)
   and the classic header classes, so it applies either way.
   ===================================================================== */

:root {
	--viva-navy:        #0a2a4e;
	--viva-navy-deep:   #071f3b;
	--viva-gold:        #f5b21c;
	--viva-gold-dark:   #e09e0c;
	--viva-white:       #ffffff;
	--viva-muted:       rgba(255, 255, 255, 0.72);
	--viva-radius:      999px;
	--viva-ease:        cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------------
   1. Overall header polish + depth
   --------------------------------------------------------------------- */
.site-header {
	box-shadow: 0 2px 18px rgba(7, 31, 59, 0.10);
}

/* Above (top) row — keep it crisp white with a hairline divider. */
.ast-above-header-wrap .ast-above-header,
.ast-above-header {
	background-color: var(--viva-white);
	border-bottom: 1px solid rgba(7, 31, 59, 0.08);
}

/* Primary (navy) row — subtle gradient for richness instead of flat fill. */
.ast-primary-header-wrap .ast-primary-header-bar,
.main-header-bar {
	background: linear-gradient(180deg, var(--viva-navy) 0%, var(--viva-navy-deep) 100%) !important;
}

/* ---------------------------------------------------------------------
   2. Sticky primary header (stays put, shrinks slightly on scroll)
   --------------------------------------------------------------------- */
.ast-primary-header-wrap {
	position: sticky;
	top: 0;
	z-index: 99;
	transition: box-shadow 0.3s var(--viva-ease);
}
.admin-bar .ast-primary-header-wrap {
	top: 32px; /* clear the WP admin toolbar for logged-in users */
}
@media (max-width: 782px) {
	.admin-bar .ast-primary-header-wrap { top: 46px; }
}

/* ---------------------------------------------------------------------
   3. Navigation menu — spacing, weight, animated underline, active state
   --------------------------------------------------------------------- */
.main-header-menu .menu-item > a,
.ast-nav-menu .menu-item > a,
.main-navigation .menu-item > a {
	position: relative;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: var(--viva-white);
	padding-top: 10px;
	padding-bottom: 10px;
	transition: color 0.25s var(--viva-ease);
}

/* Animated underline that grows from the centre on hover. */
.ast-nav-menu > .menu-item > a::after,
.main-header-menu > .menu-item > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 2px;
	width: 0;
	height: 2px;
	background: var(--viva-gold);
	border-radius: 2px;
	transform: translateX(-50%);
	transition: width 0.28s var(--viva-ease);
}
.ast-nav-menu > .menu-item > a:hover::after,
.ast-nav-menu > .menu-item.current-menu-item > a::after,
.ast-nav-menu > .menu-item.current-menu-ancestor > a::after,
.main-header-menu > .menu-item > a:hover::after,
.main-header-menu > .menu-item.current-menu-item > a::after {
	width: 22px;
}

/* Hover / active colour = brand gold. */
.main-header-menu .menu-item > a:hover,
.main-header-menu .menu-item.current-menu-item > a,
.main-header-menu .menu-item.current-menu-ancestor > a,
.ast-nav-menu .menu-item > a:hover,
.ast-nav-menu .menu-item.current-menu-item > a,
.ast-nav-menu .menu-item.current-menu-ancestor > a {
	color: var(--viva-gold) !important;
}

/* Dropdown caret sits closer to the label. */
.ast-nav-menu .menu-item .ast-header-navigation-arrow,
.main-header-menu .menu-item .ast-header-navigation-arrow {
	margin-left: 2px;
}

/* ---------------------------------------------------------------------
   4. Dropdown submenus — rounded card, soft shadow, smooth reveal
   --------------------------------------------------------------------- */
.main-header-menu .sub-menu,
.ast-nav-menu .sub-menu {
	background: var(--viva-white);
	border: 0;
	border-radius: 12px;
	padding: 8px;
	box-shadow: 0 16px 40px rgba(7, 31, 59, 0.18);
	overflow: hidden;
	margin-top: 6px;
}
.main-header-menu .sub-menu .menu-item > a,
.ast-nav-menu .sub-menu .menu-item > a {
	color: var(--viva-navy);
	font-weight: 500;
	border-radius: 8px;
	padding: 9px 14px;
	transition: background 0.2s var(--viva-ease), color 0.2s var(--viva-ease);
}
.main-header-menu .sub-menu .menu-item > a::after,
.ast-nav-menu .sub-menu .menu-item > a::after { display: none; }
.main-header-menu .sub-menu .menu-item > a:hover,
.ast-nav-menu .sub-menu .menu-item > a:hover {
	background: rgba(245, 178, 28, 0.14);
	color: var(--viva-navy) !important;
}

/* ---------------------------------------------------------------------
   5. Pill buttons  ("Report a claim", "Request a callback")
      Astra outputs these as .ast-custom-button inside header button wraps.
   --------------------------------------------------------------------- */
.ast-header-button-1 .ast-custom-button,
.ast-header-button-2 .ast-custom-button,
.site-header .ast-custom-button,
.site-header .menu-link.ast-menu-cart-outline {
	display: inline-flex;
	align-items: center;
	background: var(--viva-gold);
	color: var(--viva-navy-deep);
	font-weight: 700;
	letter-spacing: 0.2px;
	border: 0;
	border-radius: var(--viva-radius);
	padding: 12px 26px;
	box-shadow: 0 6px 16px rgba(245, 178, 28, 0.32);
	transition: transform 0.2s var(--viva-ease),
	            box-shadow 0.2s var(--viva-ease),
	            background 0.2s var(--viva-ease);
}
.ast-header-button-1 .ast-custom-button:hover,
.ast-header-button-2 .ast-custom-button:hover,
.site-header .ast-custom-button:hover {
	background: var(--viva-gold-dark);
	color: var(--viva-navy-deep);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(245, 178, 28, 0.42);
}
.ast-header-button-1 .ast-custom-button:active,
.ast-header-button-2 .ast-custom-button:active,
.site-header .ast-custom-button:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(245, 178, 28, 0.32);
}

/* Make the "Report a claim" button in the WHITE top bar an outline style so
   the two CTAs read as a hierarchy (primary gold vs. secondary outline). */
.ast-above-header .ast-custom-button,
.ast-above-header-wrap .ast-custom-button {
	background: transparent;
	color: var(--viva-navy);
	border: 2px solid var(--viva-gold);
	box-shadow: none;
	padding: 9px 22px;
}
.ast-above-header .ast-custom-button:hover,
.ast-above-header-wrap .ast-custom-button:hover {
	background: var(--viva-gold);
	color: var(--viva-navy-deep);
	box-shadow: 0 8px 18px rgba(245, 178, 28, 0.32);
}

/* ---------------------------------------------------------------------
   6. Social icons — circular chips with lift on hover
   --------------------------------------------------------------------- */
.ast-header-social-1-wrap .ast-social-icon,
.ast-header-social-wrap .ast-builder-social-element {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: transform 0.2s var(--viva-ease), background 0.2s var(--viva-ease);
}
.ast-header-social-1-wrap .ast-social-icon:hover,
.ast-header-social-wrap .ast-builder-social-element:hover {
	transform: translateY(-2px);
	background: rgba(245, 178, 28, 0.16);
}

/* ---------------------------------------------------------------------
   7. Search + account icons — align and add hover affordance
   --------------------------------------------------------------------- */
.site-header .ast-search-icon,
.site-header .ast-header-account-wrap {
	transition: color 0.2s var(--viva-ease), opacity 0.2s var(--viva-ease);
	opacity: 0.9;
}
.site-header .ast-search-icon:hover,
.site-header .ast-header-account-wrap:hover {
	color: var(--viva-gold);
	opacity: 1;
}

/* ---------------------------------------------------------------------
   8. Logo — gentle breathing room + crisp rendering
   --------------------------------------------------------------------- */
.site-header .site-branding img,
.site-header .custom-logo-link img {
	transition: transform 0.3s var(--viva-ease);
}
.site-header .custom-logo-link img {
	width: 45px;
	height: auto;
}
.site-header .site-branding a:hover img,
.site-header .custom-logo-link:hover img {
	transform: scale(1.03);
}

/* ---------------------------------------------------------------------
   9. Two CTA buttons side by side (moved into place by assets/js/header.js)
   --------------------------------------------------------------------- */
.viva-buttons-merged .ast-header-button-1,
.viva-buttons-merged .ast-header-button-2 {
	display: inline-flex;
	align-items: center;
	margin: 0;
}
/* Gap between the pair. */
.viva-buttons-merged .ast-header-button-1 {
	margin-right: 14px;
}
/* Ensure the container that now holds both buttons lays them in a row. */
.viva-buttons-merged .site-header-primary-section-right,
.viva-buttons-merged .ast-primary-header-bar .ast-builder-layout-element {
	display: flex;
	align-items: center;
}

/* Now that "Report a claim" sits in the navy bar next to the callback button,
   drop its white-bar outline treatment and match the solid gold pill so the
   pair reads as one unit. */
.viva-buttons-merged .ast-header-button-1 .ast-custom-button {
	background: var(--viva-gold);
	color: var(--viva-navy-deep);
	border: 0;
	box-shadow: 0 6px 16px rgba(245, 178, 28, 0.32);
	padding: 12px 26px;
}
.viva-buttons-merged .ast-header-button-1 .ast-custom-button:hover {
	background: var(--viva-gold-dark);
	box-shadow: 0 10px 24px rgba(245, 178, 28, 0.42);
}

/* ---------------------------------------------------------------------
   10. Mobile / responsive niceties
   --------------------------------------------------------------------- */
@media (max-width: 921px) {
	.ast-header-button-1 .ast-custom-button,
	.ast-header-button-2 .ast-custom-button {
		padding: 10px 18px;
	}
	/* Full-width, easy-to-tap CTAs in the off-canvas menu. */
	.ast-mobile-header-wrap .ast-custom-button {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.main-header-menu .sub-menu,
	.ast-nav-menu .sub-menu {
		box-shadow: none;
		border-radius: 0;
	}
}

/* ---------------------------------------------------------------------
   11. MEGA MENU (Insurance Products) — built in the child theme (no Astra Pro)
   Astra Pro is disabled, so "Insurance Products" is now a plain Astra nested
   dropdown. We turn it into a mega menu ourselves, keyed off the persistent
   custom classes on the two column items (.individual-menu / .corporate-menu):

     li.menu-item-has-children              (Insurance Products)
       > ul.sub-menu                        (← we widen this into the panel)
           > li.individual-menu  > a "Individual"  + ul.sub-menu (products)
           > li.corporate-menu   > a "Corporate"   + ul.sub-menu (products)

   We control hide + reveal entirely (no plugin dependency). Desktop only —
   mobile keeps the normal off-canvas accordion.
   --------------------------------------------------------------------- */
@media (min-width: 922px) {

	/* Anchor the panel to a full-width header context instead of the menu item,
	   so it can align to the site container rather than spilling off the left.
	   The Insurance Products <li> is made static; the header row becomes the
	   positioning parent. (Only this item is affected — About Us etc. keep their
	   own positioning.) */
	.main-header-bar,
	.ast-primary-header-bar {
		position: relative;
	}
	.ast-nav-menu .menu-item:has(> .sub-menu > .individual-menu),
	.main-header-menu .menu-item:has(> .sub-menu > .individual-menu) {
		position: static !important;
	}

	/* The mega panel: FULL-BLEED (spans the whole viewport, dropship.io-style),
	   dropped just below the header row, with its content centred to a 1240px
	   container via horizontal padding. The left:50% + margin-left:-50vw trick
	   makes it full width regardless of the (viewport-centred) offset parent.
	   display:flex is constant; hide/show uses opacity+visibility. */
	.ast-nav-menu .menu-item:has(> .sub-menu > .individual-menu) > .sub-menu,
	.main-header-menu .menu-item:has(> .sub-menu > .individual-menu) > .sub-menu {
		display: flex !important;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;

		/* Fixed to the viewport = guaranteed full-bleed, no dependence on any
		   offset parent. JS sets --viva-mega-top to the header's bottom edge. */
		position: fixed;
		top: var(--viva-mega-top, 150px);
		left: 0;
		right: 0;
		margin: 0;
		width: 100vw;
		max-width: 100vw;

		/* Content band centred to ~1240px; min 24px side padding on small screens. */
		padding: 36px max(24px, calc((100vw - 1240px) / 2)) 42px;
		background: var(--viva-white);
		border: 0;
		border-top: 3px solid var(--viva-gold);
		border-radius: 0;
		box-shadow: 0 26px 50px -20px rgba(7, 31, 59, 0.30);

		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-10px);
		transition: opacity 0.22s var(--viva-ease),
		            transform 0.22s var(--viva-ease),
		            visibility 0.22s var(--viva-ease);
		z-index: 999;
	}

	/* Reveal on hover / keyboard focus of "Insurance Products". */
	.ast-nav-menu .menu-item:has(> .sub-menu > .individual-menu):hover > .sub-menu,
	.ast-nav-menu .menu-item:has(> .sub-menu > .individual-menu):focus-within > .sub-menu,
	.main-header-menu .menu-item:has(> .sub-menu > .individual-menu):hover > .sub-menu,
	.main-header-menu .menu-item:has(> .sub-menu > .individual-menu):focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	/* Two evenly-split sections with a hairline divider and breathing room. */
	.individual-menu,
	.corporate-menu {
		flex: 1 1 0;
		min-width: 0;
		list-style: none;
		margin: 0;
		padding: 0 0 0 60px;
	}
	.individual-menu {
		padding-left: 0;
		padding-right: 60px;
	}
	.corporate-menu {
		border-left: 1px solid rgba(7, 31, 59, 0.08);
	}

	/* Section heading — small uppercase category label with a gold accent bar. */
	.individual-menu > a,
	.individual-menu > .menu-link,
	.corporate-menu > a,
	.corporate-menu > .menu-link {
		position: relative;
		display: block;
		color: var(--viva-navy) !important;
		font-weight: 700;
		font-size: 0.82em;
		text-transform: uppercase;
		letter-spacing: 1.2px;
		padding: 0 0 14px !important;
		margin: 0 0 22px !important;
		border-bottom: 1px solid rgba(7, 31, 59, 0.10);
	}
	.individual-menu > a::after,
	.individual-menu > .menu-link::after,
	.corporate-menu > a::after,
	.corporate-menu > .menu-link::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -1px;
		width: 40px;
		height: 2px;
		background: var(--viva-gold);
	}

	/* Product list — 2-column grid of "cards". The .ast-nav-menu /
	   .main-header-menu prefixes raise specificity ABOVE Astra's fixed
	   dropdown-width rule (which was pinning each list to ~220px). */
	.ast-nav-menu .individual-menu > .sub-menu,
	.ast-nav-menu .corporate-menu > .sub-menu,
	.main-header-menu .individual-menu > .sub-menu,
	.main-header-menu .corporate-menu > .sub-menu {
		position: static !important;
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px 12px;
		/* INHERIT (not force) visibility & pointer-events from the panel, so the
		   lists are only interactive when the panel is actually open. Forcing
		   these caused the invisible (opacity:0) panel to still capture hovers
		   over the hero and open the menu. */
		visibility: inherit !important;
		opacity: inherit !important;
		pointer-events: inherit !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		box-sizing: border-box;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		border: 0 !important;
		border-radius: 0 !important;
		transform: none !important;
		clip: auto !important;
		clip-path: none !important;
	}
	.individual-menu > .sub-menu > li,
	.corporate-menu > .sub-menu > li {
		list-style: none;
		margin: 0;
	}

	/* Item = card: icon chip + (title / description). dropship.io style.
	   High-specificity + !important to beat Astra's .menu-link display rule,
	   which was forcing the icon on top of the text. */
	.ast-nav-menu .individual-menu .sub-menu a,
	.ast-nav-menu .corporate-menu .sub-menu a,
	.main-header-menu .individual-menu .sub-menu a,
	.main-header-menu .corporate-menu .sub-menu a {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 13px;
		width: 100%;
		padding: 10px 12px;
		border-radius: 12px;
		color: var(--viva-navy);
		white-space: normal;
		word-break: normal;
		overflow-wrap: normal;
		hyphens: none;
		transition: background 0.16s var(--viva-ease);
	}
	.individual-menu .sub-menu a:hover,
	.corporate-menu .sub-menu a:hover {
		background: #f4f6f9;
	}

	/* Leading icon chip. */
	.viva-ic {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 10px;
		background: rgba(10, 42, 78, 0.06);
		color: var(--viva-navy);
		transition: background 0.16s var(--viva-ease), color 0.16s var(--viva-ease);
	}
	.viva-ic svg {
		width: 20px;
		height: 20px;
	}
	.individual-menu .sub-menu a:hover .viva-ic,
	.corporate-menu .sub-menu a:hover .viva-ic {
		background: var(--viva-gold);
		color: var(--viva-navy-deep);
	}

	/* Title + description stack. flex:1 so it fills the space beside the icon. */
	.viva-tx {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		min-width: 0;
	}
	.viva-ti {
		font-weight: 600;
		font-size: 0.95em;
		line-height: 1.3;
		color: var(--viva-navy);
	}
	.viva-de {
		margin-top: 2px;
		font-weight: 400;
		font-size: 0.78em;
		line-height: 1.3;
		color: #7a8794;
	}

	/* Fallback if JS hasn't enhanced yet: keep the plain label readable. */
	.individual-menu .sub-menu a .menu-text,
	.corporate-menu .sub-menu a .menu-text {
		min-width: 0;
		font-weight: 600;
		font-size: 0.95em;
	}

	/* Hide arrows INSIDE the panel only (headings + items) — but NOT the
	   top-level "Insurance Products" dropdown caret, so it still signals a
	   dropdown like "About Us". The `> .sub-menu` scope excludes the top label. */
	.menu-item:has(> .sub-menu > .individual-menu) > .sub-menu .ast-icon.icon-arrow,
	.menu-item:has(> .sub-menu > .individual-menu) > .sub-menu .ast-header-navigation-arrow,
	.menu-item:has(> .sub-menu > .individual-menu) > .sub-menu .ast-menu-toggle {
		display: none !important;
	}
}

/* =====================================================================
   12. TOP-BAR CONTACTS + RELOCATED SEARCH
   Removes the top-bar "Report a claim" button, shows Phone + Email in its
   place, and colours the search icon that JS moves into the navy nav bar.
   ===================================================================== */

/* Remove the "Report a claim" button from the white top bar. */
.ast-above-header [class*="ast-header-button"],
.ast-above-header-wrap [class*="ast-header-button"] {
	display: none !important;
}

/* Phone + email block (injected by header.js into the top-bar right). */
.viva-contacts {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: auto; /* push to the right edge within a flex top bar */
}
.viva-contact {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--viva-navy);
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1;
	white-space: nowrap;
	transition: color 0.2s var(--viva-ease);
}
.viva-contact:hover {
	color: var(--viva-gold-dark);
}
.viva-c-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(245, 178, 28, 0.16);
	color: var(--viva-navy);
}
.viva-c-ic svg {
	width: 15px;
	height: 15px;
}

/* Search icon relocated into the navy primary bar (after "Contact Us"). */
.viva-search-moved {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
}
.viva-search-moved .ast-search-icon,
.viva-search-moved .astra-search-icon,
.viva-search-moved a,
.viva-search-moved .ast-search-menu-icon {
	color: #ffffff !important;
}

/* Tighten on smaller screens: keep the icons, drop the long email text. */
@media (max-width: 1100px) {
	.viva-contacts { gap: 14px; }
	.viva-contact .viva-c-tx { display: none; }
}

/* =====================================================================
   14. PREMIUM HERO PAGE TEMPLATE (page-templates/premium-hero.php)
   ===================================================================== */
.viva-page-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 46vh;
	padding: 120px 0 70px;
	background: #062352 center / cover no-repeat;
	overflow: hidden;
	font-family: 'Poppins', sans-serif;
}
.viva-page-hero--plain {
	background: radial-gradient(120% 140% at 15% 0%, #0a3170 0%, #062352 60%);
}
.viva-page-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(6, 35, 82, 0.9) 0%, rgba(6, 35, 82, 0.68) 55%, rgba(6, 35, 82, 0.45) 100%);
}
/* Force Poppins on all hero text (the h1 title otherwise inherits the theme's
   heading font). */
.viva-page-hero,
.viva-page-hero-inner,
.viva-page-breadcrumb,
.viva-page-hero-title,
.viva-page-hero-sub {
	font-family: 'Poppins', sans-serif !important;
}
.viva-page-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 clamp(20px, 5vw, 48px);
	color: #fff;
}

/* Breadcrumb */
.viva-page-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 0.85rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.72);
	animation: viva-hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.viva-page-breadcrumb a { color: rgba(255, 255, 255, 0.72); text-decoration: none; transition: color 0.2s ease; }
.viva-page-breadcrumb a:hover { color: var(--viva-gold, #f5b21c); }
.viva-page-breadcrumb .sep { color: rgba(255, 255, 255, 0.4); }
.viva-page-breadcrumb [aria-current="page"] { color: var(--viva-gold, #f5b21c); }

/* Title with gold accent bar */
.viva-page-hero-title {
	position: relative;
	margin: 0;
	padding-bottom: 22px;
	color: #fff;
	font-weight: 800;
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	line-height: 1.1;
	letter-spacing: -0.5px;
	animation: viva-hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}
.viva-page-hero-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 4px;
	border-radius: 4px;
	background: var(--viva-gold, #f5b21c);
}
.viva-page-hero-sub {
	max-width: 60ch;
	margin: 22px 0 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	line-height: 1.6;
	animation: viva-hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
}
@keyframes viva-hero-rise {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Page content below the hero */
.viva-page-body {
	background: #ffffff;
	font-family: 'Poppins', sans-serif;
}
.viva-page-body--full { background: transparent; } /* Elementor sections own their own bg */
.viva-page-content {
	max-width: 1080px;
	margin: 0 auto;
	padding: 72px clamp(20px, 5vw, 32px) 90px;
	color: #33465a;
	line-height: 1.75;
}

/* Safety net: guarantee a full-width, no-sidebar canvas on this template even if
   Astra's content-layout filter doesn't fully apply (no navy sidebar gap). */
.viva-tpl-premium-hero #secondary { display: none !important; }
.viva-tpl-premium-hero #primary,
.viva-tpl-premium-hero .site-content > .ast-container {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 100% !important;
}
.viva-tpl-premium-hero .site-content > .ast-container {
	display: block !important;
}
.viva-tpl-premium-hero .entry-header,
.viva-tpl-premium-hero .ast-single-post .post-title { display: none; }
.viva-page-content h2,
.viva-page-content h3 { color: var(--viva-navy, #0a2a4e); }
.viva-page-content a { color: var(--viva-gold-dark, #e09e0c); }

@media (prefers-reduced-motion: reduce) {
	.viva-page-breadcrumb,
	.viva-page-hero-title,
	.viva-page-hero-sub { animation: none; }
}

/* =====================================================================
   13. CUSTOM FOOTER (.viva-footer) — premium, coded (see inc/custom-footer.php)
   ===================================================================== */

/* Safety net: hide Astra's own footer container (#colophon) so only the custom
   .viva-footer shows, even if a builder callback slips through. */
#colophon.site-footer {
	display: none !important;
}
.viva-footer {
	--vf-navy: #071f3b;
	--vf-gold: #f5b21c;
	font-family: 'Poppins', sans-serif;
	background: var(--vf-navy);
	color: rgba(255, 255, 255, 0.82);
}
.viva-footer .viva-footer-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 clamp(20px, 5vw, 40px);
}
.viva-footer-main { padding: 72px 0 56px; }

/* Grid: brand + 4 columns. */
.viva-footer-main .viva-footer-inner {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr 1.2fr 1.3fr;
	gap: 40px;
	align-items: start;
}

/* Brand column. */
.viva-footer-logo img { max-width: 70px; height: auto; }
.viva-footer-logo-text { color: #fff; font-weight: 800; font-size: 1.5rem; text-decoration: none; }
.viva-footer-tagline {
	margin: 20px 0 24px;
	color: rgba(255, 255, 255, 0.66);
	font-size: 0.95rem;
	line-height: 1.7;
	max-width: 34ch;
}

/* Column headings with a short gold accent bar. */
.viva-footer-title {
	position: relative;
	margin: 0 0 24px;
	padding-bottom: 14px;
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.3px;
}
.viva-footer-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 3px;
	border-radius: 3px;
	background: var(--vf-gold);
}

/* Link lists. */
.viva-footer-links { list-style: none; margin: 0; padding: 0; }
.viva-footer-links li { margin: 0; }
.viva-footer-links a {
	display: inline-block;
	padding: 7px 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.95rem;
	line-height: 1.45;
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}
.viva-footer-links a:hover {
	color: var(--vf-gold);
	transform: translateX(5px);
}

/* Contact column. */
.viva-footer-address {
	font-style: normal;
	margin: 0 0 18px;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.95rem;
	line-height: 1.7;
}
.viva-footer-contact-line {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.95rem;
	text-decoration: none;
	transition: color 0.2s ease;
}
.viva-footer-contact-line:hover { color: var(--vf-gold); }
.viva-footer-ic {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(245, 178, 28, 0.14);
	color: var(--vf-gold);
}
.viva-footer-ic svg { width: 16px; height: 16px; }

/* Social icons — circular chips, gold fill on hover. */
.viva-footer-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.viva-social {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.10);
	color: #fff;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.viva-social svg { width: 18px; height: 18px; }
.viva-social:hover { background: var(--vf-gold); color: var(--vf-navy); transform: translateY(-3px); }

/* Bottom bar. */
.viva-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	padding: 22px 0;
}
.viva-footer-bottom .viva-footer-inner { text-align: center; }
.viva-footer-bottom p {
	margin: 0;
	color: rgba(255, 255, 255, 0.66);
	font-size: 0.9rem;
	letter-spacing: 0.2px;
}

/* Responsive. */
@media (max-width: 992px) {
	.viva-footer-main .viva-footer-inner {
		grid-template-columns: 1fr 1fr;
		gap: 36px 30px;
	}
	.viva-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.viva-footer-main .viva-footer-inner { grid-template-columns: 1fr; }
	.viva-footer-main { padding: 52px 0 40px; }
}