/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
html {
	scroll-behavior: smooth;
  }
.heading-block::before {
	content: attr(data-heading);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	color: var(--cnvs-contrast-200);
	z-index: -1;
	font-family: var(--cnvs-primary-font);
	font-weight: bold;
	font-size: 90px;
	line-height: .3;
}

.heading-block.center::before {
	right: 0;
	left: 0;
	margin: auto;
}

.section-1-bg {
	background: #F5F5F5 url('../images/Logicelya-3d.jpg') no-repeat left bottom / cover;
}

/* ----------------------------------------------------------------
	Shape Dividers
-----------------------------------------------------------------*/
.shape-divider {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	overflow: hidden;
	z-index: 1;
  }
  .shape-divider[data-position=bottom] {
	top: auto;
	bottom: -1px;
  }
  .shape-divider[data-front=true] {
	z-index: 4;
  }
  .shape-divider svg {
	position: relative;
	width: 100%;
	width: calc(100% + 1.3px);
	height: 50px;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
  }
  .shape-divider[data-position=bottom], .shape-divider[data-flip-vertical=true] {
	transform: rotate(180deg);
  }
  .shape-divider[data-position=bottom][data-flip-vertical=true] {
	transform: rotate(0deg);
  }
  .shape-divider[data-flip=true] svg {
	transform: translateX(-50%) rotateY(180deg);
  }
  .shape-divider-fill {
	fill: var(--cnvs-body-bg);
	transform-origin: center;
	transform: rotateY(0deg);
  }

  

.section-showcase-sticky .list-group-item {
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	border: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	pointer-events: default;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity .3s ease;
}

.section-showcase-sticky .list-group-item.active {
	opacity: 1;
	background-color: #fff;
}

.section-showcase-sticky .list-group-content > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 4rem;
	padding-right: 4rem;
	border-bottom: 1px solid rgba(255,255,255, .15);
}
.stack-cards {
	position: relative;
	display: block;
  }
  
  .stack-cards-item {
	  background: #00536a;
	  border-radius: 0.25rem;
	  box-shadow: -5px 0 16px 8px rgba(0, 0, 0, 0.2);
	  text-align: left;
	  margin-bottom: 10px;
  }
  @media (min-width: 992px) {

	.stack-cards {
		position: relative;
		display: block;
	}

	.sticky-title {
		position: sticky;
		top: 8rem;
	}

	.stack-cards > .stack-cards-item + .stack-cards-item {
		margin-top: 40vh;
	}

	.stack-cards-item {
		--cnvs-stack-card-offset: 1.5em;
		max-width: 53rem;
		position: sticky;
		top: 20rem;
		margin-bottom: 0px;
	}

	.stack-cards-item:nth-of-type(0) {
		transform: translateY(calc((0 - 1) * var(--cnvs-stack-card-offset))) scale(0.85);
	}
	.stack-cards-item:nth-of-type(1) {
		transform: translateY(calc((1 - 1) * var(--cnvs-stack-card-offset))) scale(0.88);
	}
	.stack-cards-item:nth-of-type(2) {
		transform: translateY(calc((2 - 1) * var(--cnvs-stack-card-offset))) scale(0.91);
	}
	.stack-cards-item:nth-of-type(3) {
		transform: translateY(calc((3 - 1) * var(--cnvs-stack-card-offset))) scale(0.94);
	}
	.stack-cards-item:nth-of-type(4) {
		transform: translateY(calc((4 - 1) * var(--cnvs-stack-card-offset))) scale(0.97);
	}
	.stack-cards-item:nth-of-type(5) {
		transform: translateY(calc((5 - 1) * var(--cnvs-stack-card-offset))) scale(1);
	}
	.stack-cards-item:nth-of-type(6) {
		transform: translateY(calc((6 - 1) * var(--cnvs-stack-card-offset))) scale(1.03);
	}
	.stack-cards-item:nth-of-type(7) {
		transform: translateY(calc((7 - 1) * var(--cnvs-stack-card-offset))) scale(1.06);
	}
}

/* Swiper Tabs */
.swiper-pagination-progress {
	--cnvs-swiper-bar-size: 2px;
	--cnvs-swiper-bar-color:  var(--cnvs-contrast-200);
	--cnvs-swiper-bar-active-color: var(--cnvs-contrast-1000);
	position: absolute;
	left: 0;
	bottom: 0px;
	width: 100%;
	height: auto;
	border-radius: 0;
	opacity: 1;
	margin: 0px;
	background-color: transparent;
}
.swiper-pagination-progress .swiper-pagination-bar,
.swiper-pagination-progress .swiper-pagination-bar-active {
	position: absolute;
	bottom: 0;
	border-radius: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: var(--cnvs-swiper-bar-size);
	margin: 0px;
	background-color: var(--cnvs-swiper-bar-color);
}

.swiper-pagination-progress .swiper-pagination-bar-active {
	z-index: 2;
	width: 0%;
	background-color: var(--cnvs-swiper-bar-active-color);
}
.active .swiper-pagination-progress .swiper-pagination-bar-active {
	animation-name: swiperbarAnim;
	animation-duration: 5s;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	animation-direction: alternate;
	animation-fill-mode: forwards;
}
@keyframes swiperbarAnim {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

.swiper-tab-link {
	--swiper-tab-title: #AAA;
	--swiper-tab-content: ;
	counter-increment: step-counter;
	position: relative;
	overflow: hidden;
	margin-bottom: 5px;
	padding: 20px 0;
	cursor: pointer;
}

.swiper-tab-link::before {
	content: "0" counter(step-counter)'.';
	position: relative;
	display: inline-block;
	font-size: 26px;
    font-weight: 600;
    min-width: 50px;
	margin-right: 5px;
	color: var(--swiper-tab-title);
    font-family: monospace;
	line-height: 1;
}

.swiper-tab-link .swiper-tab-title {
	display: inline-block;
	color: var(--swiper-tab-title);
	margin-bottom: 0;
	font-size: calc(1.275rem + 0.3vw);
}

.swiper-tab-link .swiper-tab-content {
	margin-bottom: 0;
	padding-top: 10px;
    margin-left: 5px;
	line-height: 0;
	opacity: 0;
	vertical-align:middle;
	font-size: 1rem;
	transition: line-height 0.6s cubic-bezier(.4,0,.2,1), opacity .1s .1s cubic-bezier(.4,0,.2,1);
}

@media (min-width: 768px) {
    .swiper-tab-link .swiper-tab-content {
        margin-left: 60px;
    }
}

.swiper-tab-link.active .swiper-tab-content {
	opacity: .8;
	line-height: var(--cnvs-line-height-content);
	transition: line-height 0.5s cubic-bezier(.4,0,.2,1), opacity .15s .15s cubic-bezier(.4,0,.2,1);
}

.swiper-tab-link.active {
	--swiper-tab-title: #000;
}

.back-shadow {
	---cnvs-back-shadow-size: 5px;
	---cnvs-back-shadow-bg: var(--cnvs-contrast-1000);
	---cnvs-back-shadow-color: var(--cnvs-contrast-0);
	position: relative;
	background-color: var(---cnvs-back-shadow-color);
	border: 1px solid var(---cnvs-back-shadow-bg);
	margin-left: var(---cnvs-back-shadow-size);
	margin-bottom: var(---cnvs-back-shadow-size);
	box-shadow: calc(-1 * var(---cnvs-back-shadow-size)) var(---cnvs-back-shadow-size) 0 var(---cnvs-back-shadow-bg);
}

.contact-arrow {
	display: none;
}

.device-up-md .contact-arrow {
	display: block;
	position: absolute;
    width: 130px;
    top: 90px;
    right: -130px;
    rotate: 80deg;
    opacity: .1;
}

.week-posts {
	list-style: none;
}

.week-posts li .entry-image {
	display: none;
}

.week-posts > li {
	counter-increment: step-counter;
}

.week-posts > li .grid-inner::before {
	content: "0" counter(step-counter)'.';
	position: absolute;
	left: 0;
	font-size: 26px;
	font-weight: 700;
	font-family: var(--cnvs-secondary-font);
	color: #DDD;
	line-height: 1;
}

.week-posts > li .grid-inner {
	padding-left: 48px;
}

.dark .week-posts > li::before { color: rgba(255,255,255,0.3); }

.has-callout mark {
    background-color: inherit;
    color: inherit;
    position: relative;
}

.has-callout mark:after {
  content: "";
  position: absolute;
  bottom: -0.125rem;
  left: -0.5rem;
  right: -0.5rem;
  height: 0.75rem;
  z-index: -1;
  background-image: url('../images/underline.svg');
  background-repeat: no-repeat;
  background-size: cover;
}
.testimonial-image {
	width: 5rem !important;
	height: auto !important;
	margin: -2.5rem auto 0;
}

.steps-sm-image {
	width: 20rem !important;
	height: 17rem !important;
	margin: -1.5rem auto 0;
}
/* BREAKPOINTS */

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
	.w-sm-100 {
	width:100%!important;
	}
	.w-sm-75 {
	width:75%!important;
	}
	.w-sm-50 {
	width:50%!important;
	}
	.w-sm-40 {
	width:40%!important;
	}
	.w-sm-35 {
	width:35%!important;
	}
	.w-sm-30 {
	width:30%!important;
	}
	.w-sm-25 {
	width:25%!important;
	}
	.h-sm-100 {
	height:100%!important;
	}
	.h-sm-75 {
	height:75%!important;
	}
	.h-sm-50 {
	height:50%!important;
	}
	.h-sm-25 {
	height:25%!important;
	}
	.top-sm-10 {
		top: 10% !important;
	  }
	  
	  .top-sm-12 {
		top: 12% !important;
	  }
	  
	  .top-sm-15 {
		top: 15% !important;
	  }
	}
	
	/* Medium devices (tablets, 768px and up)*/
	@media (min-width: 768px) {
	.w-md-100 {
	width:100%!important;
	}
	.w-md-90 {
	width:90%!important;
	}
	.w-md-75 {
	width:75%!important;
	}
	.w-md-50 {
	width:50%!important;
	}
	.w-md-40 {
	width:40%!important;
	}
	.w-md-35 {
	width:35%!important;
	}
	.w-md-30 {
	width:30%!important;
	}
	.w-md-25 {
	width:25%!important;
	}
	.h-md-100 {
	height:100%!important;
	}
	.h-md-75 {
	height:75%!important;
	}
	.h-md-80 {
	height:80%!important;
	}
	.h-md-50 {
	height:50%!important;
	}
	.h-md-25 {
	height:25%!important;
	}
	}
	
	/* Large devices (desktops, 992px and up)*/
	@media (min-width: 992px) {
	.w-lg-100 {
	width:100%!important;
	}
	.w-lg-75 {
	width:75%!important;
	}
	.w-lg-50 {
	width:50%!important;
	}
	.w-lg-40 {
	width:40%!important;
	}
	.w-lg-35 {
	width:35%!important;
	}
	.w-lg-30 {
	width:30%!important;
	}
	.w-lg-25 {
	width:25%!important;
	}
	.h-lg-100 {
	height:100%!important;
	}
	.h-lg-75 {
	height:75%!important;
	}
	.h-lg-50 {
	height:50%!important;
	}
	.h-lg-25 {
	height:25%!important;
	}
	}
	
	/* Extra large devices (large desktops, 1200px and up)*/
	@media (min-width: 1200px) {
	.w-xl-100 {
	width:100%!important;
	}
	.w-xl-75 {
	width:75%!important;
	}
	.w-xl-50 {
	width:50%!important;
	}
	.w-xl-40 {
	width:40%!important;
	}
	.w-xl-35 {
	width:35%!important;
	}
	.w-xl-30 {
	width:30%!important;
	}
	.w-xl-25 {
	width:25%!important;
	}
	.h-xl-100 {
	height:100%!important;
	}
	.h-xl-75 {
	height:75%!important;
	}
	.h-xl-50 {
	height:50%!important;
	}
	.h-xl-25 {
	height:25%!important;
	}
	}