/**
 * Base CSS used by the builder's layout, including rows
 * and columns. Any module specific global CSS should be
 * included in fl-builder-layout-modules.css.
 */

/* Grid
------------------------------------------------------ */

.fl-builder-content *,
.fl-builder-content *:before,
.fl-builder-content *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.fl-row:before,
.fl-row:after,
.fl-row-content:before,
.fl-row-content:after,
.fl-col-group:before,
.fl-col-group:after,
.fl-col:before,
.fl-col:after,
.fl-module:not([data-accepts]):before,
.fl-module:not([data-accepts]):after,
.fl-module-content:before,
.fl-module-content:after {
	display: table;
	content: " ";
}
.fl-row:after,
.fl-row-content:after,
.fl-col-group:after,
.fl-col:after,
.fl-module:not([data-accepts]):after,
.fl-module-content:after {
	clear: both;
}
.fl-clear {
	clear: both;
}

/* Rows
------------------------------------------------------ */

.fl-row,
.fl-row-content {
	margin-left: auto;
	margin-right: auto;
	min-width: 0;
}
.fl-row-content-wrap {
	position: relative;
}

/* Photo Bg */
.fl-builder-mobile .fl-row-bg-photo .fl-row-content-wrap {
	background-attachment: scroll;
}

/* Video and Embed Code Bg */
.fl-row-bg-video,
.fl-row-bg-video .fl-row-content,
.fl-row-bg-embed,
.fl-row-bg-embed .fl-row-content {
	position: relative;
}

.fl-row-bg-video .fl-bg-video,
.fl-row-bg-embed .fl-bg-embed-code {
	bottom: 0;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
}

.fl-row-bg-video .fl-bg-video video,
.fl-row-bg-embed .fl-bg-embed-code video {
	bottom: 0;
	left: 0px;
	max-width: none;
	position: absolute;
	right: 0;
	top: 0px;
}
.fl-row-bg-video .fl-bg-video video {
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
}
.fl-row-bg-video .fl-bg-video iframe,
.fl-row-bg-embed .fl-bg-embed-code iframe {
	pointer-events: none;
	width: 100vw;
  	height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  	max-width: none;
  	min-height: 100vh;
  	min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  	position: absolute;
  	top: 50%;
  	left: 50%;
	-ms-transform: translate(-50%, -50%); /* IE 9 */
	-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
  	transform: translate(-50%, -50%);
}
.fl-bg-video-fallback {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	bottom: 0px;
	left: 0px;
	position: absolute;
	right: 0px;
	top: 0px;
}

/* Slideshow Bg */
.fl-row-bg-slideshow,
.fl-row-bg-slideshow .fl-row-content {
	position: relative;
}
.fl-row .fl-bg-slideshow {
	bottom: 0;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
}
.fl-builder-edit .fl-row .fl-bg-slideshow * {
	bottom: 0;
	height: auto !important;
	left: 0;
	position: absolute !important;
	right: 0;
	top: 0;
}

/* Row Bg Overlay */
.fl-row-bg-overlay .fl-row-content-wrap:after {
	border-radius: inherit;
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}
.fl-row-bg-overlay .fl-row-content {
	position: relative;
	z-index: 1;
}

/* Full Height Rows */
.fl-row-default-height .fl-row-content-wrap,
.fl-row-custom-height .fl-row-content-wrap {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	min-height: 100vh;
}
.fl-row-overlap-top .fl-row-content-wrap {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	width: 100%;
}
.fl-row-default-height .fl-row-content-wrap,
.fl-row-custom-height .fl-row-content-wrap {
	min-height: 0;
}

.fl-row-default-height .fl-row-content,
.fl-row-full-height .fl-row-content,
.fl-row-custom-height .fl-row-content {
  -webkit-box-flex: 1 1 auto;
  	 -moz-box-flex: 1 1 auto;
  	  -webkit-flex: 1 1 auto;
  		  -ms-flex: 1 1 auto;
  			  flex: 1 1 auto;
}
.fl-row-default-height .fl-row-full-width.fl-row-content,
.fl-row-full-height .fl-row-full-width.fl-row-content,
.fl-row-custom-height .fl-row-full-width.fl-row-content {
	max-width: 100%;
	width: 100%;
}

/* Full height align center */
.fl-row-default-height.fl-row-align-center .fl-row-content-wrap,
.fl-row-full-height.fl-row-align-center .fl-row-content-wrap,
.fl-row-custom-height.fl-row-align-center .fl-row-content-wrap {
	-webkit-align-items: center;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-align: center;
	-ms-flex-pack: center;
	justify-content: center;
	align-items: center;
}

/* Full height align bottom */
.fl-row-default-height.fl-row-align-bottom .fl-row-content-wrap,
.fl-row-full-height.fl-row-align-bottom .fl-row-content-wrap,
.fl-row-custom-height.fl-row-align-bottom .fl-row-content-wrap {
	-webkit-align-items: flex-end;
	-webkit-justify-content: flex-end;
	-webkit-box-align: end;
	-webkit-box-pack: end;
	-ms-flex-align: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	align-items: flex-end;
}

/* Column Groups
------------------------------------------------------ */
.fl-col-group-equal-height {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.fl-col-group-equal-height.fl-col-group-has-child-loading {
	flex-wrap: nowrap;
}
.fl-col-group-equal-height .fl-col,
.fl-col-group-equal-height .fl-col-content {
	display: flex;
	flex: 1 1 auto;
}
.fl-col-group-equal-height .fl-col-content {
	flex-direction: column;
	flex-shrink: 1;
	min-width: 1px;
	max-width: 100%;
	width: 100%;
}
.fl-col-group-equal-height:before,
.fl-col-group-equal-height .fl-col:before,
.fl-col-group-equal-height .fl-col-content:before,
.fl-col-group-equal-height:after,
.fl-col-group-equal-height .fl-col:after,
.fl-col-group-equal-height .fl-col-content:after{
	content: none;
}

/* Equal height align top */
.fl-col-group-nested.fl-col-group-equal-height.fl-col-group-align-top .fl-col-content,
.fl-col-group-equal-height.fl-col-group-align-top .fl-col-content {
	justify-content: flex-start;
}

/* Equal height align center */
.fl-col-group-nested.fl-col-group-equal-height.fl-col-group-align-center .fl-col-content,
.fl-col-group-equal-height.fl-col-group-align-center .fl-col-content {
	justify-content: center;
}

/* Equal height align bottom */
.fl-col-group-nested.fl-col-group-equal-height.fl-col-group-align-bottom .fl-col-content,
.fl-col-group-equal-height.fl-col-group-align-bottom .fl-col-content {
	justify-content: flex-end;
}

.fl-col-group-equal-height.fl-col-group-align-center .fl-col-group {
	width: 100%;
}

/* Columns
------------------------------------------------------ */

.fl-col {
	float: left;
	min-height: 1px;
}
.fl-col-content {
	/**
	 * This rule was added to prevent margin collapsing for
	 * modules without wrappers to ensure consistency with
	 * how margins have always worked in the builder.
	 */
	display: flex;
	flex-direction: column;
}

/* Column Bg Overlay */
.fl-col-bg-overlay .fl-col-content {
	position: relative;
}
.fl-col-bg-overlay .fl-col-content:after {
	border-radius: inherit;
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}
.fl-col-bg-overlay .fl-module {
	position: relative;
	z-index: 2;
}

/* Templates
------------------------------------------------------ */

.single:not(.woocommerce).single-fl-builder-template .fl-content {
	width: 100%;
}

/* Shapes & Patterns
------------------------------------------------------- */
.fl-builder-layer {
	position: absolute;
	top:0;
	left:0;
	right: 0;
	bottom: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.fl-builder-shape-layer {
	z-index: 0;
}
.fl-builder-shape-layer.fl-builder-bottom-edge-layer {
	z-index: 1;
}
.fl-row-bg-overlay .fl-builder-shape-layer {
	z-index: 1;
}
.fl-row-bg-overlay .fl-builder-shape-layer.fl-builder-bottom-edge-layer {
	z-index: 2;
}
.fl-row-has-layers .fl-row-content {
	z-index: 1;
}
.fl-row-bg-overlay .fl-row-content {
	z-index: 2;
}

.fl-builder-layer > * {
	display: block;
	position: absolute;
	top:0;
	left:0;
	width: 100%;
}
.fl-builder-layer + .fl-row-content {
	position: relative;
}
.fl-builder-layer .fl-shape {
	fill: #aaa;
	stroke: none;
	stroke-width: 0;
	width:100%;
}
/**
Fix ipad parallax issue on safari
https://core.trac.wordpress.org/ticket/48802
https://core.trac.wordpress.org/ticket/49285
https://github.com/WordPress/gutenberg/issues/17718
*/
@supports (-webkit-touch-callout: inherit) {
  .fl-row.fl-row-bg-parallax .fl-row-content-wrap,
  .fl-row.fl-row-bg-fixed .fl-row-content-wrap {
    background-position: center !important;
    background-attachment: scroll !important;
  }
}

@supports (-webkit-touch-callout: none) {
	.fl-row.fl-row-bg-fixed .fl-row-content-wrap {
		background-position: center !important;
		background-attachment: scroll !important;
	}
}
/**
 * Base CSS used by all (or many) modules. This file should
 * not contain any generic layout CSS that doesn't apply to
 * modules. That belongs in fl-builder-layout.css.
 */

/* Utilities
------------------------------------------------------ */

.fl-clearfix:before,
.fl-clearfix:after {
	display: table;
	content: " ";
}
.fl-clearfix:after {
	clear: both;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* Buttons
------------------------------------------------------ */

.fl-builder-content a.fl-button,
.fl-builder-content a.fl-button:visited {
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	display: inline-block;
	font-size: 16px;
	font-weight: normal;
	line-height: 18px;
	padding: 12px 24px;
	text-decoration: none;
	text-shadow: none;
}
.fl-builder-content .fl-button:hover {
	text-decoration: none;
}
.fl-builder-content .fl-button:active {
	position: relative;
	top: 1px;
}
.fl-builder-content .fl-button-width-full .fl-button {
	display: block;
	text-align: center;
}
.fl-builder-content .fl-button-width-custom .fl-button {
	display: inline-block;
	text-align: center;
	max-width: 100%;
}
.fl-builder-content .fl-button-left {
	text-align: left;
}
.fl-builder-content .fl-button-center {
	text-align: center;
}
.fl-builder-content .fl-button-right {
	text-align: right;
}
.fl-builder-content .fl-button i {
	font-size: 1.3em;
	height: auto;
	margin-right:8px;
	vertical-align: middle;
	width: auto;
}
.fl-builder-content .fl-button i.fl-button-icon-after {
	margin-left: 8px;
	margin-right: 0;
}
.fl-builder-content .fl-button-has-icon .fl-button-text {
	vertical-align: middle;
}

/* Icons
------------------------------------------------------ */

.fl-icon-wrap {
	display: inline-block;
}
.fl-icon {
	display: table-cell;
	vertical-align: middle;
}
.fl-icon a {
	text-decoration: none;
}
.fl-icon i {
	float: right;
	height: auto;
	width: auto;
}
.fl-icon i:before {
	border: none !important;
	height: auto;
	width: auto;
}
.fl-icon-text {
	display: table-cell;
	text-align: left;
	padding-left: 15px;
	vertical-align: middle;
}
.fl-icon-text-empty {
	display: none;
}
.fl-icon-text *:last-child {
	margin: 0 !important;
	padding: 0 !important;
}
.fl-icon-text a {
	text-decoration: none;
}
.fl-icon-text span {
	display: block;
}
.fl-icon-text span.mce-edit-focus {
	min-width: 1px;
}

/* Photos
------------------------------------------------------ */

.fl-module img {
	max-width: 100%;
}
.fl-photo {
	line-height: 0;
	position: relative;
}
.fl-photo-align-left {
	text-align: left;
}
.fl-photo-align-center {
	text-align: center;
}
.fl-photo-align-right {
	text-align: right;
}
.fl-photo-content {
	display: inline-block;
	line-height: 0;
	position: relative;
	max-width: 100%;
}
.fl-photo-img-svg {
	width: 100%;
}
.fl-photo-content img {
	display: inline;
	height: auto;
	max-width: 100%;
}
.fl-photo-crop-circle img {
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
}
.fl-photo-caption {
	font-size: 13px;
	line-height: 18px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fl-photo-caption-below {
	padding-bottom: 20px;
	padding-top: 10px;
}
.fl-photo-caption-hover {
	background: rgba(0,0,0,0.7);
	bottom: 0;
	color: #fff;
	left: 0;
	opacity: 0;
	filter: alpha(opacity = 0);
	padding: 10px 15px;
	position: absolute;
	right: 0;
	-webkit-transition:opacity 0.3s ease-in;
	-moz-transition:opacity 0.3s ease-in;
	transition:opacity 0.3s ease-in;
}
.fl-photo-content:hover .fl-photo-caption-hover {
	opacity: 100;
	filter: alpha(opacity = 100);
}

/* Pagination
------------------------------------------------------ */

.fl-builder-pagination,
.fl-builder-pagination-load-more {
	padding: 40px 0;
}
.fl-builder-pagination ul.page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
.fl-builder-pagination li {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
}
.fl-builder-pagination li a.page-numbers,
.fl-builder-pagination li span.page-numbers {
	border: 1px solid #e6e6e6;
	display: inline-block;
	padding: 5px 10px;
	margin: 0 0 5px;
}
.fl-builder-pagination li a.page-numbers:hover,
.fl-builder-pagination li span.current {
	background: #f5f5f5;
	text-decoration: none;
}

/* Slideshows
------------------------------------------------------ */

.fl-slideshow,
.fl-slideshow * {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;

}
.fl-slideshow .fl-slideshow-image img {
	max-width: none !important;
}
.fl-slideshow-social {
	line-height: 0 !important;
}
.fl-slideshow-social * {
	margin: 0 !important;
}

/* Sliders
------------------------------------------------------ */

.fl-builder-content .bx-wrapper .bx-viewport {
	background: transparent;
	border: none;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	left: 0;
}

/* Lightbox
------------------------------------------------------ */

.mfp-wrap button.mfp-arrow,
.mfp-wrap button.mfp-arrow:active,
.mfp-wrap button.mfp-arrow:hover,
.mfp-wrap button.mfp-arrow:focus {
	background: transparent !important;
	border: none !important;
	outline: none;
	position: absolute;
	top: 50%;
	box-shadow: none !important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
}
.mfp-wrap .mfp-close,
.mfp-wrap .mfp-close:active,
.mfp-wrap .mfp-close:hover,
.mfp-wrap .mfp-close:focus {
	background: transparent !important;
	border: none !important;
	outline: none;
	position: absolute;
	top: 0;
	box-shadow: none !important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
}
.admin-bar .mfp-wrap .mfp-close,
.admin-bar .mfp-wrap .mfp-close:active,
.admin-bar .mfp-wrap .mfp-close:hover,
.admin-bar .mfp-wrap .mfp-close:focus {
	top: 32px!important;
}
img.mfp-img {
	padding: 0;
}
.mfp-counter {
	display: none;
}

.mfp-wrap .mfp-preloader.fa {
	font-size: 30px;
}

/* Form Fields
------------------------------------------------------ */

.fl-form-field {
	margin-bottom: 15px;
}
.fl-form-field input.fl-form-error {
	border-color: #DD6420;
}
.fl-form-error-message {
	clear: both;
	color: #DD6420;
	display: none;
	padding-top: 8px;
	font-size: 12px;
	font-weight: lighter;
}
.fl-form-button-disabled {
	opacity: 0.5;
}

/* Animations
------------------------------------------------------ */

.fl-animation {
	opacity: 0;
}
.fl-builder-preview .fl-animation,
.fl-builder-edit .fl-animation,
.fl-animated {
	opacity: 1;
}
.fl-animated {
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
}

/* Button Icon Animation */
.fl-button.fl-button-icon-animation i {
	width: 0 !important;
	opacity: 0;
	-ms-filter: "alpha(opacity=0)";
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}
.fl-button.fl-button-icon-animation:hover i {
	opacity: 1! important;
    -ms-filter: "alpha(opacity=100)";
}
.fl-button.fl-button-icon-animation i.fl-button-icon-after {
	margin-left: 0px !important;
}
.fl-button.fl-button-icon-animation:hover i.fl-button-icon-after {
	margin-left: 10px !important;
}
.fl-button.fl-button-icon-animation i.fl-button-icon-before {
	margin-right: 0 !important;
}
.fl-button.fl-button-icon-animation:hover i.fl-button-icon-before {
	margin-right: 20px !important;
    margin-left: -10px;
}

/* Default button colors for non Beaver Builder themes.
------------------------------------------------------ */

.fl-builder-content a.fl-button,
.fl-builder-content a.fl-button:visited {
	background: #fafafa;
	border: 1px solid #ccc;
	color: #333;
}
.fl-builder-content a.fl-button *,
.fl-builder-content a.fl-button:visited * {
	color: #333;
}@media (max-width: 1200px) { /**
 * Styles needed for the large breakpoint.
 */
 }@media (max-width: 992px) { /* Columns
------------------------------------------------------ */

/* Reversed Responsive Stacking */
.fl-col-group.fl-col-group-medium-reversed {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap-reverse;
	flex-wrap: wrap-reverse;
	flex-direction: row-reverse;
}
 }@media (max-width: 768px) { /* Rows
------------------------------------------------------ */

.fl-row-content-wrap {
	background-attachment: scroll !important;
}
.fl-row-bg-parallax .fl-row-content-wrap {
	background-attachment: scroll !important;
	background-position: center center !important;
}

/* Column Groups
------------------------------------------------------ */

/* Equal Heights */
.fl-col-group.fl-col-group-equal-height {
	display: block;
}
.fl-col-group.fl-col-group-equal-height.fl-col-group-custom-width {
	display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

/* Reversed Responsive Stacking */
.fl-col-group.fl-col-group-responsive-reversed {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap-reverse;
	flex-wrap: wrap-reverse;
	flex-direction: row-reverse;
}
.fl-col-group.fl-col-group-responsive-reversed .fl-col:not(.fl-col-small-custom-width) {
	flex-basis: 100%;
	width: 100% !important;
}
.fl-col-group.fl-col-group-medium-reversed:not(.fl-col-group-responsive-reversed) {
	display: unset;
	display: unset;
	-webkit-flex-wrap: unset;
	flex-wrap: unset;
	flex-direction: unset;
}

/* Columns
------------------------------------------------------ */

.fl-col {
	clear: both;
	float: none;
	margin-left: auto;
	margin-right: auto;
	width: auto !important;
}
.fl-col-small:not(.fl-col-small-full-width) {
	max-width: 400px;
}
.fl-block-col-resize {
	display:none;
}
/* Rows
------------------------------------------------------ */

.fl-row[data-node] .fl-row-content-wrap {
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}
.fl-row[data-node] .fl-bg-video,
.fl-row[data-node] .fl-bg-slideshow {
	left: 0;
	right: 0;
}

/* Columns
------------------------------------------------------ */

.fl-col[data-node] .fl-col-content {
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}
 }@media (min-width: 1201px) {
	html .fl-visible-large:not(.fl-visible-desktop),
	html .fl-visible-medium:not(.fl-visible-desktop),
	html .fl-visible-mobile:not(.fl-visible-desktop) {
		display: none;
	}
}

@media (min-width: 993px) and (max-width: 1200px) {
	html .fl-visible-desktop:not(.fl-visible-large),
	html .fl-visible-medium:not(.fl-visible-large),
	html .fl-visible-mobile:not(.fl-visible-large) {
		display: none;
	}
}

@media (min-width: 769px) and (max-width: 992px) {
	html .fl-visible-desktop:not(.fl-visible-medium),
	html .fl-visible-large:not(.fl-visible-medium),
	html .fl-visible-mobile:not(.fl-visible-medium) {
		display: none;
	}
}

@media (max-width: 768px) {
	html .fl-visible-desktop:not(.fl-visible-mobile),
	html .fl-visible-large:not(.fl-visible-mobile),
	html .fl-visible-medium:not(.fl-visible-mobile) {
		display: none;
	}
}
.fl-row-fixed-width {
	max-width: 1100px;
}
.fl-row-content-wrap {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
}
.fl-module-content, .fl-module:where(.fl-module:not(:has(> .fl-module-content))) {
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
}
.page .fl-post-header, .single-fl-builder-template .fl-post-header { display:none; }




.fl-node-al05p8vrwfxm .fl-row-content {
	max-width: 1918px;
}
 .fl-node-al05p8vrwfxm > .fl-row-content-wrap {
	padding-top:0px;
	padding-right:0px;
	padding-bottom:0px;
	padding-left:0px;
}




.fl-node-ctq49ys0dxr6 {
	width: 100%;
}
@media ( max-width: 768px ) {
 .fl-node-e0mrz23jqnhc.fl-module-html.fl-module {
	margin-top:60px;
}
}

/* Start Global CSS */

/* End Global CSS */


/* Start Global Nodes CSS */

/* End Global Nodes CSS */


/* Start Layout CSS */
/* ============================================================
   LEGALCOVER PERSONAL CHECKOUT - GRAVITY FORM ID 1
   Final cleaned version
   Fields:
   15 = Stripe field
   18 = Billing Cycle
   19 = Monthly Plan
   20 = Annual Plan
   30 = Total field
   Product fields need class: lc-product-field
   Summary HTML field needs class: lc-summary-field
   Stripe field needs class: lc-payment-field
   ============================================================ */

body #gform_wrapper_1 {
  --lc-yellow: #F1C300;
  --lc-yellow-soft: #fff6c7;
  --lc-hover: #2c394a;
  --lc-ink: #17263a;
  --lc-soft-ink: #657386;
  --lc-muted: #9aa6b5;
  --lc-line: #e4e9ef;
  --lc-soft-line: #eef2f6;
  --lc-card: #f7f8fa;
  --lc-white: #ffffff;
  --lc-error: #c0392b;
  --lc-shadow: 0 22px 60px rgba(23, 38, 58, 0.08);
  --lc-ease: cubic-bezier(0.22, 1, 0.36, 1); /* IMPROVED: shared easing */

  max-width: 960px !important;
  margin: 56px auto !important;
  padding: 0 18px !important;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: var(--lc-ink) !important;
}

/* Main form card */
body #gform_wrapper_1 form {
  background: var(--lc-white) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: 24px !important;
  box-shadow: var(--lc-shadow) !important;
  padding: clamp(28px, 4vw, 42px) !important;
  overflow: visible !important;
}

/* Reset general Gravity Forms spacing */
body #gform_wrapper_1 .gform_body,
body #gform_wrapper_1 .gform_page,
body #gform_wrapper_1 .gform_page_fields {
  width: 100% !important;
  max-width: 100% !important;
}

body #gform_wrapper_1 .gform_fields {
  row-gap: 26px !important;
}

body #gform_wrapper_1 .gfield {
  margin: 0 !important;
}

body #gform_wrapper_1 .gfield_label,
body #gform_wrapper_1 .gform-field-label {
  color: var(--lc-ink) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 0 0 10px !important;
}

body #gform_wrapper_1 .gfield_required {
  color: var(--lc-yellow) !important;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */

body #gform_wrapper_1 .gf_progressbar_wrapper {
  margin: 0 0 34px !important;
  padding: 0 0 26px !important;
  border-bottom: 1px solid var(--lc-soft-line) !important;
}

body #gform_wrapper_1 .gf_progressbar_title {
  color: #8492a6 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}

body #gform_wrapper_1 .gf_progressbar {
  height: 10px !important;
  background: #f2f4f7 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

body #gform_wrapper_1 .gf_progressbar_percentage {
  height: 10px !important;
  background: var(--lc-yellow) !important;
  border-radius: 999px !important;
  transition: width 0.45s var(--lc-ease) !important; /* IMPROVED: animated fill */
}

body #gform_wrapper_1 .gf_progressbar_percentage span {
  display: none !important;
}

/* ============================================================
   STANDARD INPUTS
   ============================================================ */

body #gform_wrapper_1 input[type="text"],
body #gform_wrapper_1 input[type="email"],
body #gform_wrapper_1 input[type="tel"],
body #gform_wrapper_1 input[type="number"],
body #gform_wrapper_1 input[type="url"],
body #gform_wrapper_1 input[type="password"],
body #gform_wrapper_1 textarea,
body #gform_wrapper_1 select {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 54px !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: 15px !important;
  background: #ffffff !important;
  color: var(--lc-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

body #gform_wrapper_1 textarea {
  min-height: 145px !important;
  resize: vertical !important;
}

body #gform_wrapper_1 input:focus,
body #gform_wrapper_1 textarea:focus,
body #gform_wrapper_1 select:focus {
  border-color: var(--lc-yellow) !important;
  box-shadow: 0 0 0 4px rgba(241, 195, 0, 0.18) !important;
}

/* IMPROVED: subtle hover feedback on inputs */
body #gform_wrapper_1 input:hover:not(:focus),
body #gform_wrapper_1 textarea:hover:not(:focus),
body #gform_wrapper_1 select:hover:not(:focus) {
  border-color: var(--lc-muted) !important;
}

body #gform_wrapper_1 input::placeholder,
body #gform_wrapper_1 textarea::placeholder {
  color: #a8b2c0 !important;
  font-weight: 600 !important;
}

/* ============================================================
   PAGE 1 - PLAN SELECTION
   18 = Billing Cycle
   19 = Monthly Plan
   20 = Annual Plan
   ============================================================ */

body #field_1_18,
body #field_1_19,
body #field_1_20 {
  background: #f7f8fa !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: 22px !important;
  padding: 28px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

body #field_1_18 .gfield_label,
body #field_1_19 .gfield_label,
body #field_1_20 .gfield_label {
  display: block !important;
  margin: 0 0 18px !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--lc-ink) !important;
}

/* Page 1 clean one-column sections */
body #gform_page_1_1 .gform_fields {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 26px !important;
}

/* Billing cycle */
body #field_1_18 .gfield_radio {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 !important;
}

/* Plan cards */
body #field_1_19 .gfield_radio,
body #field_1_20 .gfield_radio {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 !important;
}

body #field_1_18 .gchoice,
body #field_1_19 .gchoice,
body #field_1_20 .gchoice {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

body #field_1_18 input[type="radio"],
body #field_1_19 input[type="radio"],
body #field_1_20 input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Billing cards */
body #field_1_18 input[type="radio"] + label {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 96px !important;
  padding: 22px !important;
  margin: 0 !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  color: var(--lc-ink) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: 0 10px 26px rgba(23, 38, 58, 0.04) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

/* Plan cards */
body #field_1_19 input[type="radio"] + label,
body #field_1_20 input[type="radio"] + label {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 160px !important;
  padding: 24px !important;
  margin: 0 !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  color: var(--lc-ink) !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: 0 12px 30px rgba(23, 38, 58, 0.05) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

body #field_1_18 input[type="radio"] + label:hover,
body #field_1_19 input[type="radio"] + label:hover,
body #field_1_20 input[type="radio"] + label:hover {
  transform: translateY(-3px) !important;
  border-color: var(--lc-yellow) !important;
  box-shadow: 0 18px 38px rgba(23, 38, 58, 0.09) !important;
}

/* IMPROVED: keyboard focus ring so tab users can see the active card */
body #field_1_18 input[type="radio"]:focus-visible + label,
body #field_1_19 input[type="radio"]:focus-visible + label,
body #field_1_20 input[type="radio"]:focus-visible + label {
  border-color: var(--lc-yellow) !important;
  box-shadow: 0 0 0 4px rgba(241, 195, 0, 0.28), 0 12px 30px rgba(23, 38, 58, 0.06) !important;
}

/* IMPROVED: tactile press feedback */
body #field_1_18 input[type="radio"] + label:active,
body #field_1_19 input[type="radio"] + label:active,
body #field_1_20 input[type="radio"] + label:active {
  transform: translateY(-1px) scale(0.992) !important;
}

body #field_1_18 input[type="radio"]:checked + label,
body #field_1_19 input[type="radio"]:checked + label,
body #field_1_20 input[type="radio"]:checked + label {
  border-color: var(--lc-yellow) !important;
  background: linear-gradient(180deg, #fffbea, var(--lc-yellow-soft)) !important;
  box-shadow: 0 18px 42px rgba(241, 195, 0, 0.24) !important;
}

/* IMPROVED: badge is always in the DOM but hidden, so it can animate
   in on selection instead of popping. Tick uses dark ink for contrast. */
body #field_1_18 input[type="radio"] + label::after,
body #field_1_19 input[type="radio"] + label::after,
body #field_1_20 input[type="radio"] + label::after {
  content: "✓" !important;
  position: absolute !important;
  top: -12px !important;
  right: -12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--lc-yellow) !important;
  color: var(--lc-ink) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 18px rgba(241, 195, 0, 0.4) !important;
  transform: scale(0) !important;
  opacity: 0 !important;
  transition: transform 0.28s var(--lc-ease), opacity 0.18s ease !important;
}

body #field_1_18 input[type="radio"]:checked + label::after,
body #field_1_19 input[type="radio"]:checked + label::after,
body #field_1_20 input[type="radio"]:checked + label::after {
  transform: scale(1) !important;
  opacity: 1 !important;
}

/* Price labels */
body #field_1_19 input[value="lite"] + label::before,
body #field_1_19 input[value="essential"] + label::before,
body #field_1_19 input[value="premium"] + label::before,
body #field_1_20 input[value="starter"] + label::before,
body #field_1_20 input[value="essential"] + label::before,
body #field_1_20 input[value="premium"] + label::before {
  display: block !important;
  width: 100% !important;
  margin-bottom: 22px !important;
  color: #748397 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

body #field_1_19 input[value="lite"] + label::before {
  content: "AED 95 / MONTH" !important;
}

body #field_1_19 input[value="essential"] + label::before {
  content: "AED 299 / MONTH" !important;
}

body #field_1_19 input[value="premium"] + label::before {
  content: "AED 399 / MONTH" !important;
}

body #field_1_20 input[value="starter"] + label::before {
  content: "AED 999 / YEAR" !important;
}

body #field_1_20 input[value="essential"] + label::before {
  content: "AED 2,988 / YEAR" !important;
}

body #field_1_20 input[value="premium"] + label::before {
  content: "AED 3,960 / YEAR" !important;
}

/* ============================================================
   SAFE HIDE PRODUCT FIELDS + TOTAL FIELD
   Do not use display:none.
   Product fields need CSS class: lc-product-field
   Total field ID: 30
   ============================================================ */

body #gform_wrapper_1 .lc-product-field,
body #gform_wrapper_1 #field_1_30 {
  position: absolute !important;
  left: -99999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body #gform_wrapper_1 .lc-product-field input,
body #gform_wrapper_1 .lc-product-field select,
body #gform_wrapper_1 .lc-product-field textarea,
body #gform_wrapper_1 #field_1_30 input,
body #gform_wrapper_1 #field_1_30 select,
body #gform_wrapper_1 #field_1_30 textarea {
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ============================================================
   CUSTOMER INFO PAGES
   IMPORTANT:
   Do NOT style all .ginput_complex globally.
   Only target name fields so Stripe does not break.
   ============================================================ */

body #gform_page_1_2 .gform_fields,
body #gform_page_1_3 .gform_fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 26px !important;
  row-gap: 26px !important;
  align-items: start !important;
}

body #gform_wrapper_1 .gfield--type-name {
  grid-column: 1 / -1 !important;
}

/* Only the Name field complex layout gets two columns */
body #gform_wrapper_1 .gfield--type-name .ginput_complex {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  width: 100% !important;
}

body #gform_wrapper_1 .gfield--type-name .ginput_complex span {
  padding: 0 !important;
  margin: 0 !important;
}

body #gform_wrapper_1 .gfield--type-name .ginput_complex label {
  margin-top: 8px !important;
  color: var(--lc-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body #gform_wrapper_1 .gfield--type-textarea {
  grid-column: 1 / -1 !important;
}

body #gform_wrapper_1 textarea {
  max-width: 100% !important;
}

/* ============================================================
   SUMMARY FIELD
   ============================================================ */

body #gform_wrapper_1 .lc-summary-field,
body #gform_wrapper_1 #lc-checkout-summary,
body #gform_wrapper_1 .lc-summary-box {
  width: 100% !important;
  max-width: 100% !important;
  grid-column: 1 / -1 !important;
}

body #gform_wrapper_1 #lc-checkout-summary {
  background: #ffffff !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: 22px !important;
  padding: 28px 30px !important;
  box-shadow: 0 16px 38px rgba(23, 38, 58, 0.06) !important;
}

/* ============================================================
   STRIPE FIELD - FULL WIDTH FIX
   Field ID: 15
   This targets your exact HTML.
   ============================================================ */

/* Payment page should not inherit customer two-column layout for Stripe */
body #gform_wrapper_1 #field_1_15 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-column: 1 / -1 !important;
  box-sizing: border-box !important;
  padding: 28px 30px !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 35px rgba(23, 38, 58, 0.06) !important;
}

/* Exact Stripe container from your HTML */
body #gform_wrapper_1 #input_1_15,
body #gform_wrapper_1 #input_1_15_1_container,
body #gform_wrapper_1 #stripe-payment-link,
body #gform_wrapper_1 #input_1_15_1,
body #gform_wrapper_1 #field_1_15 .ginput_complex,
body #gform_wrapper_1 #field_1_15 .ginput_container,
body #gform_wrapper_1 #field_1_15 .ginput_container_creditcard,
body #gform_wrapper_1 #field_1_15 .ginput_stripe_creditcard,
body #gform_wrapper_1 #field_1_15 .gform-grid-row,
body #gform_wrapper_1 #field_1_15 .gform-grid-col,
body #gform_wrapper_1 #field_1_15 .ginput_full,
body #gform_wrapper_1 #field_1_15 .StripeElement,
body #gform_wrapper_1 #field_1_15 .StripeElement--link,
body #gform_wrapper_1 #field_1_15 .StripeElement--payment-element,
body #gform_wrapper_1 #field_1_15 .__PrivateStripeElement {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Critical: undo the global ginput_complex grid for Stripe */
body #gform_wrapper_1 #field_1_15 .ginput_complex {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

/* Stripe elements spacing */
body #gform_wrapper_1 #stripe-payment-link {
  margin-bottom: 16px !important;
}

/* Stripe iframes */
body #gform_wrapper_1 #field_1_15 iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

/* Make the Stripe label clean */
body #gform_wrapper_1 #field_1_15 .gfield_label {
  margin-bottom: 20px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--lc-ink) !important;
}

/* Stripe subscription text */
body #gform_wrapper_1 #field_1_15 p {
  color: var(--lc-soft-ink) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* ============================================================
   BUTTONS
   Default: #F1C300
   Hover: #2c394a
   ============================================================ */

body #gform_wrapper_1 .gform_page_footer,
body #gform_wrapper_1 .gform_footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 36px 0 0 !important;
  padding: 26px 0 0 !important;
  border-top: 1px solid var(--lc-soft-line) !important;
}

body #gform_wrapper_1 .gform_next_button,
body #gform_wrapper_1 .gform_previous_button,
body #gform_wrapper_1 .gform_button,
body #gform_wrapper_1 input[type="button"],
body #gform_wrapper_1 input[type="submit"] {
  min-height: 54px !important;
  min-width: 150px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  padding: 0 32px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  text-align: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease !important;
}

/* IMPROVED: dark ink on the yellow button reads far better than white
   (white on #F1C300 fails contrast). It flips to white on the dark hover. */
body #gform_wrapper_1 .gform_next_button,
body #gform_wrapper_1 .gform_button,
body #gform_wrapper_1 input[type="submit"] {
  background: var(--lc-yellow) !important;
  color: var(--lc-ink) !important;
  box-shadow: 0 14px 28px rgba(241, 195, 0, 0.28) !important;
}

body #gform_wrapper_1 .gform_next_button:hover,
body #gform_wrapper_1 .gform_button:hover,
body #gform_wrapper_1 input[type="submit"]:hover {
  background: var(--lc-hover) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 30px rgba(44, 57, 74, 0.28) !important;
}

/* IMPROVED: settle the button on click */
body #gform_wrapper_1 .gform_next_button:active,
body #gform_wrapper_1 .gform_previous_button:active,
body #gform_wrapper_1 .gform_button:active,
body #gform_wrapper_1 input[type="submit"]:active {
  transform: translateY(0) !important;
}

body #gform_wrapper_1 .gform_previous_button {
  background: #ffffff !important;
  color: var(--lc-ink) !important;
  border-color: var(--lc-line) !important;
  box-shadow: none !important;
}

body #gform_wrapper_1 .gform_previous_button:hover {
  background: var(--lc-hover) !important;
  color: #ffffff !important;
  border-color: var(--lc-hover) !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   VALIDATION
   ============================================================ */

body #gform_wrapper_1 .gform_validation_errors {
  margin: 0 0 24px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(192, 57, 43, 0.22) !important;
  border-radius: 18px !important;
  background: rgba(192, 57, 43, 0.06) !important;
  color: var(--lc-error) !important;
  box-shadow: none !important;
}

body #gform_wrapper_1 .gform_validation_errors h2 {
  color: var(--lc-error) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

body #gform_wrapper_1 .gfield_error {
  padding: 14px !important;
  border-radius: 16px !important;
  background: rgba(192, 57, 43, 0.045) !important;
  border: 1px solid rgba(192, 57, 43, 0.16) !important;
}

body #gform_wrapper_1 .gfield_error input,
body #gform_wrapper_1 .gfield_error textarea,
body #gform_wrapper_1 .gfield_error select {
  border-color: rgba(192, 57, 43, 0.55) !important;
}

body #gform_wrapper_1 .validation_message,
body #gform_wrapper_1 .gfield_validation_message {
  margin-top: 8px !important;
  color: var(--lc-error) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 820px) {
  body #gform_wrapper_1 {
    margin: 32px auto !important;
    padding: 0 14px !important;
  }

  body #gform_wrapper_1 form {
    padding: 24px !important;
    border-radius: 20px !important;
  }

  body #field_1_18,
  body #field_1_19,
  body #field_1_20,
  body #gform_wrapper_1 #field_1_15,
  body #gform_wrapper_1 #lc-checkout-summary {
    padding: 22px !important;
  }

  body #field_1_18 .gfield_radio,
  body #field_1_19 .gfield_radio,
  body #field_1_20 .gfield_radio {
    grid-template-columns: 1fr !important;
  }

  body #field_1_18 input[type="radio"] + label,
  body #field_1_19 input[type="radio"] + label,
  body #field_1_20 input[type="radio"] + label {
    min-height: 96px !important;
  }

  body #gform_page_1_2 .gform_fields,
  body #gform_page_1_3 .gform_fields,
  body #gform_page_1_4 .gform_fields {
    grid-template-columns: 1fr !important;
  }

  body #gform_wrapper_1 .gfield--type-name .ginput_complex {
    grid-template-columns: 1fr !important;
  }

  body #gform_wrapper_1 .gform_page_footer,
  body #gform_wrapper_1 .gform_footer {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }

  body #gform_wrapper_1 .gform_next_button,
  body #gform_wrapper_1 .gform_previous_button,
  body #gform_wrapper_1 .gform_button,
  body #gform_wrapper_1 input[type="button"],
  body #gform_wrapper_1 input[type="submit"] {
    width: 100% !important;
  }
}

/* ============================================================
   IMPROVED: SUBTLE ENTRANCE + REDUCED-MOTION
   The reveal is optional — delete this first block if you want
   fields to appear instantly. The reduced-motion block should stay.
   ============================================================ */

@keyframes lc-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

body #gform_wrapper_1 .gform_page .gfield,
body #gform_wrapper_1 .gform_body > .gform_fields > .gfield {
  animation: lc-reveal 0.45s var(--lc-ease) both !important;
}
body #gform_wrapper_1 .gfield:nth-child(1) { animation-delay: 0.02s !important; }
body #gform_wrapper_1 .gfield:nth-child(2) { animation-delay: 0.07s !important; }
body #gform_wrapper_1 .gfield:nth-child(3) { animation-delay: 0.12s !important; }
body #gform_wrapper_1 .gfield:nth-child(4) { animation-delay: 0.17s !important; }
body #gform_wrapper_1 .gfield:nth-child(5) { animation-delay: 0.22s !important; }

/* Never animate the offscreen product/total fields */
body #gform_wrapper_1 .lc-product-field,
body #gform_wrapper_1 #field_1_30 {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body #gform_wrapper_1 *,
  body #gform_wrapper_1 *::before,
  body #gform_wrapper_1 *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   FIX: STRIPE FIELD FULL WIDTH ON PAGE 3
   The Stripe field sits inside a wrapper that is the real grid
   item, so grid-column on #field_1_15 alone did nothing. These
   rules make whatever grid item CONTAINS the field span the full
   row, then strip the width cap down through the wrappers.
   Placed last so it wins on source order.
   ============================================================ */

/* 1) Force the real grid item to span both columns — whether the
      Stripe field is the direct child OR sits inside a wrapper. */
body #gform_page_1_3 .gform_fields > #field_1_15,
body #gform_page_1_3 .gform_fields > *:has(#field_1_15) {
  grid-column: 1 / -1 !important;
}

/* 2) Remove width limits on the field and its layout wrappers only
      (NOT every descendant — that would stack Stripe's inner inputs). */
body #gform_page_1_3 #field_1_15,
body #gform_page_1_3 *:has(> #field_1_15),
body #gform_page_1_3 #field_1_15 > .ginput_container,
body #gform_page_1_3 #field_1_15 .ginput_container_creditcard,
body #gform_page_1_3 #field_1_15 .ginput_stripe_creditcard,
body #gform_page_1_3 #field_1_15 .gform-grid-row,
body #gform_page_1_3 #field_1_15 .gform-grid-col {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 100% !important;
  float: none !important;
}

/* 3) The Stripe Element iframe bakes in a pixel width when it mounts.
      Override that so it fills the now-full-width container. */
body #gform_page_1_3 #field_1_15 .StripeElement,
body #gform_page_1_3 #field_1_15 .__PrivateStripeElement,
body #gform_page_1_3 #field_1_15 iframe {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* End Layout CSS */

/* Equal height Column Bottom Alignment */
.fl-col-group-equal-height.fl-col-group-align-bottom .fl-col-content {
    -webkit-justify-content: flex-end;
            justify-content: flex-end;
          -webkit-box-align: end;
           -webkit-box-pack: end;
              -ms-flex-pack: end;
}

/* H1-H6 Margin Reset in all Modules */
.uabb-module-content h1,
.uabb-module-content h2,
.uabb-module-content h3,
.uabb-module-content h4,
.uabb-module-content h5,
.uabb-module-content h6 {
    margin: 0;
    clear: both;
}

/* Anchor Tag Css */

.fl-module-content a,
.fl-module-content a:hover,
.fl-module-content a:focus {
    text-decoration: none;
}

/* Row Separator CSS */

.uabb-row-separator {
    position: absolute;
    width: 100%;
    left: 0;
}

.uabb-top-row-separator {
    top: 0;
    bottom: auto
}

.uabb-bottom-row-separator {
    top: auto;
    bottom: 0;
}

.fl-builder-content-editing .fl-visible-medium.uabb-row,
.fl-builder-content-editing .fl-visible-medium-mobile.uabb-row,
.fl-builder-content-editing .fl-visible-mobile.uabb-row {
    display: none !important;
}

@media (max-width: 992px) {

    .fl-builder-content-editing .fl-visible-desktop.uabb-row,
    .fl-builder-content-editing .fl-visible-mobile.uabb-row {
        display: none !important;
    }

    .fl-builder-content-editing .fl-visible-desktop-medium.uabb-row,
    .fl-builder-content-editing .fl-visible-medium.uabb-row,
    .fl-builder-content-editing .fl-visible-medium-mobile.uabb-row {
        display: block !important;
    }
}

@media (max-width: 768px) {
    .fl-builder-content-editing .fl-visible-desktop.uabb-row,
    .fl-builder-content-editing .fl-visible-desktop-medium.uabb-row,
    .fl-builder-content-editing .fl-visible-medium.uabb-row {
        display: none !important;
    }

    .fl-builder-content-editing .fl-visible-medium-mobile.uabb-row,
    .fl-builder-content-editing .fl-visible-mobile.uabb-row {
        display: block !important;
    }
}

.fl-responsive-preview-content .fl-builder-content-editing {
    overflow-x: hidden;
    overflow-y: visible;
}

.uabb-row-separator svg {
    width: 100%;
}

.uabb-top-row-separator.uabb-has-svg svg {
    position: absolute;
    padding: 0;
    margin: 0;
    left: 50%;
    top: -1px;
    bottom: auto;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.uabb-bottom-row-separator.uabb-has-svg svg {
    position: absolute;
    padding: 0;
    margin: 0;
    left: 50%;
    bottom: -1px;
    top: auto;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.uabb-bottom-row-separator.uabb-has-svg .uasvg-wave-separator {
    bottom: 0;
}
.uabb-top-row-separator.uabb-has-svg .uasvg-wave-separator {
    top: 0;
}

/**
 *
 *  Svg Triangle Separator
 *  Big Triangle Separator
 *  Big Triangle Left Separator
 *  Svg Half Circle Separator
 *  Curve Center Separator
 *  Waves Separator
 *  Stamp
 *  Grass
 *  Slime
 *  Grass Bend
 *  Wave Slide
 *  Muliple Triangles
 *  Pine Tree
 *  Pine Tree Bend
 *
 ***************************************/
.uabb-bottom-row-separator.uabb-svg-triangle svg,
.uabb-bottom-row-separator.uabb-xlarge-triangle svg,
.uabb-top-row-separator.uabb-xlarge-triangle-left svg,
.uabb-bottom-row-separator.uabb-svg-circle svg,
.uabb-top-row-separator.uabb-slime-separator svg,
.uabb-top-row-separator.uabb-grass-separator svg,
.uabb-top-row-separator.uabb-grass-bend-separator svg,
.uabb-bottom-row-separator.uabb-mul-triangles-separator svg,
.uabb-top-row-separator.uabb-wave-slide-separator svg,
.uabb-top-row-separator.uabb-pine-tree-separator svg,
.uabb-top-row-separator.uabb-pine-tree-bend-separator svg,
.uabb-bottom-row-separator.uabb-stamp-separator svg,
.uabb-bottom-row-separator.uabb-xlarge-circle svg,
.uabb-top-row-separator.uabb-wave-separator svg{
    left: 50%;
    -webkit-transform: translateX(-50%) scaleY(-1);
       -moz-transform: translateX(-50%) scaleY(-1);
        -ms-transform: translateX(-50%) scaleY(-1);
         -o-transform: translateX(-50%) scaleY(-1);
            transform: translateX(-50%) scaleY(-1);
}

/*
 *  Big Triangle
*/
.uabb-bottom-row-separator.uabb-big-triangle svg {
    left: 50%;
    -webkit-transform: scale(1) scaleY(-1) translateX(-50%);
       -moz-transform: scale(1) scaleY(-1) translateX(-50%);
        -ms-transform: scale(1) scaleY(-1) translateX(-50%);
         -o-transform: scale(1) scaleY(-1) translateX(-50%);
            transform: scale(1) scaleY(-1) translateX(-50%);
}

.uabb-top-row-separator.uabb-big-triangle svg {
    left: 50%;
    -webkit-transform: translateX(-50%) scale(1);
       -moz-transform: translateX(-50%) scale(1);
        -ms-transform: translateX(-50%) scale(1);
         -o-transform: translateX(-50%) scale(1);
            transform: translateX(-50%) scale(1);
}

/**
 *
 *  Big Triangle Right Separator
 *
 ***************************************/
.uabb-top-row-separator.uabb-xlarge-triangle-right svg {
    left: 50%;
    -webkit-transform: translateX(-50%) scale(-1);
       -moz-transform: translateX(-50%) scale(-1);
        -ms-transform: translateX(-50%) scale(-1);
         -o-transform: translateX(-50%) scale(-1);
            transform: translateX(-50%) scale(-1);
}

.uabb-bottom-row-separator.uabb-xlarge-triangle-right svg {
    left: 50%;
    -webkit-transform: translateX(-50%) scaleX(-1);
       -moz-transform: translateX(-50%) scaleX(-1);
        -ms-transform: translateX(-50%) scaleX(-1);
         -o-transform: translateX(-50%) scaleX(-1);
            transform: translateX(-50%) scaleX(-1);
}

/**
 *
 *  Curve Left Separator
 *  Curve Right Separator
 *
 ***************************************/
.uabb-top-row-separator.uabb-curve-up-separator svg {
    left: 50%;
     -webkit-transform: translateX(-50%) scaleY(-1);
       -moz-transform: translateX(-50%) scaleY(-1);
        -ms-transform: translateX(-50%) scaleY(-1);
         -o-transform: translateX(-50%) scaleY(-1);
            transform: translateX(-50%) scaleY(-1);
}

.uabb-top-row-separator.uabb-curve-down-separator svg {
    left: 50%;
    -webkit-transform: translateX(-50%) scale(-1);
       -moz-transform: translateX(-50%) scale(-1);
        -ms-transform: translateX(-50%) scale(-1);
         -o-transform: translateX(-50%) scale(-1);
            transform: translateX(-50%) scale(-1);
}

.uabb-bottom-row-separator.uabb-curve-down-separator svg {
    left: 50%;
    -webkit-transform: translateX(-50%) scaleX(-1);
       -moz-transform: translateX(-50%) scaleX(-1);
        -ms-transform: translateX(-50%) scaleX(-1);
         -o-transform: translateX(-50%) scaleX(-1);
            transform: translateX(-50%) scaleX(-1);
}


/**
 *
 *  Tilt Left Separator
 *  Tilt Right Separator
 *
 ***************************************/

.uabb-top-row-separator.uabb-tilt-left-separator svg {
    left: 50%;
    -webkit-transform: translateX(-50%) scale(-1);
       -moz-transform: translateX(-50%) scale(-1);
        -ms-transform: translateX(-50%) scale(-1);
         -o-transform: translateX(-50%) scale(-1);
            transform: translateX(-50%) scale(-1);
}

.uabb-top-row-separator.uabb-tilt-right-separator svg{
    left: 50%;
    -webkit-transform: translateX(-50%) scaleY(-1);
       -moz-transform: translateX(-50%) scaleY(-1);
        -ms-transform: translateX(-50%) scaleY(-1);
         -o-transform: translateX(-50%) scaleY(-1);
            transform: translateX(-50%) scaleY(-1);
}

.uabb-bottom-row-separator.uabb-tilt-left-separator svg {
    left: 50%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
}

.uabb-bottom-row-separator.uabb-tilt-right-separator svg {
    left: 50%;
    -webkit-transform: translateX(-50%) scaleX(-1);
       -moz-transform: translateX(-50%) scaleX(-1);
        -ms-transform: translateX(-50%) scaleX(-1);
         -o-transform: translateX(-50%) scaleX(-1);
            transform: translateX(-50%) scaleX(-1);
}

.uabb-top-row-separator.uabb-tilt-left-separator,
.uabb-top-row-separator.uabb-tilt-right-separator {
    top: 0;
}

.uabb-bottom-row-separator.uabb-tilt-left-separator,
.uabb-bottom-row-separator.uabb-tilt-right-separator {
    bottom: 0;
}

/**
 *
 *  Clouds Separator
 *  Multi Triangle
 *  Arrow Inward
 *  Arrow Outward
 *
 ***************************************/

.uabb-top-row-separator.uabb-arrow-outward-separator svg,
.uabb-top-row-separator.uabb-arrow-inward-separator svg,
.uabb-top-row-separator.uabb-cloud-separator svg,
.uabb-top-row-separator.uabb-multi-triangle svg {
    left: 50%;
    -webkit-transform: translateX(-50%) scaleY(-1);
       -moz-transform: translateX(-50%) scaleY(-1);
        -ms-transform: translateX(-50%) scaleY(-1);
         -o-transform: translateX(-50%) scaleY(-1);
            transform: translateX(-50%) scaleY(-1);
}

.uabb-bottom-row-separator.uabb-multi-triangle svg {
    bottom: -2px;
}

.uabb-row-separator.uabb-round-split:after,
.uabb-row-separator.uabb-round-split:before {
    left: 0;
    width: 50%;
    background: inherit inherit/inherit inherit inherit inherit;
    content: '';
    position: absolute
}


/* Buttons
------------------------------------------------------ */

.uabb-button-wrap a,
.uabb-button-wrap a:visited {
    display: inline-block;
    font-size: 16px;
    line-height: 18px;
    text-decoration: none;
    text-shadow: none;
}

.fl-builder-content .uabb-button:hover {
    text-decoration: none;
}

.fl-builder-content .uabb-button-width-full .uabb-button {
    display: block;
    text-align: center;
}

.uabb-button-width-custom .uabb-button {
    display: inline-block;
    text-align: center;
    max-width: 100%;
}
.fl-builder-content .uabb-button-left {
    text-align: left;
}
.fl-builder-content .uabb-button-center {
    text-align: center;
}
.fl-builder-content .uabb-infobox .uabb-button-center,
.fl-builder-content .uabb-modal-action-wrap .uabb-button-center,
.fl-builder-content .uabb-ultb3-box .uabb-button-center,
.fl-builder-content .uabb-slide-down .uabb-button-center,
.fl-builder-content .uabb-blog-post-content .uabb-button-center,
.fl-builder-content .uabb-cta-wrap .uabb-button-center,
.fl-builder-content .fl-module-uabb-off-canvas .uabb-button-wrap .uabb-button-center{ 
     text-align: inherit;
}

.fl-builder-content .uabb-button-right {
    text-align: right;
}

.fl-builder-content .uabb-button i,
.fl-builder-content .uabb-button i:before {
    font-size: 1em;
    height: 1em;
    line-height: 1em;
    width: 1em;
}

.uabb-button .uabb-button-icon-after {
    margin-left: 8px;
    margin-right: 0;
}
.uabb-button .uabb-button-icon-before {
    margin-left: 0;
    margin-right: 8px;
}
.uabb-button .uabb-button-icon-no-text {
    margin: 0;
}
.uabb-button-has-icon .uabb-button-text {
    vertical-align: middle;
}

/* Icons
------------------------------------------------------ */

.uabb-icon-wrap {
    display: inline-block;
}
.uabb-icon a {
    text-decoration: none;
}
.uabb-icon i {
    display: block;
}
.uabb-icon i:before {
    border: none !important;
    background: none !important;
}
.uabb-icon-text {
    display: table-cell;
    text-align: left;
    padding-left: 15px;
    vertical-align: middle;
}
.uabb-icon-text *:last-child {
    margin: 0 !important;
    padding: 0 !important;
}
.uabb-icon-text a {
    text-decoration: none;
}

/* Photos
------------------------------------------------------ */

.uabb-photo {
    line-height: 0;
    position: relative;
    z-index: 2;
}
.uabb-photo-align-left {
    text-align: left;
}
.uabb-photo-align-center {
    text-align: center;
}
.uabb-photo-align-right {
    text-align: right;
}
.uabb-photo-content {
    border-radius: 0;
    display: inline-block;
    line-height: 0;
    position: relative;
    max-width: 100%;
    overflow: hidden;
}
.uabb-photo-content img {
    border-radius: inherit;
    display: inline;
    height: auto;
    max-width: 100%;
    width: auto;
}
.fl-builder-content .uabb-photo-crop-circle img {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}
.fl-builder-content .uabb-photo-crop-square img {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.uabb-photo-caption {
    font-size: 13px;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.uabb-photo-caption-below {
    padding-bottom: 20px;
    padding-top: 10px;
}
.uabb-photo-caption-hover {
    background: rgba(0,0,0,0.7);
    bottom: 0;
    color: #fff;
    left: 0;
    opacity: 0;
    visibility: hidden;
    filter: alpha(opacity = 0);
    padding: 10px 15px;
    position: absolute;
    right: 0;
    -webkit-transition:visibility 200ms linear;
    -moz-transition:visibility 200ms linear;
    transition:visibility 200ms linear;
}
.uabb-photo-content:hover .uabb-photo-caption-hover {
    opacity: 100;
    visibility: visible;
}

/* Panel & Buttons
------------------------------------------------------ */
.uabb-active-btn {
    background: #1e8cbe;
    border-color: #0074a2;
    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,.6);
    box-shadow: inset 0 1px 0 rgba(120,200,230,.6);
    color: white;
}
.fl-builder-bar .fl-builder-add-content-button {
    display: block !important;
    opacity: 1 !important;
}

/* Image Icon Object */
.uabb-imgicon-wrap .uabb-icon {
    display: block;
}
.uabb-imgicon-wrap .uabb-icon i{
    float: none;
}

/* Photo */
.uabb-imgicon-wrap .uabb-image {
    line-height: 0;
    position: relative;
}
.uabb-imgicon-wrap .uabb-image-align-left {
    text-align: left;
}
.uabb-imgicon-wrap .uabb-image-align-center {
    text-align: center;
}
.uabb-imgicon-wrap .uabb-image-align-right {
    text-align: right;
}
.uabb-imgicon-wrap .uabb-image-content {
    display: inline-block;
    border-radius: 0;
    line-height: 0;
    position: relative;
    max-width: 100%;
}
.uabb-imgicon-wrap .uabb-image-content img {
    display: inline;
    height: auto !important;
    max-width: 100%;
    width: auto;
    border-radius: inherit;
    box-shadow: none;
    box-sizing: content-box;
}
.fl-builder-content .uabb-imgicon-wrap .uabb-image-crop-circle img {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}
.fl-builder-content .uabb-imgicon-wrap .uabb-image-crop-square img {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}


/* Creative Button
___________________________________________________________________________*/

.uabb-creative-button-wrap a,
.uabb-creative-button-wrap a:visited {
    background: #fafafa;
    border: 1px solid #ccc;
    color: #333;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    position: relative;
    -webkit-transition: all 200ms linear;
       -moz-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
         -o-transition: all 200ms linear;
            transition: all 200ms linear;

}

.uabb-creative-button-wrap a:focus {
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
}

.uabb-creative-button-wrap a .uabb-creative-button-text,
.uabb-creative-button-wrap a .uabb-creative-button-icon,
.uabb-creative-button-wrap a:visited .uabb-creative-button-text,
.uabb-creative-button-wrap a:visited .uabb-creative-button-icon {
    -webkit-transition: all 200ms linear;
       -moz-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
         -o-transition: all 200ms linear;
            transition: all 200ms linear;
}

.uabb-creative-button-wrap a:hover {
    text-decoration: none;
}

.uabb-creative-button-wrap .uabb-creative-button-width-full .uabb-creative-button {
    display: block;
    text-align: center;
}
.uabb-creative-button-wrap .uabb-creative-button-width-custom .uabb-creative-button {
    display: inline-block;
    text-align: center;
    max-width: 100%;
}
.uabb-creative-button-wrap .uabb-creative-button-left {
    text-align: left;
}
.uabb-creative-button-wrap .uabb-creative-button-center {
    text-align: center;
}
.uabb-creative-button-wrap .uabb-creative-button-right {
    text-align: right;
}
.uabb-creative-button-wrap .uabb-creative-button i {
    font-size: 1.3em;
    height: auto;
    vertical-align: middle;
    width: auto;
}

.uabb-creative-button-wrap .uabb-creative-button .uabb-creative-button-icon-after {
    margin-left: 8px;
    margin-right: 0;
}
.uabb-creative-button-wrap .uabb-creative-button .uabb-creative-button-icon-before {
    margin-right: 8px;
    margin-left: 0;
}
.uabb-creative-button-wrap.uabb-creative-button-icon-no-text .uabb-creative-button i {
    margin: 0;
}

.uabb-creative-button-wrap .uabb-creative-button-has-icon .uabb-creative-button-text {
    vertical-align: middle;
}
.uabb-creative-button-wrap a,
.uabb-creative-button-wrap a:visited {
    padding: 12px 24px;
}

/*  Translate Button styles */

.uabb-creative-button.uabb-creative-transparent-btn {
    background: transparent;
}
.uabb-creative-button.uabb-creative-transparent-btn:after {
    content: '';
    position: absolute;
    z-index: 1;
    -webkit-transition: all 200ms linear;
       -moz-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
         -o-transition: all 200ms linear;
            transition: all 200ms linear;
}

/* transparent-fill-top, transparent-fill-bottom  */
.uabb-transparent-fill-top-btn:after,
.uabb-transparent-fill-bottom-btn:after {
    width: 100%;
    height: 0;
    left: 0;
}

/* transparent-fill-top */
.uabb-transparent-fill-top-btn:after {
    top: 0;
}
/* transparent-fill-bottom */
.uabb-transparent-fill-bottom-btn:after {
    bottom: 0;
}

/* transparent-fill-left, transparent-fill-right */
.uabb-transparent-fill-left-btn:after,
.uabb-transparent-fill-right-btn:after {
    width: 0;
    height: 100%;
    top: 0;
}

/* transparent-fill-left */
.uabb-transparent-fill-left-btn:after {
    left: 0;
}
/* transparent-fill-right */
.uabb-transparent-fill-right-btn:after {
    right: 0;
}


/* transparent-fill-center */
.uabb-transparent-fill-center-btn:after{
    width: 0;
    height: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
       -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
         -o-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
}

/*  transparent-fill-diagonal, transparent-fill-horizontal  */
.uabb-transparent-fill-diagonal-btn:after,
.uabb-transparent-fill-horizontal-btn:after {
    width: 100%;
    height: 0;
    top: 50%;
    left: 50%;
}

/*  transparent-fill-diagonal */
.uabb-transparent-fill-diagonal-btn{
    overflow: hidden;
}
.uabb-transparent-fill-diagonal-btn:after{
    -webkit-transform: translateX(-50%) translateY(-50%) rotate( 45deg );
       -moz-transform: translateX(-50%) translateY(-50%) rotate( 45deg );
        -ms-transform: translateX(-50%) translateY(-50%) rotate( 45deg );
         -o-transform: translateX(-50%) translateY(-50%) rotate( 45deg );
            transform: translateX(-50%) translateY(-50%) rotate( 45deg );
}
/* transparent-fill-horizontal */
.uabb-transparent-fill-horizontal-btn:after{
    -webkit-transform: translateX(-50%) translateY(-50%);
       -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
         -o-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
}


/*  3D Button styles */
.uabb-creative-button-wrap .uabb-creative-threed-btn.uabb-threed_down-btn,
.uabb-creative-button-wrap .uabb-creative-threed-btn.uabb-threed_up-btn,
.uabb-creative-button-wrap .uabb-creative-threed-btn.uabb-threed_left-btn,
.uabb-creative-button-wrap .uabb-creative-threed-btn.uabb-threed_right-btn {
    -webkit-transition: none;
       -moz-transition: none;
        -ms-transition: none;
         -o-transition: none;
            transition: none;
}

.perspective {
    -webkit-perspective: 800px;
       -moz-perspective: 800px;
            perspective: 800px;
            margin: 0;
}
.uabb-creative-button.uabb-creative-threed-btn:after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 200ms linear;
       -moz-transition: all 200ms linear;
            transition: all 200ms linear;
}

.uabb-creative-button.uabb-creative-threed-btn {
    outline: 1px solid transparent;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

/*  3D Button styles --- Animate to top */
.uabb-creative-threed-btn.uabb-animate_top-btn:after {
    height: 40%;
    left: 0;
    top: -40%;
    width: 100%;
    -webkit-transform-origin: 0% 100%;
       -moz-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: rotateX(90deg);
       -moz-transform: rotateX(90deg);
            transform: rotateX(90deg);
}

/*  3D Button styles --- Animate to bottom */
.uabb-creative-threed-btn.uabb-animate_bottom-btn:after {
    width: 100%;
    height: 40%;
    left: 0;
    top: 100%;
    -webkit-transform-origin: 0% 0%;
       -moz-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: rotateX(-90deg);
       -moz-transform: rotateX(-90deg);
        -ms-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
}

/*  3D Button styles --- Animate to Left */
.uabb-creative-threed-btn.uabb-animate_left-btn:after {
    width: 20%;
    height: 100%;
    left: -20%;
    top: 0;
    -webkit-transform-origin: 100% 0%;
       -moz-transform-origin: 100% 0%;
        -ms-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-transform: rotateY(-60deg);
       -moz-transform: rotateY(-60deg);
        -ms-transform: rotateY(-60deg);
            transform: rotateY(-60deg);
}

/*  3D Button styles --- Animate to Right */
.uabb-creative-threed-btn.uabb-animate_right-btn:after {
    width: 20%;
    height: 100%;
    left: 104%;
    top: 0;
    -webkit-transform-origin: 0% 0%;
       -moz-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: rotateY(120deg);
       -moz-transform: rotateY(120deg);
        -ms-transform: rotateY(120deg);
            transform: rotateY(120deg);
}


/* Animate Top */
.uabb-animate_top-btn:hover{
    -webkit-transform: rotateX(-15deg);
       -moz-transform: rotateX(-15deg);
        -ms-transform: rotateX(-15deg);
         -o-transform: rotateX(-15deg);
            transform: rotateX(-15deg);

}

/* Animate Bottom */
.uabb-animate_bottom-btn:hover{
    -webkit-transform: rotateX(15deg);
       -moz-transform: rotateX(15deg);
        -ms-transform: rotateX(15deg);
         -o-transform: rotateX(15deg);
            transform: rotateX(15deg);

}

/* Animate Left */
.uabb-animate_left-btn:hover{
    -webkit-transform: rotateY(6deg);
       -moz-transform: rotateY(6deg);
        -ms-transform: rotateY(6deg);
         -o-transform: rotateY(6deg);
            transform: rotateY(6deg);
}

/* Animate Right */
.uabb-animate_right-btn:hover{
    -webkit-transform: rotateY(-6deg);
       -moz-transform: rotateY(-6deg);
        -ms-transform: rotateY(-6deg);
         -o-transform: rotateY(-6deg);
            transform: rotateY(-6deg);

}

/*  Flat Button styles  */

/*  Common Classes  */
.uabb-creative-flat-btn.uabb-animate_to_right-btn,
.uabb-creative-flat-btn.uabb-animate_to_left-btn,
.uabb-creative-flat-btn.uabb-animate_from_top-btn,
.uabb-creative-flat-btn.uabb-animate_from_bottom-btn {
    overflow: hidden;
    position: relative;
}

.uabb-creative-flat-btn.uabb-animate_to_right-btn i,
.uabb-creative-flat-btn.uabb-animate_to_left-btn i,
.uabb-creative-flat-btn.uabb-animate_from_top-btn i,
.uabb-creative-flat-btn.uabb-animate_from_bottom-btn i {
    bottom: 0;
    height: 100%;
    margin: 0;
    opacity: 1;
    position: absolute;
    right: 0;
    width: 100%;
    -webkit-transition: all 200ms linear;
       -moz-transition: all 200ms linear;
            transition: all 200ms linear;
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
         -o-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}

.uabb-creative-flat-btn.uabb-animate_to_right-btn .uabb-button-text,
.uabb-creative-flat-btn.uabb-animate_to_left-btn .uabb-button-text,
.uabb-creative-flat-btn.uabb-animate_from_top-btn .uabb-button-text,
.uabb-creative-flat-btn.uabb-animate_from_bottom-btn .uabb-button-text {
    display: inline-block;
    width: 100%;
    height: 100%;
    -webkit-transition: all 200ms linear;
       -moz-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
         -o-transition: all 200ms linear;
            transition: all 200ms linear;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
}

/*  Making Icon position center  */
.uabb-creative-flat-btn.uabb-animate_to_right-btn i:before,
.uabb-creative-flat-btn.uabb-animate_to_left-btn i:before,
.uabb-creative-flat-btn.uabb-animate_from_top-btn i:before,
.uabb-creative-flat-btn.uabb-animate_from_bottom-btn i:before {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

/*  Common Hover Classes */
.uabb-creative-flat-btn.uabb-animate_to_right-btn:hover i,
.uabb-creative-flat-btn.uabb-animate_to_left-btn:hover i {
    left: 0;
}
.uabb-creative-flat-btn.uabb-animate_from_top-btn:hover i,
.uabb-creative-flat-btn.uabb-animate_from_bottom-btn:hover i {
    top: 0;
}

/*  Animate Icon to the right */
.uabb-creative-flat-btn.uabb-animate_to_right-btn i {
    top: 0;
    left: -100%;
}
.uabb-creative-flat-btn.uabb-animate_to_right-btn:hover .uabb-button-text {
    -webkit-transform: translateX(200%);
       -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
         -o-transform: translateX(200%);
            transform: translateX(200%);
}

/*  Animate Icon to the left */
.uabb-creative-flat-btn.uabb-animate_to_left-btn i {
    top: 0;
    left: 100%;
}

.uabb-creative-flat-btn.uabb-animate_to_left-btn:hover .uabb-button-text {
    -webkit-transform: translateX(-200%);
       -moz-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
         -o-transform: translateX(-200%);
            transform: translateX(-200%);
}


/*  Animate Icon From the Top */
.uabb-creative-flat-btn.uabb-animate_from_top-btn i {
    top: -100%;
    left: 0;
}

.uabb-creative-flat-btn.uabb-animate_from_top-btn:hover .uabb-button-text {
    -webkit-transform: translateY(400px);
       -moz-transform: translateY(400px);
        -ms-transform: translateY(400px);
         -o-transform: translateY(400px);
            transform: translateY(400px);
}

/*  Animate Icon From the Bottom */
.uabb-creative-flat-btn.uabb-animate_from_bottom-btn i {
    top: 100%;
    left: 0;
}

.uabb-creative-flat-btn.uabb-animate_from_bottom-btn:hover .uabb-button-text {
    -webkit-transform: translateY(-400px);
       -moz-transform: translateY(-400px);
        -ms-transform: translateY(-400px);
         -o-transform: translateY(-400px);
            transform: translateY(-400px);
}

/* Media/Video CSS */
.uabb-tab-acc-content .wp-video, 
.uabb-tab-acc-content video.wp-video-shortcode, 
.uabb-tab-acc-content .mejs-container:not(.mejs-audio), 
.uabb-tab-acc-content .mejs-overlay.load,
.uabb-adv-accordion-content .wp-video, 
.uabb-adv-accordion-content video.wp-video-shortcode, 
.uabb-adv-accordion-content .mejs-container:not(.mejs-audio), 
.uabb-adv-accordion-content .mejs-overlay.load {
    width: 100% !important;
    height: 100% !important;
}
.uabb-tab-acc-content .mejs-container:not(.mejs-audio),
.uabb-adv-accordion-content .mejs-container:not(.mejs-audio) {
    padding-top: 56.25%;
}
.uabb-tab-acc-content .wp-video, 
.uabb-tab-acc-content video.wp-video-shortcode,
.uabb-adv-accordion-content .wp-video, 
.uabb-adv-accordion-content video.wp-video-shortcode {
    max-width: 100% !important;
}
.uabb-tab-acc-content video.wp-video-shortcode,
.uabb-adv-accordion-content video.wp-video-shortcode {
    position: relative;
}
.uabb-tab-acc-content .mejs-container:not(.mejs-audio) .mejs-mediaelement,
.uabb-adv-accordion-content .mejs-container:not(.mejs-audio) .mejs-mediaelement {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.uabb-tab-acc-content .mejs-overlay-play,
.uabb-adv-accordion-content .mejs-overlay-play {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto !important;
    height: auto !important;
}
.fl-row-content-wrap .uabb-row-particles-background,
.uabb-col-particles-background {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
/* Theme Button
------------------------------------------------------ */
/*.fl-builder-content a.uabb-button,
.fl-builder-content a.uabb-button:visited,
.fl-builder-content a.uabb-creative-button,
.fl-builder-content a.uabb-creative-button:visited*/

.uabb-creative-button-wrap a,
.uabb-creative-button-wrap a:visited {
		font-family: inherit;
			font-weight: 500;
	
	
	
	
	}

.uabb-dual-button .uabb-btn,
.uabb-dual-button .uabb-btn:visited {
		font-family: inherit;
			font-weight: 500;
		
	
	
	}


/* Responsive Js Breakpoint Css */

.uabb-js-breakpoint {
	content:"default";
	display:none;
}
@media screen and (max-width: 992px) {
	.uabb-js-breakpoint {
		content:"992";
	}
}

@media screen and (max-width: 768px) {
	.uabb-js-breakpoint {
		content:"768";
	}
}