/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

strong {
	font-weight: 700;
}

/* Desktop: left border only */
.fg-roi-stat-col {
	border-left: 1px solid #94fcfd !important;
}

@media screen and (max-width: 1024px) {
	#fg-roi-container {
		background-image: none !important;
	}

	/* Mobile: top border only */
	.fg-roi-stat-col {
		border-left: none !important;
		/* border-top: 1px solid #94fcfd !important; */
	}
}

.fg-contact-form ::-webkit-input-placeholder { color: var(--awb-color5) !important; font-family: Roboto, Arial, Helvetica, sans-serif !important; font-size: 20px !important; }
.fg-contact-form ::-moz-placeholder          { color: var(--awb-color5) !important; font-family: Roboto, Arial, Helvetica, sans-serif !important; font-size: 20px !important; }
.fg-contact-form :-ms-input-placeholder      { color: var(--awb-color5) !important; font-family: Roboto, Arial, Helvetica, sans-serif !important; font-size: 20px !important; }
.fg-contact-form ::placeholder               { color: var(--awb-color5) !important; font-family: Roboto, Arial, Helvetica, sans-serif !important; font-size: 20px !important; }

.fg-contact-form i,
.fg-contact-form .fusion-form-field i,
.fg-contact-form svg {
	color: var(--awb-color5) !important;
	fill: var(--awb-color5) !important;
}

.fg-img-contain img {
	object-fit: contain;
}

/* ============================================
   FG FULL TESTIMONIAL — HEIGHT LOCK
   Stack all slides in one CSS grid cell so the
   container always sizes to the tallest slide.
   Avada sets .reviews height via inline style
   (no !important); height: auto !important wins.
   Inactive .review elements are position:absolute
   by default (removed from flow); overriding to
   position:relative keeps them in flow so all
   slides contribute to the container height.
   Avada marks the active slide with .active-testimonial.
   ============================================ */
.fg-full-testimonial .reviews {
	display: grid !important;
	grid-template-columns: 1fr !important;
	height: auto !important;
}
.fg-full-testimonial .reviews .review {
	position: relative !important;
	grid-column: 1 !important;
	grid-row: 1 !important;
	visibility: hidden !important;
	opacity: 0 !important;
	transition: opacity 0.5s ease !important;
	pointer-events: none !important;
}
.fg-full-testimonial .reviews .review.active-testimonial {
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* ============================================
   FG FULL TESTIMONIAL — AUTHOR
   Add class fg-full-testimonial to the parent
   column. Apply class author to the name/
   position element.
   ============================================ */
.fg-full-testimonial .author,
.fg-full-testimonial .author span {
	text-align: right !important;
	color: var(--awb-color5) !important;
	margin-top: 5px !important;
}

/* Ensure the template-builder header sits above page content so nav dropdowns
   are not intercepted by elements below. */
.fusion-tb-header {
	position: relative;
	z-index: 1000;
}

/* Menu items with class menu-no-link behave as non-clickable dropdown parents */
.menu-no-link > a {
	pointer-events: none;
	cursor: default;
}

/* ============================================
   MENU BUTTON
   Add class menu-button to a nav menu item
   to style its link as a CTA button matching
   the fusion_button in the header row.
   ============================================ */
.menu-button > a {
	display: flex;
	align-items: center;
}

.menu-button > a > span {
	display: inline-block;
	background: var(--awb-color5);
	border: 1px solid var(--awb-color5);
	border-radius: 999px;
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-weight: 700 !important;
	font-size: var(--awb-typography5-font-size);
	line-height: var(--awb-typography5-line-height);
	letter-spacing: var(--awb-typography5-letter-spacing);
	text-transform: var(--awb-typography5-text-transform);
	padding: 4.5px 20px;
	transition: background 0.3s ease, color 0.3s ease;
	white-space: nowrap;
}

.menu-button > a:hover > span {
	background: #fff;
	color: var(--awb-color5) !important;
	border-color: var(--awb-color5);
}

/* ============================================
   FOOTER MENU BUTTON
   Add class footer-menu-button to a nav menu
   item in the footer to style it as a CTA
   button — same appearance as menu-button
   with added top margin.
   ============================================ */
.footer-menu-button > a {
	display: flex;
	align-items: center;
	margin-top: 20px;
}

.footer-menu-button > a > span {
	display: inline-block;
	background: transparent;
	border: 1px solid #fff;
	border-radius: 999px;
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-weight: 700 !important;
	font-size: var(--awb-typography5-font-size);
	line-height: var(--awb-typography5-line-height);
	letter-spacing: var(--awb-typography5-letter-spacing);
	text-transform: var(--awb-typography5-text-transform);
	padding: 4.5px 20px;
	transition: background 0.3s ease, color 0.3s ease;
	white-space: nowrap;
}

.footer-menu-button > a:hover > span {
	background: #fff;
	color: var(--awb-color5) !important;
}

#boxed-wrapper {
	max-width:calc(100% - 60px);
	margin:auto;
}

/* Global row gap — matches the 30px column spacing used site-wide */
.fusion-builder-row {
	row-gap: 30px;
}

.fg-rounded.fusion-layout-column .fusion-column-wrapper, .fg-rounded.fusion-fullwidth {
	border-radius: 20px;
}

@media screen and (max-width: 640px) {
	.fg-rounded.fusion-layout-column {
		min-height: 60vh;
	}
}

/* ============================================
   FG TOGGLE REVEAL
   Requires two nested column_inner elements
   inside a parent column, classed:
     fg-front  — default visible state
     fg-reveal — hidden state, shown on button click
   Any fusion_button inside fg-front triggers
   the reveal. Any fusion_button inside fg-reveal
   closes it and returns to fg-front.
   ============================================ */

/* Higher specificity to override Avada's column display rules on load.
   No !important — jQuery's fadeIn() sets inline display which takes precedence. */
.fusion-layout-column.fg-reveal {
	display: none;
}

/* ============================================
   FG SLIDER
   Parent column:          fg-slider
   Each nested column_inner: fg-slide
   Swiper is initialized via fg-interactions.js,
   which wraps fg-slide elements in .swiper-wrapper
   and injects .swiper-pagination below the slides.
   ============================================ */

/* Clip overflowing slides at the column, wrapper, and Swiper container levels.
   !important needed — Avada sets overflow: visible on these elements.
   The column-level clip catches bleed caused by column padding.
   width:100% is NOT applied to the column itself — Avada controls that via flex. */
.fg-slider.fusion-layout-column {
	overflow: hidden !important;
}

.fg-slider .fusion-column-wrapper,
.fg-slider .fusion-layout-columns {
	overflow: hidden !important;
	width: 100%;
}

/* Horizontal padding on the slider column creates space where adjacent slides
   bleed through. Zero it here — set padding on individual fg-slide columns
   in Fusion Builder instead. > targets only the slider's own wrapper,
   not the slide wrappers nested inside. */
.fg-slider > .fusion-column-wrapper {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Avada's inner row uses negative margins to compensate for column spacing.
   Inside the slider those margins cause the swiper container to extend beyond
   the padded column boundary, revealing adjacent slides. Reset them. */
.fg-slider .fusion-builder-row-inner {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Swiper wrapper — no wrapping, slides side by side.
   width:100% ensures the wrapper fills its row when a persistent sibling
   element precedes it inside the same flex container. */
.fg-slider .swiper-wrapper {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
}

/* Each slide — full width, override Avada's fractional widths */
.fg-slider .fusion-layout-column.fg-slide {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	flex-shrink: 0;
}

/* Define Avada's dot alignment variable as a fallback within the slider scope.
   Avada uses --awb-dots-align for justify-content on the pagination container. */
.fg-slider {
	--awb-dots-align:   center;
	--awb-dots-spacing: 8px; /* bullet margin = spacing / 2 per side = 4px each */
}

/* Pagination dots — override Avada/Swiper bundled styles.
   display:flex and bottom come from Swiper's own CSS and need !important to win. */
.fg-slider .swiper-pagination {
	position: absolute !important;
	bottom: 20px !important;
	display: flex !important;
	justify-content: center;
	width: 100%;
	line-height: 1;
}

.fg-slider .swiper-pagination-bullet {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 8px;
	border-radius: 50%;
	background: #ffffff;
	opacity: 0.4;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.fg-slider .swiper-pagination-bullet-active {
	opacity: 1;
}

/* ============================================
   FG ANCHOR BUTTON
   Add class fg-anchor-button to any fusion_button
   to pin it to the bottom-center of its column.
   :has() sets the positioning context on the
   column wrapper so absolute coordinates are
   relative to the column, not the page.
   ============================================ */
.fusion-column-wrapper:has(.fg-anchor-button) {
	position: relative;
}

.fg-anchor-button {
	position: absolute !important;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
}

/* ============================================
   FG HERO CTA
   Add class fg-hero-cta to the parent column
   that contains the two CTA button columns.
   Spreads buttons to outer edges on all
   screen sizes without relying on Fusion
   Builder alignment attributes.
   ============================================ */
.fg-hero-cta .fusion-layout-columns {
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

/* ============================================
   FG COVER IMAGE
   Add class fg-cover-image to a column that
   contains a single fusion_imageframe element.
   Image fills the full column height using
   object-fit: cover — column must stretch to
   its row height (fusion-flex-align-self-stretch).
   ============================================ */
.fg-cover-image .fusion-column-wrapper {
	height: 100%;
	padding: 0;
}

.fg-cover-image .fusion-image-element,
.fg-cover-image .fusion-imageframe {
	display: block;
	height: 100%;
}

.fg-cover-image .fusion-imageframe img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ============================================
   FG BUBBLES
   Overlapping circle word-cloud component.
   Place as a fusion_code element inside any
   Fusion Builder column.

   Row 1: standard circles
   Row 2: .fg-bubbles-row--offset — staggered
           right and overlapping upward so each
           bottom circle sits between two top circles.

   Size and overlap are controlled via CSS
   variables on .fg-bubbles — change in one place.
   ============================================ */
.fg-bubbles {
	--bubble-size: 140px;
	--bubble-gap:  44px;
	width: fit-content;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.fg-bubbles-row {
	display: flex;
	align-items: center;
}

.fg-bubble {
	width: var(--bubble-size);
	height: var(--bubble-size);
	flex-shrink: 0;
	border-radius: 50%;
	border: 2px solid var(--awb-color8);
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	font-size: 20px;
	line-height: 1.35;
	color: var(--awb-color6);
	box-sizing: border-box;
	margin-left: var(--bubble-gap); /* positive = gap, never same-row overlap */
}

.fg-bubbles-row .fg-bubble:first-child {
	margin-left: 0;
}

/* Chain pattern: offset row sits between top-row circles.
   Left offset = half the center-to-center distance (bubble-size + gap).
   Vertical overlap connects each bottom circle to both circles above it
   without any within-row overlap. */
.fg-bubbles-row--offset {
	margin-left: calc((var(--bubble-size) + var(--bubble-gap)) / 2);
	margin-top:  calc(-1 * var(--bubble-size) * 0.45);
}

/* ≤1000px: two vertical columns side by side.
   Column 1 (row 1): bubbles stacked with vertical overlap.
   Column 2 (row 2 / offset): starts lower and tucks in to overlap column 1. */
@media screen and (max-width: 1000px) {
	.fg-bubbles {
		flex-direction: row;
		align-items: flex-start;
	}

	.fg-bubbles-row {
		flex-direction: column;
		align-items: center;
	}

	/* Vertical overlap between bubbles within each column */
	.fg-bubble {
		margin-left: 0;
		margin-top: calc(-1 * var(--bubble-size) * 0.2);
	}

	/* First bubble in each column — no top overlap */
	.fg-bubbles-row .fg-bubble:first-child {
		margin-top: 0;
	}

	/* Column 2: tuck in horizontally and start lower */
	.fg-bubbles-row--offset {
		margin-left: calc(-1 * var(--bubble-size) * 0.15);
		margin-top: calc(var(--bubble-size) * 0.5);
	}
}

/* ============================================
   FG PRICING SLIDER  (#fg-pricing)
   Partial slider: first column_inner persistent,
   remaining column_inners are fg-slide.
   ============================================ */

/* Make all columns in the same row as #fg-pricing stretch to equal height.
   :has() targets preceding siblings; ~ targets following siblings. */
.fusion-layout-column:has(~ #fg-pricing),
#fg-pricing ~ .fusion-layout-column,
#fg-pricing {
	align-self: stretch;
}

/* Remove default column-wrapper margin so the persistent card
   and slider sit flush inside the 1/4 column. */
#fg-pricing > .fusion-column-wrapper {
	margin: 0;
}

#fg-pricing .fusion-builder-row-inner {
	width: 100% !important;
}

/* Force slides to full width of the swiper container.
   Higher specificity than the generic fg-slider rule to win
   against Avada's fractional column_inner width calculation. */
#fg-pricing .fg-slide {
	width: 100% !important;
	max-width: none !important;
	flex-shrink: 0;
}

/* Slides were stretching to the full outer column height (446px) because
   align-self:stretch propagated through swiper-wrapper. With the persistent
   card above, the slide started mid-column and its content (vertically
   centered inside 446px) appeared shifted low and clipped at the bottom.
   height:auto lets each slide size to its own content instead. */
#fg-pricing .swiper-wrapper {
	align-self: flex-start; /* prevents wrapper from stretching to the full 446px outer column height */
	height: auto;           /* size to tallest slide, not the outer column */
	align-items: stretch;   /* equalize all slide heights to match the tallest */
}

#fg-pricing .fg-slide {
	height: auto !important; /* lets flex stretch equalize heights without Avada overriding */
}

/* ============================================
   FG PRICE LIST
   Two-column pricing table: label left,
   price right. Use inside a fusion_code element.
   ============================================ */
.fg-price-list {
	width: 100%;
	border-collapse: collapse;
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: var(--awb-color1);
}

.fg-price-list td {
	padding: 6px 0;
}

.fg-price-list td:last-child {
	text-align: right;
}