/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


:root {
	--fs-color-success-darker: color-mix(in srgb, var(--fs-color-success) 50%, #000000);
	--fs-color-success-lighter: color-mix(in srgb, var(--fs-color-success) 50%, #ffffff);
	--fs-100: clamp(0.8rem, 0.165vw + 0.759rem, 0.891rem);
	--fs-200: clamp(1rem, 0.341vw + 0.915rem, 1.188rem);
	--fs-300: clamp(1.25rem, 0.605vw + 1.099rem, 1.583rem);
	--fs-400: clamp(1.563rem, 0.996vw + 1.314rem, 2.11rem);
	--fs-500: clamp(1.953rem, 1.563vw + 1.562rem, 2.813rem);
	--fs-600: clamp(2.441rem, 2.378vw + 1.847rem, 3.749rem);
	--fs-700: clamp(3.052rem, 3.538vw + 2.167rem, 4.998rem);
}

body {
	font: normal normal normal var(--fs-200)/1.5 Asap, sans-serif, system-ui;
	
	:where(h1, h2, h3, h4, h5, h6, p, .lead, ul, li, ol) {margin-bottom: 1.0rem;}
	:where(p, ul, ol):has(+ :is(h1, h2, h3, h4, h5, h6)) {margin-bottom: 1.5rem;}
	:is(h1, h2, h3, h4, h5, h6, p, .lead, ul, li, ol, .button:not(.icon)):not(:has(+ :is(h1, h2, h3, h4, h5, h6, p, ul, ol, .button:not(.icon)))) {margin-bottom: 0 !important;}
	ol ol, ol ul, ul ol, ul ul {
		margin: initial;
	}
	
	h1 {font-size: var(--fs-500);}
	h2 {font-size: var(--fs-400);}
	h3 {font-size: var(--fs-300);}
	h4 {font-size: var(--fs-200);}
	h5 {font-size: var(--fs-200);}
	h6 {font-size: var(--fs-100);}
	p, ul, ol {font-size: var(--fs-200);}
	
	.fs-100 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {font-size: var(--fs-100);}
	.fs-200 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {font-size: var(--fs-200);}
	.fs-300 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {font-size: var(--fs-300);}
	.fs-400 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {font-size: var(--fs-400);}
	.fs-500 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {font-size: var(--fs-500);}
	.fs-600 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {font-size: var(--fs-600);}
	.fs-700 :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {font-size: var(--fs-700);}
	
}

#header {
	
	.header-inner.flex-row {
		flex-direction: row-reverse;
	}
	
	.logo {
		margin: 0;
		
		a {
			place-items: end;
		}
		
	}
	
}

section {
	isolation: isolate;
}

#footer {
	
	box-shadow: 0px 0px 20px 0px #00000060;
	
	.absolute-footer {
		display: none;
	}
	
}

.radius {
	
	img {
		border-radius: 10px;
	}
	
}

.social-icons a {
	color: var(--fs-color-primary) !important;
}

.bg-pattern {
	
	&::before {
		content:'';
		position: absolute;
		inset: 0 0 0 75%;
		background: url(https://inkfish.design/aa/wp-content/uploads/2025/02/pattern.svg) left top / cover space;
		opacity: 0.1;
	}
	
}

.pattern {
	transform-origin: 100% 0%;
	scale: 2;
	opacity: 0.2;
	z-index: -1;
		
	.section:has(&) {
		overflow: clip;
		isolation: isolate;
	}
	
	&.right {
		transform-origin: 0% 0%;
	}
	
	svg * {
		transform-box: fill-box;
		transform-origin: 50%;
	}
	
	g {
		
		path {
			--timing: 2s;
			animation: pulse var(--timing) ease-in-out calc(-1 * var(--timing) * var(--order) / 2) infinite alternate;
		}
		
	}
	
	&.big {
		opacity: 0.1;
		scale: 1;
		position: absolute;
		inset: 0 0 auto auto;
		translate: 70% 0%;
		height: 100%;
		
		svg {
			height: 100%;
		}
		
	}
	
}

@keyframes pulse {
	to {
		opacity: 0.25;
		scale: 0.975;
	}
}

.float {
	position: absolute;
	inset: 0 0 auto auto;
	max-width: 450px !important;
	rotate: 90deg;
	translate: 40% -120%;
}

.watermark {
	position: absolute;
	width: 100%;
	z-index: -1;
	inset: auto 0 0 0;
	display: grid;
	place-items: center end;
	min-height: 100%;
		
	& > svg {
		opacity: 0.2;
		scale: 1.075;
		min-width: 100%;
		min-height: 100%;
	}
		
	&.flip {
		inset: 0 auto auto 0;
		rotate: 180deg;
		translate: -50% 0%;
		width: 100%;
			
		& > svg {
			scale: 1;
		}
			
	}
		
	&.left {
		inset: 0 auto auto 0;
		translate: -20% 0%;
		width: 50%;
		min-width: 300px;
			
		& > svg {
			opacity: 0.3;
			scale: 1;
			filter: invert(1);
		}
		
	}
	
	&.right {
		inset: 0 0 auto auto;
		translate: 20% 0%;
		width: 60%;
		min-width: 300px;
			
		& > svg {
			scale: 1;
		}
		
	}
	
}

.watermark-repeat {
	
	.section-bg {
		position: relative;
		
		&::before {
			content: '';
			position: absolute;
			inset: 0;
		}
		
		
	}
	
}

.blog-feed {
	
	.box-vertical, .col-inner {
		background: transparent !important;
	}
	
	img {
		border-radius: 20px;
	}
	
	.post-title {
		font-size: var(--fs-300);
	}
	
}

.row-solid .col:before {
	border-width: 5px;
	border-color: var(--fs-color-secondary);
	left: -5px;
}

.grid.align-equal {
	
	& > .col > .col-inner > .row {
		height: 100%;
		display: flex;
		flex-flow: column;
		
		& > .col {
			flex-basis: unset;
		}
		
		& > .col.grow {
			flex-grow: 1;
			
			& > .col-inner {
				height: 100%;
			}
			
		}
		
	}
	
}

.clip {
	
	& > .col-inner {
		overflow: clip;
	}
	
	&.section {
		overflow-y: clip;
	}
	
}

.lightbox-content {
	overflow: clip;
	background: unset;
}

.gform_wrapper {
	--gf-form-gap-y: 20px !important;
	--gf-color-primary: #b0c399 !important;
	--gf-color-primary-darker: color-mix(in srgb, var(--gf-color-primary), #000 20%) !important;
	--gf-color-primary-lighter: color-mix(in srgb, var(--gf-color-primary), #000 20%) !important;
	
	--gf-color-in-ctrl-primary: transparent !important;
	--gf-color-in-ctrl-primary-darker: color-mix(in srgb, var(--gf-color-in-ctrl-primary), #000 20%) !important;
	--gf-color-in-ctrl-primary-lighter: color-mix(in srgb, var(--gf-color-in-ctrl-primary), #000 20%) !important;
	--gf-color-in-ctrl: color-mix(in srgb, var(--gf-color-in-ctrl-primary), transparent 70%) !important;
	
	--gf-ctrl-shadow-color-focus: color-mix(in srgb, var(--fs-color-primary), transparent 60%) !important;
	
	--gf-ctrl-label-color-primary: var(--fs-color-success) !important;
	
	--gf-ctrl-btn-bg-color-primary: var(--fs-color-primary) !important;
	
	.gform-button--width-full {
		width: 100% !important;
	}
	
	.gform_required_legend {
		display: none;
	}
	
	.ginput_container :is(input, textarea, select) {
		border-radius: 0px !important;
		color: #fff;
		font-size: var(--fs-200) !important;
		border: unset !important;
		border-bottom: 4px solid #b0c399 !important;
		outline: unset !important;
		padding: 0 !important;
		box-shadow: unset !important;
		
		&:focus-within {
			color: #fff !important;
			background: color-mix(in srgb, var(--gf-color-in-ctrl-primary), transparent 70%) !important;
			outline: unset !important;
			box-shadow: unset !important;
			border-color: var(--fs-color-secondary) !important;
		}
		
		&::placeholder {
			color: #b0c399 !important;
		}
		
	}
	
	.ginput_container_consent {
		display: flex;
		align-items: center;
	}
	
	label.gform-field-label {
		font-size: var(--fs-200) !important;
	}
	
	.gfield_consent_description {
		color: #fff !important;
		padding: 0 !important;
		border: unset !important;
	}
	
	input:checked::before {
		color: #fff !important;
	}
	
	legend, label {
		font-size: var(--fs-300) !important;
		color: #b0c399 !important;
	}
	
}

#cmplz-document {
	max-width: unset;
}


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}