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

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/


:root {
--cnvs-themecolor: #900;
--cnvs-themecolor-rgb: 153, 0, 0;
}


.content {
  position: relative;
  background-color: var(--cnvs-body-bg);
}

	/* <a href="https://www.jqueryscript.net/animation/">Animation</a> */
		@-webkit-keyframes
			pulsate {  0% {
				-webkit-transform: scale(1);
				transform: scale(1);
				opacity: 0.8;
			}
			 45% {
				-webkit-transform: scale(1.75);
				transform: scale(1.75);
				opacity: 0;
			}
		}
		@keyframes
			pulsate {  0% {
				-webkit-transform: scale(1);
				transform: scale(1);
				opacity: 0.8;
			}
				45% {
				-webkit-transform: scale(1.75);
				transform: scale(1.75);
				opacity: 0;
			}
		}

		/* Hotspot */
		.hotspot-img {
			background-size: cover;
			background-position: center center;
			position: relative;
		}

		.hotspot-img .hot-spot {
			position: absolute;
			width: 26px;
			height: 26px;
			top: 5px;
			left: 5px;
			text-align: center;
			background-color: #000;
			color: #FFF;
			border-radius: 100%;
			cursor: pointer;
			font-size: 12px;
			line-height: 26px;
			transition: all .3s ease;
		}

		.hotspot-img .hot-spot .circle i {
			-webkit-transition: -webkit-transform .25s ease-out;
			transition: transform .25s ease-out;
		}

		.hotspot-img .hot-spot.hotspot-tooltip-open .circle i,
		.hotspot-img .hot-spot:not(.hotspot-on-click):hover .circle i {
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}

		.hotspot-img .hot-spot .circle:after {
			content: '';
			display: block;
			position: absolute;
			top: 39%;
			left: 39%;
			width: 30px;
			height: 30px;
			margin: -1em auto auto -1em;
			-webkit-transform-origin: 50% 50%;
			transform-origin: 50% 50%;
			border-radius: 50%;
			border: 10px solid #000;
			opacity: 0;
			-webkit-animation: pulsate 3s ease-out infinite;
			animation: pulsate 3s ease-out infinite;
		}

		.hotspot-img .hot-spot .tooltip {
			display: none;
			background-color: rgba(255, 255, 255, 0.96);
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			font-size: 14px;
			opacity: 1.0;
			left: 0;
			padding: 15px;
			position: absolute;
			top: 35px;
			width: 280px;
			z-index: 999;
			box-shadow: 0 30px 102px rgba(0,0,0,0.33), 0 20px 51px rgba(0,0,0,0.18);
		}

		.hotspot-img .hot-spot .tooltip.ontop {
			top: auto;
			bottom: 35px;
		}

		.hotspot-img .hot-spot .tooltip .img-row {
			margin-bottom: 10px;
			display: block;
		}
		.hotspot-img .hot-spot .tooltip h4 { margin-bottom: 0; }

		.hotspot-img .hot-spot .tooltip p {
			font-size: 13px;
			line-height: 1.3rem !important;
			margin-bottom: 10px;
			color: #666 !important;
		}

		.hotspot-img .hot-spot .tooltip p:last-child { margin-bottom: 0; }

		@media (max-width: 991px) {
			.hotspot-img .hot-spot .tooltip {
				width: 200px;
				left: 30px;
				top: 35px;
			}

			.hotspot-img .hot-spot .tooltip .img-row {
				display: none;
			}
		}
		
		
@media (max-width: 991px) {		
	.process-steps .i-style {
  --cnvs-i-size: 2.5rem;
}
}


@media (max-width: 767.98px) {
  h1, .h1 {
    font-size: 1.5rem;
  }
  .heading-block h4, .heading-block .h4 {
    font-size: 1.25rem;
  }
}