/*
Theme Name:     Qualitex
Theme URI:
Description:		A WordPress theme for Qualitex
Author:         Christofer Laurin
Author URI:     https://github.com/dreadted/
Template:       themify-ultra
Version:        0.1.0
Text Domain:		qualitex-theme
Domain Path:		/languages
*/

:root {
	--primary: #01ffff;
	--primary_06: #01ffff10;
	--secondary: #4b0082;

	--dark: #1a1a1a;
	--medium: #9d75b8;
	--light: #f6ebf9;

	--white: #fff;
	--white_13: #ffffff20;
	--black: #000;

	--background-color: var(--dark);
	--text-color: var(--white);
	--heading-color: var(--white);

	--text-shadow: 0 0 0.2em var(--dark);

	--link-color: var(--primary);
	--link-hover: var(--secondary);

	--theme_accent: var(--primary);
	--theme_accent_semi: var(--secondary);

	--border-radius: 6px;
	--border-round: 50em;

	--fluentform-primary: var(--primary);
	--fluentform-secondary: var(--dark);
	--fluentform-danger: var(--error);
	--fluentform-border-radius: 4px;
}

/* body & headings
-----------------------------------------------------------------*/
body {
	background-color: var(--background-color);
	font-family: "lato";
	font-weight: 400;
	font-size: 1.2em;
	line-height: 1.4em;
	color: var(--text-color);
}

h2,
h2 > strong {
	color: var(--heading-color);
	font-family: "poppins";
	font-size: clamp(2rem, 2vw + 1rem, 3rem);
	font-weight: 700;
	line-height: 1.05em;
	letter-spacing: -0.02em;
}

h3,
h3 > strong {
	color: var(--text-color);
	font-family: "poppins";
	font-size: clamp(1.3rem, 2vw + 0.8rem, 2rem);
	font-weight: 700;
	line-height: 1.1em;
	letter-spacing: 0.02em;
	margin-block-start: clamp(1rem, 2vw + 1rem, 1.4rem);
}

h4,
h4 > strong {
	color: var(--text-color);
	font-family: "poppins";
	font-size: clamp(1.1rem, 2vw + 0.6rem, 1.4rem);
	font-weight: 600;
	line-height: 1.1em;
	letter-spacing: 0.02em;
	margin-block-start: clamp(1rem, 2vw + 1rem, 1.4rem);
}

/* buttons
-----------------------------------------------------------------*/
:root {
	--theme_btn_rounded: var(--tb_rounded_corner);
}

.module-buttons-item {
	font-weight: 600;
	margin-block-start: 0.6em;
	margin-inline-end: 0.6em;
	transition: all 0.3s;
}

.module-buttons-item:hover {
	opacity: 0.6;
	transform: translateY(-2px);
}

.module-buttons-item + .module-buttons-item {
	margin-inline-start: 0;
}

.home .module.module-buttons .ui,
.home button,
.home .ff-default .ff_btn_style {
	background-color: var(--primary);
	color: var(--secondary);
	font-size: 1em;
	font-weight: 600;
	text-transform: none;
	text-align: center;
	justify-content: center;
	letter-spacing: normal;
	min-width: 8rem;
}

.home .module-buttons-item:nth-child(2) a.ui.builder_button {
	background-color: var(--white);
	color: var(--secondary);
}

.ff_btn_style {
	color: var(--secondary) !important;
}

/* site-logo
-----------------------------------------------------------------*/
#site-logo {
	margin: 0.3rem 0 0 0;
	height: 4rem;
}

#site-logo span,
#footer-logo span {
	background: linear-gradient(45deg, var(--medium) 30%, var(--primary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	display: inline-block;
	font-size: 1.2em;
	font-weight: 900;
	padding-block-end: 0.4em;
}

/* header
-----------------------------------------------------------------*/
#header {
	padding: 28px;
}

#pagewrap #headerwrap.fixed-header,
.transparent-header #pagewrap #headerwrap.fixed-header {
	background: none;
	color: var(--primary);
}

#main-nav a {
	--link-hover: var(--secondary);
	--link-hover-bg: var(--primary);

	color: var(--link-color);
	text-transform: uppercase;
	transition: all 0.3s;
}

#main-nav a:hover:not(li.menu-item-weglot a) {
	color: var(--medium);
	border-bottom: 2px solid var(--medium);
}

#main-nav .highlight-link a {
	background-color: var(--primary);
	color: var(--secondary);
	font-weight: bold;
}

#main-nav .highlight-link a:hover:not(li.menu-item-weglot a) {
	color: var(--secondary);
	opacity: 0.6;
	border-bottom: none;
	transform: translateY(-2px);
}

#pagewrap #headerwrap #main-nav {
	--link-hover: var(--secondary);
}

#headerwrap.fixed-header:before {
	-webkit-backdrop-filter: unset;
	backdrop-filter: unset;
	background: linear-gradient(to bottom, var(--dark), transparent);
}

#pagewrap #headerwrap.fixed-header #main-nav {
	--link-hover: var(--primary);
}

#mobile-menu.sidemenu-on {
	color: var(--primary);
}

#mobile-menu.sidemenu-on li.menu-item {
	text-align: center;
	font-size: 1.5em;
	font-weight: 400;
}

#headerwrap #mobile-menu.sidemenu-on li.menu-item a {
	color: var(--link-color);
	padding: 0.5em;
	margin-block-end: 0.5em;
}

#headerwrap
	#mobile-menu.sidemenu-on
	li.menu-item
	a:hover:not(li.menu-item-weglot a) {
	color: var(--link-hover);
	background-color: var(--link-hover-bg);
}

@media screen and (max-width: 680px) {
	img.site-logo-image {
		transform: scale(0.8);
	}
}

@media screen and (max-width: 1100px) {
	#headerwrap .sidemenu {
		background: color-mix(in srgb, var(--dark) 90%, transparent);
		backdrop-filter: blur(5px);
	}

	#mobile-menu .navbar-wrapper {
		display: flex;
		flex-direction: column;
	}
}

/* page
-----------------------------------------------------------------*/
.transparent-header #content {
	padding-block-start: 4rem;
}

.module_row > .row_inner {
	background-color: transparent;
	padding: clamp(0.5rem, 4vw, 6rem);
}

.module_row > .row_inner > .module_column.col-full,
.module_row > .row_inner > .module_column.first {
	background: linear-gradient(to bottom right, var(--secondary), var(--dark));
	color: var(--text-color);
	border-radius: var(--tb_rounded_corner);
	padding: 0;
}

.section-content > .sub_column.first {
	padding: clamp(0.5rem, 8vw, 6rem);
}

/* start
-------------------------------------------------- */
#start .section-content > .sub_column.first {
	height: calc(100dvh - 12rem);
}

/* start-1
-------------------------------------------------- */
@media screen and (min-width: 768px) {
	#start-1 .module-feature {
		margin-block-start: 2rem;
	}
}

/* start-2
-------------------------------------------------- */
#start-2 ol {
	counter-reset: step-counter;
	list-style: none;
	margin-inline-start: 0;
}

#start-2 li {
	position: relative;
	counter-increment: step-counter;
	font-weight: 500;
	margin-block: 3rem;
	padding-left: 4rem;
}

#start-2 li::before {
	content: counter(step-counter);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--primary);
	color: var(--secondary);
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--border-round);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "poppins";
	font-size: 2rem;
	font-weight: 700;
	user-select: none;
}

#start-2 li strong {
	color: var(--primary);
}

#start-2 li h3 {
	margin: 0;
}

/* start-3
-------------------------------------------------- */
#start-3 .module-feature {
	padding-block: clamp(2rem, 4vw, 6rem);
}

#start-3 .module-feature-chart-html5 {
	background-color: var(--primary);
}
#start-3 .module-feature svg {
	fill: var(--secondary);
}

#start-3 .module-feature-title {
	font-weight: 500;
	text-align: left;
	letter-spacing: 0;
	padding-block: 1rem;
}

/* start-5
-------------------------------------------------- */
#start-5 .accordion-title {
	font-size: 120%;
	transition: all 0.3s;
}

#start-5 .accordion-title:hover {
	opacity: 0.6;
	transform: translateY(-2px);
}

#start-5 .tb_title_accordion {
	display: flex;
	align-items: center;
}

#start-5 .tb_title_accordion i {
	width: 3rem;
	min-width: 3rem;
	max-width: 3rem;
	margin-right: 0.5rem;
}

#start-5 .tb_title_accordion svg {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0.2rem;
	fill: var(--primary);
}

#start-5 .tb_title_accordion i.accordion-icon svg:nth-of-type(2),
#start-5 .tb_title_accordion i.accordion-active-icon svg:nth-of-type(2) {
	display: none;
}

#start-5 .accordion-content {
	border-bottom: dashed 1px var(--primary);
	border-left: dashed 1px var(--primary);
	margin-left: 0.9rem;
}

#start-5 .accordion-content p {
	margin: 0;
}

/* start-6
-------------------------------------------------- */
#start-6 div.module-testimonial-slider.image-bubble .testimonial-content {
	background-color: var(--white_13);
	color: var(--white);
	line-height: 1.2em;
	margin: 0 clamp(0rem, 2vw, 4rem) 4rem 0;
}

#start-6
	div.module-testimonial-slider.image-bubble
	.testimonial-content::after {
	color: var(--white);
	content: "”";
	font-family: "DM Serif Display", Georgia, "Times New Roman", Times, serif;
	font-size: 11em;
	opacity: 0.1;
	position: absolute;
	top: 0.5em;
	left: 1.5rem;
	z-index: -1;
}

#start-6 .module-testimonial-slider.image-bubble .testimonial-image {
	transform: translateY(0);
}

#start-6 figure.testimonial-image img {
	border-radius: 0.3em;
}

/* footer
-----------------------------------------------------------------*/
#footerwrap {
	background-color: var(--dark);
}

#footer {
	--text-color: var(--white);
	color: var(--white);
	margin-block-end: 10rem;
}

#footer .social-links .tf_fa {
	width: 0.8em;
	height: 0.8em;
	transform: translateY(-2px);
}

#footer .social-links li em {
	padding: 0.2em;
}

#footer .social-links .social-link-item {
	margin: 0 2rem 0.5rem 0;
}

#footer .social-links a {
	color: var(--primary);
}

#footer .social-links a:hover {
	color: var(--white);
}

#footer .social-links a:hover em {
	background: none;
}

#footer .footer-text {
	margin-inline-start: 0.5rem;
}

#footer #menu-main-menu li.menu-item-weglot {
	display: inline-block;
	margin-right: 10px;
}

#footer-logo span {
	font-size: 0.9em;
}

/* animations
---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.fadeInUp,
	.zoomIn {
		opacity: 0;
		transition-property: all;
		transition-duration: 0.8s;
		transition-timing-function: ease-in-out;
	}

	.fadeInUp {
		transform: translate3d(0, 50%, 0);
	}

	.zoomIn {
		transform: scale3d(0.9, 0.9, 0.9);
	}

	.in-view,
	.themify_builder_active .fadeInUp,
	.themify_builder_active .zoomIn {
		opacity: 1;
		transform: translate3d(0, 0, 0) scaleX(1);
	}
}