/* normalizes behaviour between browsers*/
button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

/* Reset CSS*/
*,::after,::before{box-sizing:border-box}a,button{cursor:revert}menu,ol{list-style:none}img{max-inline-size:100%;max-block-size:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert}::placeholder{color:unset}::marker{content:initial}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable=false])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable=true]){-webkit-user-drag:element}:where(dialog:modal){all:revert}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* GENERAL BEHAVIOUR */
:root{	
	scroll-behavior:smooth;
}
/* COLORS */
:root{	
	--primary-color:#556b2f;
	--primary-color-light: #556b2f;
	--primary-color-dark: #556b2f;

	--secondary-color:#e9555e;
	--success-color:#dc85ff;
	--green-color: #64ffa3;
	--failure-color:#ff6f6f;
	--bg-main:#e0cebe;

	--text-color: #1e2224;

	--light-line-color: #f5f5f52b;

	--bg-input-color: #efefef;
	--card-bg-color: #1d1a27;

	--light-color: #f5f5f5;
}

/* GENERAL */
body,html{
	font-family: "Mulish", sans-serif;
	letter-spacing: 0.7px;
	max-width:100%;
	min-height:100vh;
	overflow-x:hidden;
	margin:0;
	padding:0;
	color: var(--text-color);
	background: var(--bg-main);
}
html{
	scroll-padding-top: 4rem;
}
@media(max-width: 550px){
	html{
		scroll-padding-top: 6rem;
	}
}
@media(max-width: 550px) {
	input[type="text"], input[type="email"], textarea {
		scroll-margin-top: 6rem; 
	}
}
ol {
	list-style-type: decimal;
}
ol li {
	font-weight: normal; 
	margin-bottom: 0.5rem;
}

ol li::marker {
	font-weight: bold;
}
a{
	text-decoration: none;
	color: var(--text-color);
}

/* TEXT AND FONTS */
h1, h2, h3, h4{
	margin: 0;
}
h1{
	font-family: 'Mulish',sans-serif;
	font-size: clamp(2rem, 5vw, 3.75rem);
	font-weight: 700;   
	line-height: 1.2em;
	letter-spacing: 0.5px;
}
.h1-svg svg{
	width: clamp(2rem, 7vw, 3.75rem);
	height: clamp(2rem, 7vw, 3.75rem);
}
h2{
	font-family: 'Mulish',sans-serif;
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 700;   
	line-height: 1.2em;
	letter-spacing: 1px;
}
h3{
	font-size: 40px;
	font-weight: 400;
	line-height: 48px;
}
h4{
	font-family: 'Mulish',sans-serif;
	font-size: 1.3rem;
	line-height: 1.7rem;
	font-weight: 700;
	letter-spacing: 1px;    
}
.large, .medium, .small{
	max-width: 1000px;
}
.large{
	font-size: 1.1rem;
	line-height: 32px;
}
.medium{
	font-size: 1rem;
	line-height: 24px;
}
.small{
	font-size: 0.9rem;
	line-height: 22px;
}

.gradient-text {
	background: linear-gradient(to left, var(--blur-color-1) 30%, var(--blur-color-2) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.primary-color{
	color: var(--primary-color);
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* The entire page wrapper which displays when screen has loaded (entire page content) */
.page-content-wrapper{
	text-align: center;	
	background: var(--bg-main);
	width: 100vw;
}
.page-wrapper{
	max-width: 1300px;
	width: 95vw;
	margin: auto;
}

/* GENERAL OTHER THINGS */
.own-link{text-decoration:none;color: var(--primary-color-light);font-weight:700;cursor:pointer}
.no-decoration{text-decoration: none;color: inherit;}
.primary-color{color: var(--primary-color);}
.primary-color-light{color: var(--primary-color-light);}
.bold{font-weight: bold;}
.margin-bottom-05{margin-bottom: 0.5rem;}
.margin-top-05{margin-top: 0.5rem;}
.margin-top-1{margin-top: 1rem;}
.margin-top-2{margin-top: 2rem;}
.margin-top-3{margin-top: 3rem;}
.margin-top-4{margin-top: 4rem;}
.margin-top-5{margin-top: 5rem;}
.margin-bottom-neg025{margin-bottom: -0.25rem;}
.margin-bottom-neg05{margin-bottom: -0.5rem;}
.margin-bottom-1{margin-bottom: 1rem;}
.margin-bottom-15{margin-bottom: 1.5rem;}
.margin-bottom-2{margin-bottom: 2rem;}
.margin-bottom-5{margin-bottom: 5rem;}
.margin-auto{margin: auto;}
.show-text{display: block;}
.hide-text{display: none;}
.max-width-1000{max-width: 1000px;}

.mobile-divider,
.mobile-divider-2{
	display: none;
	width: 75%;
	border-top: 1px solid var(--light-color);
	margin: 2.5rem auto 0 auto;
}
@media(max-width: 900px){
	.mobile-divider{
		display: block;
	}
}
@media(max-width: 700px){
	.mobile-divider-2{
		display: block;
	}
}


/* BUTTONS */
.hero-buttons-wrapper{
	display: flex;
	gap: 5%;
}
.hero-buttons-wrapper-mobile{
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
}
.main-button {
	padding: 1rem 2rem;
	text-align: center;
	cursor: pointer;
	background: linear-gradient(to right, var(--primary-color), var(--primary-color-dark));
	border-radius: 5rem;
	transition: all .15s ease-in-out;
	color: var(--light-color);
	font-weight: bold;
	position: relative;
	box-shadow: 0 4px 4px #a085f13d;
	text-wrap: nowrap;
}
.secondary-button{
	padding: 0.9rem 2rem;
	font-size: 0.9rem;
	text-align: center;
	cursor: pointer;
	border-radius: 5rem;
	transition: all .15s ease-in-out;
	font-weight: bold;
	position: relative;
	text-wrap: nowrap;
	background: none;
	border: 1px solid var(--primary-color);
	box-shadow: 0 4px 4px #a085f13d;
}
.hero-button{
	font-size: 1.2rem;
}
.main-button:hover,
.secondary-button:hover{
	box-shadow: 0 0 10px 0 var(--primary-color) inset, 0 0 20px 2px var(--primary-color);
}
.main-button:active,
.secondary-button:active{
	transform: scale(0.95);
}
.header-button{
	padding: 0.75rem 1.25rem;
	box-shadow: none;
}
.header-mobile-button{
	display: block;
	margin: 0 auto 1.5rem auto;
	width: 200px;
	padding-left: 2rem;
	font-size: 1.1rem;
}
@media (max-width: 500px) {
	.header-mobile-button{
		margin: 0 0 1.5rem 2rem;
	}
}

/* IMAGE TEXT WRAPPER */
.image-text-text-wrapper{
	text-align: left;
}
.image-text-wrapper-left,
.image-text-wrapper-right{
	display: flex;
	flex-direction: row;	
	align-items: center;
	gap: 5vw;
}
.image-text-wrapper-left-small,
.image-text-wrapper-right-small{
	display: flex;
	flex-direction: row;	
	align-items: center;
	gap: 3rem;
}
.image-text-image{
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	height: 500px;
	width: 500px;
	aspect-ratio: 1/1;
}
.image-text-image-small{
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	height: 300px;
	width: 300px;
	aspect-ratio: 1/1;
}
.image-text-title{
	margin-bottom: 2rem;
}
@media(max-width: 1025px){
	.image-text-image {
		height: 400px;
		width: 400px;
	}
	.image-text-image-small{
		height: 250px;
		width: 250px;
	}
}
@media(max-width: 900px){
	.image-text-wrapper-left,
	.image-text-wrapper-right{
		align-items: center;
		gap: 2rem;
		width: 100%;
	}
	.image-text-wrapper-right{
		flex-direction: column;
	}
	.image-text-wrapper-left{
		flex-direction: column-reverse;
	}
	.image-text-title{
		margin-bottom: 1rem;
	}
	.image-text-image {
		width: 100%;
		height: auto;
		max-width: 400px;		
	}
}
@media(max-width: 700px){
	.image-text-wrapper-left-small,
	.image-text-wrapper-right-small{
		align-items: center;
		gap: 2rem;
	}
	.image-text-wrapper-right-small{
		flex-direction: column;
	}
	.image-text-wrapper-left-small{
		flex-direction: column-reverse;
	}
}
@media(max-width: 350px){
	.image-text-image {
		max-height: 300px;
		max-width: 300px;
	}
	.image-text-image-small{
		max-height: 200px;
		max-width: 200px;
	}
}

/* IMAGE TEXT STYLES */
.style-animated-blob-1{
	box-shadow: 4px 4px 4px #a085f18a;
	animation: animatedBlobImage1 15s ease-in-out infinite;
	transition: all 1s ease-in-out;
}
@keyframes animatedBlobImage1{
	0%{border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;}
	50%{border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;}
	100%{border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;}
}
.style-animated-blob-2{
	box-shadow: -4px 4px 4px #a085f18a;
	animation: animatedBlobImage2 20s ease-in-out infinite;
	transition: all 1s ease-in-out;
}
@keyframes animatedBlobImage2 {
	0% { border-radius: 50% 20% 30% 70% / 30% 50% 20% 70%;}
	50% { border-radius: 40% 60% 70% 50% / 30% 60% 50% 70%;}
	100% { border-radius: 50% 20% 30% 70% / 30% 50% 20% 70%;}
}
.style-square-shadow-right{
	border-radius: 2rem;
	box-shadow: 8px 8px 0px var(--primary-color);
}
.style-square-shadow-left{
	border-radius: 2rem;
	box-shadow: -8px 8px 0px var(--primary-color);
}

/* OTHER */
.blob-container{
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) rotate(90deg);
	background: radial-gradient(circle at 30% 30%, var(--blur-color-1) 30%, transparent 40%), 
		radial-gradient(circle at 35% 35%, var(--blur-color-2) 42%, transparent 40%), 
		radial-gradient(circle at 50% 50%, var(--blur-color-1) 40%, transparent 50%), 
		radial-gradient(circle at 55% 55%, var(--blur-color-2) 40%, transparent 50%);
	filter: blur(100px);
	z-index: -1;
	animation: blobAnimation1 50s infinite linear;
}
.blob-container-1 {
	right: -30vw;
	width: 450px;
	height: 450px;
}
.blob-container-2 {
	left: 0;
	width: 400px;
	height: 400px;
}
@keyframes blobAnimation1 {
	0% {
		transform: translate(-50%, -50%) rotate(0deg) scale(1);
	}
	50% {
		transform: translate(-50%, -50%) rotate(360deg) scale(0.8);
	}
	100% {
		transform: translate(-50%, -50%) rotate(720deg) scale(1);
	}
}
.top-content-block{
	margin-top: calc(74px + 2rem);
}
@media(max-width: 550px){
	.top-content-block{
		margin-top: calc(108px + 2rem);
	}
}
.hero-section{
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5vw;
	margin: 0 5%;
	padding-top: 80px;
}
.hero-image-wrapper-mobile {
	position: relative;
	margin: 0 0 1rem 0;
}
.hero-section-mobile{
	display: none;
	margin: 0;
	min-height: 100vh;
}
.home-text-button-wrapper-mobile {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 1;
	background-color: var(--card-bg-color);
	padding: 2rem 1.5rem 3rem 1.5rem;
	margin-top: 50px;
	width: 100%;
	border-radius: 2rem;
}
@media(max-width: 900px){
	.hero-section{
		display: none;
	}
	.hero-section-mobile{
		display: block;
	}
}
@media(max-height: 600px) and (min-width: 901px){
	.hero-section{
		display: none;
	}
	.hero-section-mobile{
		display: block;
	}
}
@media (max-height: 400px) and (max-width: 900px){
	.home-text-button-wrapper-mobile {
		height: calc(100vh - 73px);
		width: 100vw;
		border-radius: 0;
		margin-top: 74px;
		top: 0;
		transform: translate(-50%, 0);
		padding-top: 2vh;
	}
}
.home-text-button-wrapper{	
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}
.hero-image-box-mobile {
	background-size: cover;
	object-fit: cover;
	background-position: center;
	margin-left: -2.5vw;
	width: 101vw;
	height: 100vh;
}
.hero-image-box{
	background-size: cover;
	object-fit: cover;
	background-position: center;
	height: 500px;
	width: 500px;
	box-shadow: 4px 4px 4px var(--primary-color);
	animation: animateHeroImageBox 15s ease-in-out infinite;
	transition: all 1s ease-in-out;
}
@keyframes animateHeroImageBox{
	0%{
		border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
	}
	50%{
		border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
	}
	100%{
		border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
	}
}
@media(max-width: 1025px){
	.hero-image-box {
		height: 400px;
		width: 400px;
	}
}
.single-title-padding{
	padding-top: 1.5rem;
}
.home-content-block{
	position: relative;
	padding: 1rem;
	z-index: 10;	
}
.home-content-pre-title{
	font-size: 1.25rem;
	font-weight: bold;
	text-align: center;
	color: var(--primary-color);
}
.home-content-title{
	text-align: center;
	font-size: 2.5rem;
	font-weight: bold;
	padding-bottom: 1rem;
}

.home-reviews-wrapper{
	margin: 2rem auto 1rem auto;
}
.home-reviews-item{
	margin-bottom: 1rem;
}
.home-reviews-text{
	font-style: italic;
}
.home-reviews-name{
	font-size: 0.85rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* HEADER */
.sticky-header {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background-color: var(--bg-main);
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 1.5rem;
}
.header-links{
	display: flex;
	gap: 1.5rem;
	align-items: center;
}
.header-logo{
	height: 60px;
	aspect-ratio: 100 / 33;
	background-size: contain;
	background-repeat: no-repeat;
}
.mobile-header-links {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	padding: 1rem 0;
	margin-top: -2px;
	gap: 1rem;
	z-index: 0;
}

.header-links-text {
	text-decoration: none;
	display: block;
	cursor: pointer;
}
.burger-menu-button {
	display: none;
	cursor: pointer;
	float: right;
}

.burger-menu-bar-1,
.burger-menu-bar-2,
.burger-menu-bar-3 {      
	height: 3px;
	background: white;
	border-radius: 100vw;
	margin: 5px 0;
	transition: 400ms;
	float: right;
}

.burger-menu-bar-1 {
	width: 40px;
}

.burger-menu-bar-2 {
	width: 30px;
}

.burger-menu-bar-3 {
	width: 20px;
}

.change .burger-menu-bar-1{
	transform: rotate(-45deg) translate(-7px, 11px);
}
.change .burger-menu-bar-2 {opacity: 0;}
.change .burger-menu-bar-3 {
	transform: rotate(45deg) translate(-7px, -11px);
	width: 40px;
}

.side-nav {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1000;
	right: 0;
	top: 84px;
	background-color: var(--card-bg-color);
	overflow-x: hidden;
	transition: 300ms;
	text-align: left;
	padding: 2rem 0;
}
.side-nav-open{
	width: 0;
	min-width: 0;
}

.header-mobile-link {
	text-decoration: none;
	font-size: 1.5rem;
	color: var(--input-bg-color);
	margin-bottom: 2rem;
	padding-left: 2rem;
	display: block;
	transition: 300ms;
}	
@media (max-width: 900px) {
	.burger-menu-button {
		display: inline-block;
	}
	.header-links{
		display: none;
	}
	.side-nav-open{
		width: 40vw;
		min-width: 300px;
	}
}
@media (max-width: 500px) {
	.side-nav-open{
		width: 100vw;
		min-width: 0;
	}
}

/* ABOUT */
.home-content-about-wrapper{
	display: flex;
	flex-wrap: wrap;
	margin: 3rem auto 2rem auto;
	gap: 1.5rem;
	width: 100%;
	max-width: 900px;
	justify-content: center;
}
.home-content-about-card{
	text-align: left;
	flex-basis: 45%;
	min-height: 175px;
	border: 1px solid var(--card-bg-color);
	background: var(--card-bg-color);
	padding: 2rem 1.5rem;
	border-radius: 0.75rem;
	box-shadow: rgb(40 33 61 / 40%) 4px 4px, rgb(36 30 53 / 30%) 8px 8px;
}

@media (max-width: 600px) {
	.home-content-about-card{
		flex-basis: 100%;
		height: auto;
		max-width: 400px;
		padding: 1.5rem 1rem;
	}
}

.about-stats-wrapper{
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 4rem;
}
@media (max-width: 650px) {
	.about-stats-wrapper{
		flex-direction: column;
		align-items: center;
		gap: 2rem;
	}
}
.about-stats-item{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.about-stats-title{
	font-size: 0.9rem;
	width: 100%;
}
.about-stats-value{
	font-size: clamp(2rem, 8vw, 4rem);
	font-weight: bold;
	width: 100%;
}

/* Systems */
.products-block{
	display: flex;
	justify-content: center;
	margin-top: 5rem;
}
.products-contact-block{
	margin-top: 5rem;
}
.systems-ul-wrapper{
	text-align: left; 
	max-width: 500px; 
	margin: auto;
}
.systems-ul-wrapper-small{
	text-align: left; 
	max-width: 150px; 
	margin: auto;
}
@media(max-width: 900px){
	.products-block{
		margin-top: 2rem;
	}
	.products-contact-block{
		margin-top: 2rem;
	}
}


/* CONTACT */
.contact-button{
	width: 120px;
	padding: 0.65rem 0rem;
	margin-top: 1rem;
}
.input-field{
	font-size: 1rem;
	color: var(--bg-main);
	background: var(--bg-input-color);
	border: none;
	border-radius: .25rem;
	padding: .5rem;
	width: 100%;
	resize: vertical;
	line-height: 1.2rem;
}
.contact-form-wrapper{
	position: relative;
	padding: 2rem 2rem 1.5rem 2rem;
	max-width: 750px;
	margin: 2rem auto 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	border: 1px solid var(--card-bg-color);
	background: var(--card-bg-color);
	border-radius: 0.75rem;
	box-shadow: rgb(40 33 61 / 40%) 4px 4px, rgb(36 30 53 / 30%) 8px 8px;
	z-index: 0;
}
.contact-information-item{
	font-size: 1.25rem;
	font-weight: bold;
	line-height: 1.75rem;
}
.contact-form-name-email-wrapper{
	display: flex;
	flex-direction: row;
	gap: 1rem;
	padding: 0 0 1rem 0;
	width: 100%;
}
.contact-accept-privacy-policy{
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
	width: 100%;
	align-items: flex-start;
	text-align: left;
}
.contact-form-sent-success{
	color: var(--success-color);
	margin-top: 1rem;
	text-align: center;
}
.contact-form-sent-failure{
	color: var(--failure-color);
	margin-top: 1rem;
	text-align: center;
}
.contact-form-sent-failure-email{
	color: var(--failure-color);
	margin-top: 1rem;
	text-align: center;
}
@media (max-width: 700px) {
	.contact-form-name-email-wrapper{
		flex-direction: column;
	}
}
@media (max-width: 500px) {
	.contact-form-wrapper{
		padding: 1rem;
	}
}
#acceptPrivacy{
	margin-top: 5px;
}

.g-recaptcha{
	transform:scale(1);
}
@media (max-width: 380px) {
	.g-recaptcha{
		transform:scale(0.9);
		margin-right: -1.5rem;
	}
}
@media (max-width: 340px) {
	.g-recaptcha{
		transform:scale(0.8);
		margin-right: -2.5rem;
	}
}
@media (max-width: 310px) {
	.g-recaptcha{
		transform:scale(0.7);
		margin-right: -3.5rem;
	}
}


/* FOOTER */
.footer-wrapper{
	min-height: 0;
	background-color: var(--dark-background);
	text-align: center;
	padding: 1rem 0;
	border-top: 1px solid var(--text-color);
}
.footer-contact-wrapper{
	padding: 1rem 0;
}
.footer-page-link-item{
	margin: 0.4rem 0;
}
.footer-logo{
	display: block;
	height: 60px;
	aspect-ratio: 100 / 33;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	margin: 0 auto 1rem auto;
}
.footer-copyright{
	padding-bottom: 1rem;
}
.footer-link{
	padding-top: 1rem;
	border-top: 1px solid var(--text-color);
}
.footer-svg{
	width: 40px;
	height: 40px;
}
.footer-socials-svg{
	width: 30px;
	height: 30px;
}
.footer-socials-svg svg path{
	fill: var(--text-color);
}
.footer-socials-wrapper{
	display: flex;
	justify-content: center;
	margin: 0 0 0.25rem 0;
	gap: 0.5rem;
}


/* Scroller */
.home-scroller-image{
	width: clamp(75px, 30vw, 150px);
	height: clamp(37.5px, 15vw, 75px);
}
.scroller {
	max-width: 1000px;
	margin: 2rem auto 4rem auto;
}

.scroller__inner {
	padding-block: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 5vw, 3.5rem);
}

.scroller[data-animated="true"] {
	overflow: hidden;
	-webkit-mask: linear-gradient(
		90deg,
		transparent,
		white 20%,
		white 80%,
		transparent
	);
	mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
	width: max-content;
	flex-wrap: nowrap;
	animation: scroll var(--_animation-duration, 40s)
		var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
	--_animation-direction: reverse;
}

.scroller[data-speed="slow"] {
	--_animation-duration: 50s;
}

@keyframes scroll {
	to {
		transform: translate(calc(-50% - 0.5rem));
	}
}
/* Q&A */
.qa-wrapper{
	margin: 0 auto 1rem auto;
	max-width: 750px;
}
.qa-item {
	margin-bottom: 1.5rem;
	background: var(--card-bg-color);
	border-radius: 0.75rem;
	box-shadow: rgb(40 33 61 / 20%) 4px 4px;
	padding: 1rem 1.5rem;
}
.qa-item-price-symbol-wrapper{
	display: flex;
	align-items: center;
	gap: 1rem;
}
.qa-item-price-desktop{
	display: block;
}
.qa-item-price-mobile{
	display: none;
	margin: 0 0 0.5rem 0;
}
@media (max-width: 500px) {
	.qa-item-price-desktop{
		display: none;
	}
	.qa-item-price-mobile{
		display: block;
	}
}
.qa-plus svg,
.qa-minus svg{
	width: 30px;
	height: 30px;
}
.qa-plus svg path,
.qa-minus svg path{
	stroke: var(--primary-color-light);
	stroke-width: 1px;
}
.qa-minus{
	display: none;
}
.qa-item-header {
	cursor: pointer;
	font-size: 1.1rem;
	font-weight: bold;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.qa-item-body {
	display: none;	
	text-align: left;
	line-height: 1.4rem;
	margin-top: 1rem;
}

/*CHRISTMAS GAME---------------------------------------------------------------------------------------------------------------------------------------------*/
.winter-background {
	position: relative; /* Viktigt för att positionera absoluta element relativt */
	background-size: cover; /* Bakgrund fyller skärmen utan att förvrängas */
	background-repeat: no-repeat;
	background-position: center;
	width: 100vw; /* Täcker hela skärmen */
	height: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden; /* Förhindra att element överlappar */
}

.points-display {
	position: absolute;
	top: 1%; 
	left: 1%;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	font-size: 16px;
	padding: 8px 12px;
	border-radius: 8px;
	z-index: 10;
}

.gift {
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0;  /* Start invisible */
	transform: scale(0);  /* Start small */
	transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}




.item {
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transform: translate(-50%, -50%);
}

.item.appear {
  animation: fadeInScale 0.5s ease forwards;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.house1 {
	width: 4%;
	height: 7%;
	top: 55%; 
	left: 40%;
}

.house2 {
	width: 8%;
	height: 14%;
	top: 62%;
	left: 60%;
}

.house3 {
	width: 16%;
	height: 28%;
	top: 70%;
	left: 42%;
}

.boy1 {
	width: 4%;
	height: 7%;
	top: 75%;
	left: 57%;
}

.girl1 {
	width: 4%;
	height: 7%;
	top: 75%;
	left: 54%;
}

.tree1 {
	width: 3%;
	height: 5%;
	top: 52%;
	left: 42%;
	opacity: 0;
}


.snowman1 {
	width: 15%;
    height: 8%;
    top: 71%;
    left: 57%;
    opacity: 0;
}

.santa1 {
	width: 15%;
    height: 8%;
    top: 11%;
    left: 47%;
    opacity: 0;
}