/*!
Theme Name: Sygnisoft
Author: Sygnisoft
Text Domain: sygnisoft
Author URI: https://sygnisoft.com/
Description: Sygnisoft Template
Version: 1.0
*/

html {
	font-size: 16px;
}

@media screen and (max-width: 768px) {
	html {
		font-size: 14px;
		overflow-x: hidden;
	}
}

body {
	font-family: "Krub", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #211641;
	margin: 0;
}

@media screen and (max-width: 768px) {
	body {
		overflow-x: hidden;
	}
}

h1 {
	font-size: 3rem;
	font-weight: 700;
	line-height: 110%;
	letter-spacing: -1.92px;
	margin: 0;
	opacity: 0;
	transform: translateX(50px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

h1.animate-in {
	opacity: 1;
	transform: translateX(0);
}

h2 {
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 120%;
	letter-spacing: -1.44px;
	margin: 0;
	opacity: 0;
	transform: translateX(50px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

h2.animate-in {
	opacity: 1;
	transform: translateX(0);
}


@media screen and (max-width: 768px) {
	h1 {
		font-size: 1.5rem;
		font-weight: 600;
		letter-spacing: -4%;
	}

	h2 {
		font-size: 1.5rem;
		font-weight: 600;
		line-height: 120%;
	}
}

pre {
	font-size: 0.5rem !important;
}

section {
	display: block;
}

a {
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}

.text-center {
	text-align: center;
}

.p-relative {
	position: relative;
}


.white-background {
	background-color: #fff;
}
.color-background {
	background-color: #f2f7fa;
}
.dark-background {
	background-color: #211641;
}  

.m-header {
	background-color: #fff;
	width: 100%;
	max-width: 100vw;
	z-index: 1000;
}


.m-logo {
	font-size: 0;
	max-width: 10rem;
	max-height: 10rem;
}

@media screen and (min-width: 1200px) {
	.m-logo {
		flex: 1;
		max-width: 12.5rem;
		max-height: 2.5rem;
	}
}


.keyvisual__description.animate-in {
	opacity: 1;
	transform: translateX(0);
}

.keyvisual-item-0.animate-in {
	opacity: 1;
	transform: translateY(0);
}

.keyvisual-item-1.animate-in {
	opacity: 1;
	transform: translateX(0);
}

.keyvisual-item-2.animate-in {
	opacity: 1;
	transform: translateY(0);
}

.animate-button.animate-in {
	opacity: 1;
	transform: translateX(0);
}

.animate-in {
	opacity: 1 !important;
	transform: translateX(0) !important;
}

.animate{
	opacity: 0;
	transform: translateX(50px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

@keyframes scroll-marquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.service-item:hover {
	background-color: #f2f7fa;
}

.service-item:hover .service-item__excerpt {
	max-height: 200px;
	opacity: 1;
}

.service-item:hover .service-item__title {
	color: #111;
	transform: translateY(-0.625rem);
}

.service-item:hover .thumb-block {
	opacity: 1;
	transform: translateY(0);
}

.service-item:nth-child(3n) {
	border-right: none;
}

.service-item:last-child,
.service-item:nth-last-child(-n + 3):nth-child(n) {
	border-bottom: none;
}
.indicators__item.with-border {
	border-left: 1px solid rgba(86, 113, 138, 0.2);
}

.indicators__number.animate-in {
	opacity: 1;
	transform: translateY(0);
}

.indicators__number sup {
	font-size: 0.6em;
	vertical-align: super;
	line-height: 0;
}

.portfolio__header {
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 120%;
	letter-spacing: -1.44px;
}

.portfolio-tab.active::after {
	content: "";
	position: absolute;
	right: -2px;
	top: 0;
	height: 100%;
	width: 3px;
	background-color: var(--theme-purple, #4d7efb);
}
.reference__header {
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 120%;
	letter-spacing: -1.44px;
}