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

	Canvas: Landing

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



:root {

	--cnvs-themecolor: #3D80E4;

	--cnvs-themecolor-rgb: 61, 128, 228;

	--cnvs-secondary-color: #FF3A33;



	--cnvs-body-font: 'Source Sans Pro', sans-serif;

	--cnvs-primary-font: 'Roboto', sans-serif;

}



#header {

	--cnvs-primary-menu-font-weight: 500;

	--cnvs-primary-menu-font-size:	1rem;

	--cnvs-primary-menu-tt:	none;

	--cnvs-primary-menu-ls:	0;

	--cnvs-primary-menu-submenu-font-weight:	400;

	--cnvs-primary-menu-submenu-hover-font-weight: 500;

	--cnvs-primary-menu-submenu-tt:	none;

}



#header {

	--cnvs-primary-menu-submenu-font-size: 15px;

	--cnvs-primary-menu-submenu-color: #666;

	--cnvs-primary-menu-submenu-hover-bg: transparent;

}



.is-expanded-menu .menu-container > .menu-item {

	--cnvs-primary-menu-hover-color: #FFF !important;

	--cnvs-primary-menu-active-color: #FFF !important;

}



* {

	-webkit-font-smoothing: antialiased;

	text-rendering: optimizeLegibility;

}



.button,

.btn { transition: transform 0.45s cubic-bezier(0.2, 0.7, .3, 1); }



.button:hover,

.btn:hover { transform: translateX(-4px); }



.text-muted { color: #9BB0BF !important; }



.bgsecondary { background-color: var(--cnvs-secondary-color, #FF3A33); }



.sub-menu-container .menu-item > .menu-link i {

	margin-right: 15px;

	color: var(--cnvs-themecolor, #3D80E4);

	font-size: 18px;

}



.sub-menu-container:not(.mega-menu-column),

.mega-menu-content {

	border-bottom-left-radius: 6px;

	border-bottom-right-radius: 6px;

	padding: 15px 18px;

	margin-top: -1px;

}



.slider-element {

	background-position: center center;

	background-repeat: no-repeat;

	background-size: cover;

}



.slide-imgs .iphone-img {

	position: relative;

	z-index: 1;

	width: 330px;

	-webkit-transform: perspective(1400px) rotateY(-20deg) rotateX(10deg) rotateZ(6deg) scale(0.8) translateX(50%) translateY(6%);

	transform: perspective(1400px) rotateY(-20deg) rotateX(10deg) rotateZ(6deg) scale(0.8) translateX(50%) translateY(6%);

	transition: transform 0.45s cubic-bezier(0.2, 0.7, .3, 1);

}

div {
    scroll-margin-top: 70px;
	scroll-behavior: smooth !important;
}


html {
 	scroll-behavior: smooth !important;
}

.slide-imgs:hover .iphone-img {

	-webkit-transform: perspective(1000px) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(0.95) translateX(40%) translateY(8%);

	transform: perspective(1000px) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(0.95) translateX(40%) translateY(8%);

}



.slide-imgs .card-img {

	position: absolute;

	bottom: 10px;

	left: -90px;

	width: 360px;

	transition: opacity 0.65s cubic-bezier(0.2, 0.7, .3, 1);

	z-index: 1;

}



.slider-element  { z-index: 1; }



.section-clients {

	position: absolute;

	left: 0;

	bottom: 0;

	width: 100%;

	padding: 45px 0;

	background-color: #FFF;

	border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}



.section-clients img { width: 100px; }



.section-features { padding: 120px }



.heading-block h2 {

	font-size: 52px;

	line-height: 1.3;

	font-weight: 900;

	letter-spacing: -1px;

}



.heading-block h3 {

	font-size: 32px;

	line-height: 1.2;

	font-weight: 700;

}



.features-items .feature-box .fbox-icon {

	--f-icon-size: 42px;

	position: relative;

	margin-bottom: 34px;

	width: 42px;

	height: 42px;

	width: var(--f-icon-size);

	height: var(--f-icon-size);

}



.features-items .feature-box .fbox-icon i {

	background-color: transparent !important;

	color: var(--cnvs-themecolor, #3D80E4);

	font-size: 42px;

	font-size: var(--f-icon-size);

}



.features-items .fbox-desc h3 {

	font-size: 19px;

	text-transform: none;

	font-weight: 800;

	letter-spacing: 0;

}



.owl-stage-outer { padding: 0; }



.owl-stage-outer .owl-stage-outer-bg {

	content: '';

	position: absolute;

	top: 50%;

	left: 50%;

	width: 100%;

	height: 100%;

	-webkit-background-size: contain;

	background-size: contain;

	background-image: url('/assets/images/section/device.png');

	background-repeat: no-repeat;

	background-position: center center;

	transform: translate(-50%,-50%);

	z-index: 1;

}



.owl-item img {

	width: 100%;

	transform: scale(0.85);

	transition: transform .3s cubic-bezier(0.2, 0.7, .3, 1);

}



.owl-item.active.center img {

	transform: scale(0.95);

}



.owl-carousel .owl-dots .owl-dot {

	opacity: .3;

	margin-top: 40px;

	width: 20px;

	height: 5px;

	border-radius: 4px;

	transition: all .3s cubic-bezier(0.2, 0.7, .3, 1);

}



.owl-carousel .owl-dots .owl-dot.active { width: 50px; }



.pricing-table .card {

	border-radius: 20px;

	padding: 25px 40px;

	background-color: #FFF;

	background-repeat: no-repeat;

	background-position: -1px -1px;

	background-size: 102% 160px;

	border-color: rgba(255, 255, 255, 0.3);

}



.pricing-table .card h2 { font-size: 48px; }



.pricing-table .card p {

	font-size: 15px;

	font-weight: 500;

	line-height: 1.6 !important;

}



.pricing-table .card .iconlist {

	font-size: 15px;

	font-weight: 500;

	color: #888;

	font-family: 'Roboto';

}



.pricing-table .card .iconlist li:not(:last-child) { margin-bottom: 7px; }



.toggle-wrap {

	border: 1px solid rgba(255,255,255,0.2);

	border-radius: 10px;

}



.toggle {

	padding: 18px 30px;

	margin-bottom: 0;

	background-color: rgba(255,255,255,0.1);

	border-bottom: 1px solid rgba(255,255,255,0.15);

	transition: background-color .2s ease;

}



.toggle:first-child {

	border-top-left-radius: 10px;

	border-top-right-radius: 10px;

}



.toggle:last-child {

	border-bottom-left-radius: 10px;

	border-bottom-right-radius: 10px;

}



.toggle:last-child { border-bottom: 0; }



.toggle .togglet {

	font-size: 19px;

	padding-left: 0;

	font-weight: 600;

	color: #F5F5F5;

}



.toggle:hover { background-color: rgba(255,255,255,0.15); }



.device-video-wrap { position: relative; }



.device-video-wrap img {

	position: relative;

	margin: 0 auto;

	max-width: 1024px;

}



.device-video-wrap video {

	position: absolute;

	top: 35px;

	left: 33%;

	max-width: 40%;

	z-index: 1;

	transform: translate(-50%);

}



.device-video-wrap::before,

.dotted-bg::before {

	content: "";

	position: absolute;

	display: block;

	top: 40%;

	left: 35%;

	width: 110%;

	height: 120%;

	background-size: 12px 12px;

	background-position: center;

	transform: translate(-50%, -50%);

	background-image: radial-gradient(#3D80E4 14%, transparent 14%);

	-webkit-mask-image: radial-gradient(rgba(0,0,0,1),rgba(0,0,0,0) 75%);

	mask-image: radial-gradient(rgba(0,0,0,1),rgba(0,0,0,0) 75%);

	z-index: 0;

}



.dotted-bg::before { background-image: radial-gradient(rgba(255, 255, 255, 0.2) 14%, transparent 14%); }

.dotted-bg.dotted-bg-dark::before { background-image: radial-gradient(rgba(4, 4, 4, 0.2) 14%, transparent 14%); }



.device-video-wrap > * {

	position: relative;

	z-index: 1;

}



.feature-box.fbox-plain .fbox-icon i { font-size: 36px; }



.testimonial .flexslider .slider-wrap img {

	display: block;

	width: auto;

	margin: 0 auto;

	max-height: 80px;

	margin-bottom: 30px;

}



.testimonial .testi-content p {

	font-size: 28px;

	font-weight: 500;

	font-style: normal;

	line-height: 1.5 !important;

	max-width: 750px;

	margin-left: auto;

	margin-right: auto;

}



.dark .testimonial .testi-content p { color: #FFF; }

.dark .testimonial .testi-meta span { color: rgba(255, 255, 255, .5); }



.flex-prev,

.flex-next {

	width: 45px;

	height: 45px;

	border-radius: 50%;

}



.dark .flex-prev,

.dark .flex-next { background-color: #FFF !important; }



.flex-next i,

.flex-prev i {

	font-size: 24px;

	height: 45px;

	line-height: 45px;

	color: #111;

	text-shadow: none;

}



.flex-next i { margin-left: 2px; }

.flex-prev i { margin-left: -1px; }



.skills li {

	height: 12px;

	border-radius: 10px;

}



.skills li .progress { border-radius: 10px; }



.skills li .progress-percent {

	top: -38px;

	right: -60px;

	padding: 5px 10px;

	text-align: center;

	color: #FFF;

	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.24);

	height: auto;

	z-index: 2;

	font-size: 17px;

	line-height: 16px;

	text-shadow: none;

}



.text-nowrap {

	width: 600px;

	position: relative;

	z-index: 2;

	background-color: #FFF;

	transform: translateX(6%);

	padding: 0 20px 10px;

}



/* Responsive Device less than 992px (.device-md <)

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

@media (max-width: 991.98px) {



	.display-3 {

		font-size: 7vw;

	}



	.slide-imgs .iphone-img {

		-webkit-transform: perspective(1000px) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(0.85) translateX(20%) translateY(0%) !important;

		transform: perspective(1000px) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(0.85) translateX(20%) translateY(0%) !important;

	}



	.slider-element { padding-top: 30px; }



	.section-features { padding: 60px }



	.testimonial .testi-content p { font-size: 20px; }



	.testimonial .testi-content p { max-width: 600px; }



	.sub-menu-container:not(.mega-menu-column),

	.mega-menu-content {

		border-radius: 0;

		margin-top: 0;

	}



	.dark .menu-container > .menu-item > .menu-link,

	.dark .sub-menu-container .menu-item > .menu-link { color: #FFF; }



	.text-nowrap {

		width: 100%;

		position: relative;

		z-index: 2;

		transform: none;

		padding: 0;

	}



}



/* Responsive Device less than 768px (.device-sm <)

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

@media (max-width:767.98px) {



	.section-clients {

		position: relative;

		bottom: auto;

	}



	.testimonial .testi-content p { max-width: 300px; }



}