/*
        Table of Context
        -------------------------------
        # Common CSS
        # Header
        # Banners
        # About Section
        # Services Section
        # Proceuders
        # Blog Section
        # Pagination
        # Pulse Animation
        # Testimonial  
        # Team
        # Apointment CSS
        # Team 2
        # Contact Widget
        # Map
        # Blog Details
        # Comments CSS  
        # Comment Form
        # Footer Widget
        # Services Widget  
        # Call To Action  
        # Accordiion
        # Sidebar
        # Footer 2  
        # Coming Soon 
        # Page Feaures
        # About Features  
        # Funfact Widget
        # Partner Logo 
        # Banner Slide
        # Animation  
        # Fortfoli Filter
        # Scroll Top 
        # Font Awosaome 
    */ 
 

@import "variables";
@import "functions"; 
@import "mixins"; 
@import "reset";  
@import "img-box";  
@import "button";
@import "components/header";
@import "components/about"; 
@import "components/banner-slider";
@import "components/faq";
@import "components/team";
@import "components/service";  
@import "components/blog"; 
@import "components/testimonial"; 
@import "components/appointment"; 
@import "components/flyout-canvas";  
@import "components/pricing"; 
@import "components/footer";
@import "components/serach-popup";
@import "components/header";
@import "components/slider";
@import "components/animation";
@import "components/portfolios"; 
@import "components/icon-box";
@import "components/coming-soon";
@import "components/feature";
@import "components/feature";
@import "components/process";

@import "unittest/unit-test";
    
/** 
*  Common CSS  
*/  
.sec-pad {   
	padding: 50px 0; 
} 
.bg-lightred {    
	background-color: #fff9f8;
}
.btn {
	border-radius: 0; 
	display: inline-block; 
	font-size: 16px; 
	font-weight: 500;
	line-height: 0.8;
	min-width: 170px;
	padding: 20px 35px;  
 
	&-primary {
		color: #7c49dd;
		background-color: #7c49dd;
		border-color: #7c49dd; 
 
		&:hover {
			background: $primary-clr;
			color: #fff;
			border-color: $primary-clr;
		}
	}

	&-filled {
		color: #fff; 
		background-color: #7c49dd;

		&:hover {
			color: #7c49dd;
			background-color: #fff;
		}
	}

	&-outline { 
		background-color: transparent;
		border: 1px solid #fff;
	}

	&-round {
		border-radius: 50px;
	}

	// &-slide {
	//     position: relative;
	//     overflow: hidden;
	//     z-index: 1;
	//     color: #fff;
	//     background-color: #7c49dd;

	//     &:before { 
	//         @include pseudo;
	//         width: 0;
	//         height: 100%;
	//         background-color: #fff;
	//         transition: all 400ms ease-in-out;
	//         z-index: -1;
	//     }

	//     &:hover {
	//         color: $primary-clr;
 
	//         &:before {
	//             width: 100%;
	//         }
	//     }

	//     &-right {
	//         @extend .btn-slide;

	//         &:before {
	//             right: 0;
	//             left: auto;
	//         }
	//     }

	//     &-left {
	//         @extend .btn-slide;

	//         &:before {
	//             left: 0;
	//             right: auto;
	//         }
	//     }

	//     &-up {
	//         @extend .btn-slide;

	//         &:before {
	//             width: 100%;
	//             height: 0;
	//             bottom: 0;
	//             top: auto;
	//         }

	//         &:hover {
	//             &:before {
	//                 height: 100%;
	//             }
	//         }
	//     }

	//     &-down {
	//         @extend .btn-slide;

	//         &:before {
	//             width: 100%;
	//             height: 0;
	//             bottom: auto;
	//             top: 0;
	//         }

	//         &:hover {
	//             &:before {
	//                 height: 100%;
	//             }
	//         }
	//     }
	// }

	&.round {
		border-radius: 50px;
	}
	&.squre {
		border-radius: 0;
	}
	&.roundShape {
		border-radius: 5px;
	}
	&:focus {
		box-shadow: none;
	}

	&.icon-left i {
		font-size: 20px;
		line-height: 0.8; 
		margin-right: 10px; 
	}

	&-secondary {
		color: $primary-clr;
		border-color: $primary-clr;
	}

	&-secondary:hover {
		background-color: $primary-clr;
		border-color: $primary-clr;
		color: #fff;
	}
}

.video-btn {
	color: #555;
	font-size: 15px;
	font-weight: 400;
	
	&:hover {
		color: $primary-clr;
	}

	i {
		border-radius: 50%;
		background-color: #fcf5ee;
		color: $primary-clr;
		display: inline-block;
		line-height: 56px;
		text-align: center;
		margin-right: 0;
		height: 56px;
		width: 56px;
	}
}

.sec-heading {
	margin-bottom: 70px;
	position: relative;
	text-align: center;

	img {
		max-width: 84px !important;
		margin: 0 auto 25px;
	}

	&.text-left {
		img {
			margin: 0;
			margin-bottom: 25px;
		}
	}

	.tagline {
		color: #7c49dd;
		display: block;
		// font-size: 14px;
		font-weight: 500;
		letter-spacing: 1.4px;
		text-transform: uppercase;
		margin-bottom: 10px;
		position: relative;
	}

	.sec-title {
		color: #1e2528;
		font-size: 42px;
		margin-bottom: 20px;

		@include mq(767) {
			font-size: 33px !important;
		}
	}

	p {
		// color: #888;
		margin-bottom: 0;
	}

	p:not(:last-child) {
		margin-bottom: 10px;
	}
}

.sec-heading {
	text-align: center;

	.paragraph {
		line-height: 28px;
	}
}

@media screen and (max-width: 575px) {
	.sec-heading {
		margin-bottom: 40px;
	}
}

.sec-heading h2 {
	font-size: 65px;
	margin-bottom: 20px;
	line-height: 1.3;
}

@media (max-width: 767px) {
	html body.page-template section.elementor-section .elementor-element .elementor-widget-container .sec-heading {
		width: 85% !important;
	}

	.sec-heading h2 {
		font-size: 62px;
	}
}

@media screen and (max-width: 575px) {
	.sec-heading h2 {
		font-size: 52px;
		line-height: 60px;
	}
}

@media screen and (max-width: 479px) {
	.sec-heading h2 {
		font-size: 33px;
		line-height: 40px;
	}
}

/**
    *  Header
    */
.main-header {
	.header {
		&.sticky {
			position: fixed;
			background-color: #ffd8d7;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 9;
		}
	}
}

.header-transparent {
	.header {
		background-color: transparent;
		position: absolute;
		width: 100%;
	}
}

.header {
	position: relative;
	padding: 15px 0;
	background-color: #e5e5e5;
	z-index: 9;

	&.abs-header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1;
	}

	.navbar-toggler {
		@include respond(tab-land) {
			border-radius: 0;
			color: #fff;
			background-color: #7c49dd;
			max-height: 45px;
			width: 45px;
			height: 50px;
		}

		&:focus {
			outline: none;
		}

		span.navbar-toggler-icon {
			width: 100%;
			height: 1px;
			position: relative;
			background: #fff;
			top: -1px;
			transition: all 0.5s;

			&:before,
			&:after {
				content: "";
				position: absolute;
				width: 100%;
				height: 1px;
				display: block;
				background: #fff;
			}

			&:before {
				top: -8px;
			}

			&::after {
				bottom: -8px;
			}
		}

		&.active {
			span.navbar-toggler-icon {
				width: 3px;
				height: 3px;

				&:before,
				&:after {
					height: 3px;
				}
			}
		}
	}
	.primary-menu li {
		list-style: none;
	}
	.primary-menu li ul.dropdown-menu {
		position: absolute;
	}
	&.top-logo {
		text-align: center;
		.primary-menu {
			width: 100%;
			text-align: center;
			ul {
				margin: 0 auto;
			}
		}
		.logo {
			margin: 0 auto;
			@include respond(tab-land) {
				margin: 0;
			}
		}
	}

	@include respond(tab-land) {
		.btn {
			position: absolute !important;
			right: 60px;
			border-radius: 0;
			height: 45px;
			top: 7px !important;
			padding: 0;
			display: flex;
			min-width: 50px !important;
			justify-content: center;
			align-items: center;
		}
	}
}

.logo-center-inner,
.logo-center-outer {
	.logo {
		order: 1;

		@include respond(tab-land) {
			order: 0; 
		}
	}

	.primary-menu ul {
		@include respond(tab-land) {
			padding: 0;
		}
	}
}

.logo-box {
	.logo {
		background: #fff; 
		position: absolute;
		padding: 15px;
		height: calc(100% + 50px);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.07);
		top: -15px;
		max-height: 110px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.navbar-toggler {
		margin-left: auto;
	}

	.primary-menu {
		margin-left: 120px;
	}
}

.fullscreen {
	.navbar-toggler {
		display: block;
		border-radius: 0;
		color: #fff;
		background-color: #7c49dd;
		max-height: 50px;
		width: 45px;
		height: 45px;
		position: absolute;
		right: 0;
		margin-left: auto;
		z-index: 1;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.primary-menu {
		display: none;

		@include respond(tab-land) {
			width: 100%;
		}
	}
}

.top-logo {
	text-align: center;
	display: block;

	.navbar {
		flex-direction: column;

		.logo {
			margin-bottom: 15px;
		}

		@include respond(tab-land) {
			flex-direction: row;

			.logo {
				margin-bottom: 0;
			}
		}
	}
}

.header {
	background-color: #e5e5e5;

	.navbar {
		align-items: center;
		padding-left: 0;
		padding-right: 0;

		.navbar-nav {
			flex-wrap: wrap;
		}

		.btn {
			min-width: 145px;
			position: relative;
			// top: -3px;
			span {
				@include respond(tab-land) {
					display: none;
				}
			}
		}
	}

	@media (min-width: 992px) {
		ul.navbar-nav.ml-auto.main-menu-nav {
			margin-right: 15px;
		}
	}
}

.header-2 {
	background-color: #ffd8d7;

	.navbar {
		padding-left: 0;
		padding-right: 0;

		.primary-menu li:last-child a {
			padding-right: 0;
		}
	}
}

.header-3 {
	background-color: #f8f8f8;

	.navbar {
		padding-left: 0;
		padding-right: 0;
	}
}

.header-4 {
	.navbar {
		padding-left: 0;
		padding-right: 0;
	}
}

.socials {
	@include respond(tab-land) {
		display: inline-block;
		text-align: center;
		margin: auto;
	}

	a {
		display: inline-block;
		color: #fff;
		font-size: 13px;
		line-height: 1;

		&:not(:last-child) {
			padding: 0 7px;
		}
	}
}

.topbar {
	position: relative;
	background: #7c49dd;
	padding: 15px;
	color: #fff;

	&-inner {
		@include flexbox;
	}

	a {
		color: inherit;
	}

	.topinfo {
		@include mq(767) {
			display: block;
			width: 100%;
			text-align: center;
		}

		a {
			@include mq(767) {
				display: block;
				margin-right: 0 !important;
			}

			i {
				display: inline-block;
				margin-right: 10px;
				vertical-align: middle;
			}

			&:not(:last-child) {
				margin-right: 20px;
			}
		}
	}
}

.logo {
	display: block;
	max-width: 155px;
	min-width: 140px;

	@media (min-width: 992px) and (max-width: 1200px) {
		max-width: 120px;
	}
}

.primary-menu {
	position: relative;

	.dropdown-menu {
		box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.07);
		border: none;
		li {
			display: block;
			// padding-left: 10px;
			a {
				position: relative;
				// padding-left: 25px;
				display: inline-block;
				&:before {
					content: "";
					width: 12px;
					height: 1px;
					position: absolute;
					border-radius: 50%;
					background: #0c1215;
					top: 15px;
					right: 0px;
					opacity: 0;
					transition: all 0.4s;
				}
				&:hover {
					&:before {
						opacity: 1;
						right: -10px;
						background-color: #ff9997;
					}
				}
			}
		}
		&.show {
			display: none;
		}
	}
	.mobile-menu {
		display: none;
	}

	@include mq(991) {
		margin-top: 15px;

		ul.navbar-nav {
			padding: 15px;

			a.nav-link,
			a.dropdown-item {
				text-align: left !important;
				padding: 15px 0 !important;
				outline: none;
				border: none;
				display: block;
				&:after {
					right: 0;
					position: absolute;
					transform: rotate(-90deg);
					transition: all 0.5s;
				}

				&:focus {
					background: transparent;
					border: none;
					outline: none;

					&.dropdown-menu {
						border: none;
					}
				}
				&.live {
					position: relative;
					&:after {
						transform: rotate(0deg);
					}
				} 
			} 

			.dropdown-menu {
				outline: none;
				border: none;
				padding: 0 15px;
				background-color: #fff;
				min-width: 14rem;
				white-space: nowrap;
				box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.07);
				li {
					display: block;
					a {
						position: relative;
					}
				}
			}
		}
	}

	@include mq(767) {
		.mobile-menu {
			color: $primary-clr;
			display: block;
			font-size: 18px;
			position: absolute;
			right: 0;
			top: -30px;
		}
	}

	li {
		@include min-mq(992) {
			display: inline-block;

			&.menu-item-has-children {
				&:hover {
					> ul {
						display: block;
						opacity: 1;
						margin-top: 0px;
						visibility: visible;
					}
				}
			}

			ul.dropdown-menu {
				min-width: 14rem;
				position: relative;
				margin-top: 30px;
				opacity: 0;
				transition: all 0.4s cubic-bezier(0.4, 0, 1, 1);
				left: 15px;
				display: block;
				visibility: hidden;
				white-space: nowrap;
				border-left: 3px solid $primary-clr;

				li {
					display: block;
					a {
						&:before,
						&:after {
							// content: '';
							// background: #263a41;
							// display: block;
							// position: absolute;
							// width: 4px;
							// height: 4px;
							// border-radius: 50%;
							// right: 21px;
							// top: 16px;
							// transition: all .5s;
						}
						&:hover {
							&:before,
							&:after {
								// background-color: $primary-clr;
								// width: 10px;
							}
							&:after {
								// right: 15px;
							}
						}
						&.dropdown-item {
							&:before,
							&:after {
								// display: none;
							}
						}
					}
				}

				&:before {
					content: "";
					width: 15px;
					display: block;
					position: absolute;
					top: -10px;
					left: 30px;
					margin: auto;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 0 10px 10px 10px;
					border-color: transparent transparent #fff transparent;
				}

				a {
					padding: 10px 15px !important;

					&:focus {
						outline: none;
						border: none;
					}
				}

				ul {
					left: 100%;
					top: -8px;

					&:before {
						display: none;
					}
				}
			}
		}

		a {
			color: #263a41;
			display: block;
			font-size: 14px;
			font-weight: 500;
			text-transform: uppercase;
			padding: 17px 15px 14px !important;
			line-height: 1;

			&:hover {
				color: $primary-clr;
			}

			&.dropdown-item {
				&:hover {
					background: transparent;
				}
			}

			@media (min-width: 992px) and (max-width: 1200px) {
				font-size: 13px;
				padding: 15px 7px !important;
			}
		}
	}

	@include mq(991) {
		ul { 
			background-color: #fcf5ee;
			text-align: center;
			padding: 10px 0;
		}

		li {
			a { 
				padding: 10px 15px;
			}
		}
	}

	&.custom-menu {
		ul {
			@include mq(767) {
				display: none;
			}

			@include min-mq(768) { 
				background-color: transparent;
				text-align: initial;
				padding: 0;
			}
		}

		li {
			@include min-mq(768) {
				display: inline-block;
			}
		}
	}
}

[class*="header"] {
	.btn-cta {
		font-size: 14px;
		padding: 15px 25px;
		min-width: auto;

		@include min-mq(992) {
			i {
				position: relative;
				top: 1px;
				right: 1px;
				margin-right: 2px;
			}
		}

		@include respond(tab-land) {
			border-radius: 0;
			position: absolute;
			top: 8px;
			max-height: 45px;
			right: 55px;
			margin: auto;

			.head-btn-txt {
				display: none;
			}
		}
	}
}

/**
    *  Banners
    */
.banner {
	background: no-repeat left center / 12.5%;
	padding: 12% 0;

	@include mq(1199) {
		padding-top: 15%;
	}

	@include mq(767) {
		padding-top: 130px;
		background-image: none;
	}

	span {
		color: $primary-clr;
		display: block;
		// font-family: $rufina;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		margin-bottom: 20px;
	}

	h2 {
		color: #1e2528;
		font-size: 60px;
		line-height: 75px;
		margin-bottom: 25px;

		@include mq(1199) {
			font-size: 49px;
			line-height: 60px;
		}
 
		@include mq(479) {
			font-size: 44px;
			line-height: 54px;
		}
	}
 
	p {
		color: #555;
		margin-bottom: 50px;
		font-size: 17px;
	}

	.video-btn {
		color: #555;
		width: auto;
		display: inline-block;
		padding: 5px;
		position: relative;
		top: 4px; 
		margin-top: 15px;
		i {
			margin-right: 7px;
			position: relative;
			background-color: #ffeddb;
			z-index: 0;
		}
 
		&:hover { 
			color: $primary-clr;

			i {
				background-color: $primary-clr;
				color: #fff; 
			}
		}
 
		@include min-mq(992) {
			margin-left: 15px; 
		}

		@include mq(479) {
			margin-top: 30px;
		}
	}

	.spa-img {
		width: 40%;
		position: absolute;
		right: 0;
		top: 0;

		@include mq(767) {
			display: none;
		}
	}
}

/**
    *  About Section
    */
.about {
	text-align: center;

	[class|="flower"] {
		position: absolute;
	}

	.flower-1 {
		left: 16%;
		top: 0;
		max-width: 160px;
	}

	.flower-2 {
		right: 135px;
		top: 50%;
		transform: translateY(-50%);
		max-width: 88px;

		@include mq(991) {
			display: none;
		}
	}
}

/**
    *  Services Section
    */
.service-caro,
.social_connect {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.single-service,
.single-social_connect {
	flex-basis: 0;
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%;
	position: relative;
	overflow: hidden;

	@include mq(992) {
		flex-basis: 50%;
	}

	img {
		width: 100% !important;
		position: relative;
		transform: scale(1.05);
		transition: all 0.3s;
	}

	.service-hover,
	.social_connect_overlay {
		background-color: rgba($color: #7c49dd, $alpha: 0.9);
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		text-align: center;
		transition: all 300ms ease-in-out;
		opacity: 0;
		visibility: hidden;
		height: 100%;
		width: 100%;

		img {
			margin: 0 auto 20px;
			width: 47px;
		}

		span {
			color: #fff;
			display: block;
			font-weight: 700;
			font-size: 50px;
		}

		a {
			color: #fff;
		}
	}

	&:hover .social_connect_overlay {
		opacity: 1;
		visibility: visible;
	}

	&:hover img {
		transform: scale(1.2) rotate(15deg);
	}
}

.sp-wrapper {
	.pricing-list-item {
		padding: 20px 0;

		&.closeday {
			color: $primary-clr;
		}

		&:not(:last-child) {
			border-bottom: 1px dashed #ddd;
		}

		a {
			&:hover {
				h2,
				p {
					color: $primary-clr;
				}
			}
		}

		.d-flex {
			align-items: center;
			position: relative;
			&:hover {
				.price,
				i {
					color: $primary-clr;
				}
			}
		}

		.icon {
			display: block;
			padding-right: 10px;

			p {
				margin-bottom: 0;
			}

			i {
				font-size: 40px;
			}

			img.img-icon {
				max-width: 70px;
				border-radius: 5px;
			}
		}

		.content {
			h2 {
				font-size: 19px;
				line-height: 1;
			}

			p {
				margin-bottom: 0;
				line-height: 1;
				color: #1e2528;
				margin-top: 13px;
			}
		}

		.price {
			display: flex;
			flex-direction: row-reverse;
			align-items: end;
			color: #1e2528;
			p {
				font-size: 30px;
				font-weight: 400;
				margin-bottom: 0;
				line-height: 1;
			}

			del {
				font-size: 13px;
				margin-left: 6px;
			}
			span {
				text-transform: capitalize;
				position: absolute;
				background: $primary-clr;
				padding: 2px 14px;
				color: #fff;
				border-radius: 15px;
				top: -15px;
				font-size: 11px;

				&.best {
					background: #586bb4;
				}
				&.new {
					background: #17a2b8;
				}
				&.popular {
					background: #f98f76;
				}
			}
		}

		&:hover {
			color: $primary-clr;

			h2 {
				color: $primary-clr;
			}
		}
	}
}

/**
    *  Proceuders
    */
.procedures {
	position: relative;
}

/**
    *  Blog Section
    */
section.blog {
	padding: 80px 0;

	.post {
		margin-bottom: 30px;
	}
}

.post {
	border-radius: 5px;
	border: 1px solid #e3e6ea99;
	text-align: center;
	transition: all .5s;
	padding: 20px;
	margin-bottom: 30px;

	.btn {
		i {
			position: relative;
			left: 0;
			top: 2px;
			transition: all 0.5s;
		}
	}

	&:hover {
		box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.07);
		border-color: #fff;

		.btn {
			i {
				left: 7px;
			}
		}
	}

	.entry-meta {
		span {
			margin: 0 5px;
			margin-left: 0;
			color: #192225;

			i {
				font-size: 16px;
				color: $primary-clr;
				margin-bottom: 0;
				position: relative;
				top: 1px;
				transition: all 0.5s;
				margin-right: 3px;
			}
		}

		a {
			color: $primary-clr;

			.ti-comment {
				font-size: 0.8rem;
				margin-right: 10px;
			}
		}
	}

	.entry-meta {
		margin-bottom: 10px;
	}

	&-img {
		position: relative;
	}

	img {
		margin-bottom: 15px;
		max-height: 200px;
		object-fit: cover;
		border-radius: 5px;
	}

	h2 {
		margin-top: 10px;
		margin-bottom: 15px;
		font-size: 30px;
		@include mq(767) {
			font-size: 22px;
			line-height: 1.6;
		}
		&,
		a {
			color: #263a41;

			// font-size: 22px;
			&:hover {
				color: $primary-clr;
			}
		}
	}

	p {
		margin-bottom: 20px;
		line-height: 2;
	}

	h4 {
		line-height: 1.5;

		a {
			color: #233646;

			&:hover {
				color: $primary-clr;
			}
		}
	}

	.btn {
		display: inline-block;
		margin-bottom: 10px;
		max-width: 180px;
		padding: 15px 30px;
		margin-left: auto;
		margin-right: auto;
		text-transform: capitalize;
		font-weight: 500;
		min-width: auto;
		// font-size: 14px;

		i {
			font-size: 16px;
			// color: $primary-clr;
			margin-bottom: 0;
		}

		&:hover {
			// color: $primary-clr;
		}
	}

	&.list-view {
		margin-bottom: 30px;

		img {
			margin-bottom: 15px;
			max-height: 300px;
			object-fit: cover;
		}

		a {
			margin-bottom: 10px;
		}
	}

	&.service-post {
		background: url(../images/dot.png);
		background-repeat: no-repeat;
		background-position: bottom left;
		h4 {
			margin-top: 25px;
			position: relative;
			margin-bottom: 15px;
		}

		.btn {
			padding: 20px 35px;
			margin-bottom: 10px;
		}

		&.left {
			text-align: left;
		}

		&.right {
			text-align: right;

			@include mq(768) {
				text-align: center;
			}
		}

		&.text-center {
			img {
				// border-radius: 0px !important;
			}
		}

		&.no-shape {
			h4 {
				margin-top: 25px;
				position: relative;

				&:before {
					content: "";
					width: 100%;
					height: 50px;
					position: absolute;
					display: block;
					background: url(../images/top-shape.svg);
					top: -60px;
					background-size: cover;
				}
			}
		}
	}
}

.service-image-height {
	img {
		object-fit: cover;
		// border-radius: 5px !important;
	}
}

// Post formats
.format-video {
	position: relative;

	video {
		width: 100%;
	}
}

.format-carousel {
	.owl-dots {
		text-align: center;
		position: absolute;
		right: 0;
		left: 0;
		bottom: 3rem;

		button {
			&:focus,
			&:active {
				outline: 0;
			}
		}

		span {
			background-color: #ffc3c2;
			border-radius: 50%;
			display: inline-block;
			margin: 0 5px;
			height: 8px;
			width: 8px;
		}

		.active {
			span {
				background-color: #fff;
			}
		}
	}
}

.format-link {
	i {
		font-size: 3rem; 
		margin-bottom: 3rem; 
		display: inline-block;
		color: $primary-clr;
	}
}

.format-quote:not(.el-blog-post) {
	padding: 3rem 2rem;
} 

.format-quote {
	i {
		font-size: 3rem;
		margin-bottom: 1rem;
		display: inline-block;
		// color: $primary-clr;
	}
 
	h4 {
		a {
			font-weight: 400;
		} 
	}
 
	strong {
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
		color: #262934; 
		margin-bottom: 30px; 
		display: block;    
	}
} 
.el-blog-post {
	margin-bottom: 30px;
	position: relative;
	@include mq(767) {
		margin-bottom: 30px !important;
	}
	figure.post-img { 
		margin-bottom: 15px !important;
	}
	img {
		margin-bottom: 0;
	} 
	h4 {
		margin: 15px 0;
		a {
			outline: none;
		}
	}
	.btn {
		padding: 15px 30px;
		font-weight: 400; 
	}
 
	&.v2 { 
		.play-btn {  
			top: 1rem;
		}
		.entry-meta { 
			bottom: 0;  
			position: absolute; 
			display: block;   
			background: #ffffffc7;  
			width: 100%;
			padding: 10px;
			margin-bottom: 0 !important;
		} 
		.btn { 
			// position: absolute;
			// transform: rotate(-90deg);
			// right: -64px;
			background: #7c49dd;
			color: #fff;
			// bottom: 50px;
			line-height: 1;
			padding: 8px 10px 10px;
			border-radius: 3px;
			i {
				color: #fff;
			}
		}
	}
}

/**
    *  Pagination
    */
.navigation.pagination {
	span.page-numbers.current {
		background-color: $primary-clr;
		padding: 5px 10px;
		color: #fff;
		margin-right: 4px;
		border-radius: 4px;
		font-weight: 700;
		min-width: 35px; 
		display: inline-block;
	}
 
	a,
	span.page-numbers.dots {
		padding: 5px 10px;
		background-color: $secoundery-clr;
		color: $primary-clr;
		margin-right: 4px;
		border-radius: 4px;
		font-weight: 700;
		min-width: 35px;
		display: inline-block;

		&:hover {
			background-color: $primary-clr;
			color: #fff;
		}
	}
}

/** 
*  Pulse Animation
*/
.play-btn {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	animation: pulse-animation 1.5s infinite;
	background-color: #fff;
	border-radius: 50%;
	color: #0c1215;
	flex-direction: column;
	font-size: 1.2rem;
	height: 3.5rem;
	width: 3.5rem; 
	position: absolute;
	right: 1rem;
	bottom: 1rem;
}

.pulse-ani {
	animation: pulse-animation 1.5s infinite;
}

@keyframes pulse-animation {
	0% {
		transform: none !important;
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.85);
	}

	70% {
		transform: none !important;
		box-shadow: 0 0 0 1rem rgba(255, 255, 255, 0);
	}

	100% {
		transform: none !important;
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

/**
    *  Testimonial
    */ 
.testimonial-section {
	// overflow: hidden;
	width: 100%;
	position: relative;

	.owlControl {
		display: block;

		.owl-nav {
			display: block;
		}
	}
}

.testimonial {
	.owl-nav {
		display: none;
	}

	.single-tst {
		position: relative;
		text-align: center;
		margin-bottom: 30px;

		img {
			margin: 0 auto 45px;
			width: 59px;
		}

		p {
			color: #263a41;
			// font-family: $rufina;
			font-size: 18px;
			font-weight: 400;
			line-height: 35px;
			margin-bottom: 43px;
		}

		.client-info {
			.thumb {
				border-radius: 50%;
				margin-bottom: 22px;
				height: 76px;
				width: 76px;
			}

			p {
				font-size: 22px;
				margin-bottom: 0;

				span {
					display: inline-block;
					// font-family: $roboto;
					font-size: 15px;
					font-weight: 300;
				}
			}
		}
	}

	.owl-dots {
		text-align: center;
		margin-top: 20px;

		button {
			outline: none;

			span {
				background-color: $secoundery-clr;
				border-radius: 50%;
				display: inline-block;
				margin: 0 5px;
				height: 8px;
				width: 8px;
			}

			&.active {
				span {
					background-color: $primary-clr;
				}
			}
		}
	}
}

.tesimonial {
	.video-box {
		@include mq(767) {
			margin-bottom: 40px;
		}
	}
}
 
.test-caro {
	// max-width: 710px; 
	width: 100%; 

	@include min-mq(768) {
		// padding-left: 60px; 
	}

	.single-test {
		text-align: center;

		i.ti-quote-left {
			font-size: 65px;
			color: #7c49dd;
			margin-bottom: 20px;
			display: block;
		}
 
		p {
			color: #263a41; 
			font-size: 16px;
			font-weight: 400; 
			line-height: 35px;
			margin-bottom: 0;
			margin-top: 20px;
		}

		.company-logo {
			margin-top: 40px;
			max-width: 119px;
			float: left;
			margin-right: 25px; 
		}
	}

	.avatar {
		// max-width: 140px;
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: inline-block !important;
		border-radius: 5px;
	}
	.testimonial-img-box{
		margin-bottom: 40px;
		max-width: 150px;
		margin: 0 auto; 
	}

	.circle {
		border-radius: 50%;
	}

	.testi-info {
		margin-top: 20px;
	}
}

.owlControl {
	position: absolute;
	top: 60px;
	left: 260px;
	z-index: 1;

	button {
		border: none;
		background: none;
		margin: 10px;
		outline: none;
		position: relative;
		padding: 0;

		i {
			position: relative;
		}
	}

	button:before {
		content: "";
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #fbcfb2;
		display: block;
		position: absolute;
		left: -15px;
		opacity: 0;
	}

	button.owl-prev:before {
		left: 10px;
	}
}

.testimonial {
	&.version-1 {
		.owlControl {
			width: 230px;
			left: 0;
			right: 0px;
			margin: auto;
			height: 35px;

			button {
				width: 30px;
				height: 30px;
				text-align: center;
				left: auto; 
				margin: 0;
				padding: 5px; 
				background-color: $primary-clr;
				position: absolute;
				cursor: pointer;
				opacity: 0;
				transition: all 0.5s;
				i {
					color: #fff;
					position: relative;
					top: -3px; 
				}
				&.owl-prev {
					left: 30px;
				}

				&.owl-next {
					right: 30px;
				}
			}
		}

		&:hover {
			.owlControl {
				.owl-prev {
					left: 0;
					right: auto;
					opacity: 0.7;
				}

				.owl-next {
					right: 0;
					left: auto;
					opacity: 0.7;
				}
			}
		}
	}

	&.version-2 {
		display: block;
		width: 100%;

		#carousel-custom-dots {
			text-align: center;
			margin-top: 40px;
			padding-bottom: 15px;

			.thumb {
				display: inline-block;
				// max-width: 100px;
				cursor: pointer;
				position: relative;
				margin: 0 10px;

				&:before,
				&:after {
					content: "";
					width: 80%;
					height: 80%;
					display: block;
					border-radius: 50%;
					position: absolute;
					background: #7c49dd;
					z-index: 0;
					-webkit-transition: all 0.4s;
					transition: all 0.4s;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
				}

				&.active {
					&:before {
						top: -6px;
						margin: 0;
					}

					&:after {
						bottom: -5px;
						top: auto;
						margin: 0;
						right: 0;
						left: auto;
					}
				}

				img {
					border: 5px solid $primary-clr;
					border-radius: 50%;
					width: 80px;
					height: 80px;
					pointer-events: none;
					position: relative;
					z-index: 2;
				}
			}
		}
	}
}

/**
    *  Team
    */
.single-memb {
	padding: 15px;
	text-align: center;

	.memb-details {
		padding: 10px 0;
	}

	img {
		margin-bottom: 20px;
		border-radius: 5px;
	}
}

.memb-details {
	span {
		color: #888;
		display: block;
		font-size: 14px;
		margin-bottom: 15px;
	}

	.memb-social {
		a {
			color: #999;
			display: inline-block;
			font-size: 14px;
			line-height: 0.8;
			position: relative;
			padding: 0 10px;

			&:not(:first-child):before {
				@include pseudo($t: 3px, $l: -5px);
				background-color: #d9dadb;
				border-radius: 50%;
				height: 6px;
				width: 6px;
			}
		}
	}
}

.single-memb {
	border: 1px solid #e3e6ea99;
	position: relative;

	:hover {
		h5 {
			a {
				color: $primary-clr;
			}
		}
	}

	h5 {
		margin-bottom: 10px;
	}

	h5,
	a {
		color: $darkmid-clr;
		display: block;
		font-size: 22px;
	}

	a:hover {
		color: $primary-clr;
	}

	@include mq(767) {
		margin-bottom: 30px;
	}

	&:hover { 
		box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.07);
	}
}

/** 
    *  Apointment CSS 
    */ 
.appointment {
	& .v2 {
		padding-bottom: 0;
		border-bottom: 1px solid #fdd5d5;
	}

	.appointment-wrap {
		display: flex;
		flex-wrap: wrap; 

		figure {
			flex-basis: 40%;

			@include mq(1300) {
				display: none;
			}
		}

		.appointment-form {
			flex-basis: 100%;
			// padding-left: 100px;

			@include mq(1300) {
				flex-basis: 100%;
				padding: 30px 15px;
			}

			form {
				max-width: 650px;
				position: relative;
				top: 50%;
				transform: translateY(-50%);

				@include mq(1300) {
					margin: 0 auto;
				}
			}
			.select{
				margin-bottom: 30px;
			}
		}
	}
}

.appointment-form {
	// background-color: #fff9f8;
	// padding: 40px 0;
	// padding-top: 70px;

	.form-field {
		position: relative;
		margin-left: -15px;
		margin-right: -15px;

		.half-width {
			width: 50%;
			float: left;
			padding: 0 15px;
			@include mq(550) { 
				width: 100%;
			}
		}
 
		.full-width {
			width: 100%;
			float: left;
			padding: 0 15px;
		}

		span {
			width: 49%;
		}
		input,
		textarea,
		select {
			border: none;
			display: block;
			font-weight: 400;
			padding: 15px 30px;
			padding-right: 0;
			margin-bottom: 30px;
			width: 100%;
			text-transform: capitalize !important;
			padding-right: 20px;
			box-shadow: 0 5px 8px #f0f0f059;
			border-radius: 30px;
			&::placeholder {
				opacity: 1;
			}
		}

		input[type='file']{
			background-color: #fff; 
			padding: 12px ​15p;
		}
		textarea {
			max-height: 140px;
		}

		input:focus,
		textarea:focus,
		select:focus, 
		input:active,
		textarea:active,
		select:active {
			outline: none;
			border-color: #7c49dd;
		}

		select {
			appearance: none;
			text-transform: uppercase;
			option {
				padding: 20px;
			}
		}

		.select-field {
			width: 100%;
		}

		.btn {
			padding: 20px 35px;
			width: auto;
			// background: $primary-clr;
			// color: #fff;
			margin-bottom: 0;
 
			&:hover {
				// background-color: #fff;
				// color: $primary-clr;
			}
		}

		@include min-mq(480) {
			&.half-width {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				input,
				.select-field {
					width: 100%;
				}
			}
		}
	}

	.btn {
		padding: 20px 25px;
	}
}

/**
    *  Team 2
    */
.team {
	.single-memb {
		position: relative; 
		width: 100%;

		img { 
			border-radius: 5px; 
		}  
 
		@include mq(767) {
			margin-bottom: 30px;
		}  

		.memb-details { 
			border-radius: 5px;
			background-color: #fff;
			box-shadow: 0 0 30px 5px #00000012;
			max-width: calc(100% - 60px);
			padding: 30px 30px 5px; 
			position: absolute;
			text-align: center;
			transition: all 300ms ease-in-out;
			z-index: 1;
			right: 0;
			margin: auto;
			left: 0;
			bottom: -57px;

			@include mq(1199) {
				padding: 30px 20px;
			}

			@include mq(991) {
				max-width: 100%;
				padding: 20px 15px;
			}

			h6 {
				color: #263a41; 
				font-size: 22px;
				margin-bottom: 0;
			}
  
			span {
				display: block;
				margin-bottom: 15px;
			}
		}

		.memb-social {
			margin-top: -30px;
			transition: all 300ms ease-in-out;
			opacity: 0;
			visibility: hidden;

			ul { 
				margin: 0;
				padding: 0;
			}

			a { 
				border-radius: 50%;
				color: $primary-clr;
				background: $secoundery-clr;
				display: inline-block;
				font-size: 13px;
				text-align: center;
				line-height: 30px;
				margin: 0px 0px;
				height: 35px;
				width: 35px;
				padding: 3px;

				&:hover {
					background-color: $primary-clr;
					border-color: $primary-clr;
					color: #fff;
				}
			}
		}

		&:hover {
			box-shadow: none;

			.memb-details {
				margin-top: -100px;
				padding-bottom: 30px;
			}

			.memb-social {
				margin-top: 0;
				opacity: 1;
				visibility: visible;
			}
		}
	}

	&.v2 {
		.single-memb {
			border: 0 solid #f6f7fb;
			position: relative;
			padding: 0;
			margin-bottom: 60px;
		}
	}
}

/**
    *  Contact Widget
    */
.contact {
	address {
		color: #888;
		font-size: 14px;
		font-weight: 400;
		padding-left: 80px;
		position: relative;

		a {
			color: #888;
			display: block;
			font-size: 14px;
			font-weight: 400;

			&:hover {
				color: $primary-clr;
			}
		}

		span {
			background-color: $primary-clr;
			border-radius: 50%;
			color: #fff;
			display: block;
			font-size: 14px;
			line-height: 50px;
			text-align: center;
			position: absolute;
			left: 0;
			top: 0;
			height: 50px;
			width: 50px;
		}
	}
}

.contact-form {
	width: 100%;

	@include mq(767) {
		margin-top: 40px;
	}

	input,
	textarea {
		border: 1px solid #e3e6ea;
		display: block;
		padding: 10px 20px;
		margin-bottom: 25px;
		width: 100%;
		font-weight: 300;

		::placeholder {
			color: #3c3c3c;
		}
	}

	textarea {
		resize: none;
		height: 120px;
	}

	input:focus,
	textarea:focus,
	input:active,
	textarea:active {
		outline: none;
		border-color: #7c49dd;
	}

	input.btn {
		width: auto;
		box-shadow: 0 0 black;
		padding: 20px 15px;
		margin-bottom: 0;
	}
}

/**
    *  Map
    */
.map {
	@include mq(767) {
		padding-top: 0;
	}
}

#map {
	position: relative;
	height: 500px;
	width: 100%;

	@include mq(991) {
		height: 350px;
	}

	@include mq(767) {
		height: 250px;
	}
}

/**
    *  Blog Details
    */
.blog-details-sec {
	.post-featImg {
		margin-bottom: 0;
		position: relative;

		span {
			i {
				font-size: 1.5rem;
				margin-bottom: 0rem;
				display: inline-block;
				color: #7c49dd;
			}
		}
	}

	.blog-single-post {
		text-align: left;
		padding: 20px;
		.wp-block-quote p {
			margin-bottom: 0;
			padding-bottom: 0;
		}

		h2 {
			font-size: 36px;
			margin-top: 15px;
			font-weight: 700;
		}

		.entry-meta {
			display: block;
			float: left;
			width: 100%;
			margin-top: 10px;
			margin-bottom: 10px;

			i {
				display: inline-block;
				margin-bottom: 0;
				font-size: 16px;
				color: $primary-clr;
				margin-right: 3px;
			}

			span {
				margin-right: 20px;

				a {
					color: #192225;
				}
			}
		}

		.comment-reply-title {
			font-size: 22px;
			border-bottom: 2px solid #192225;
			display: inline-block;
			padding: 5px 0;
		}
	}

	.blog-single-post {
		blockquote {
			background-color: #0000000c;
			padding: 37px 50px;
			margin: 30px 0 40px;
		}
	}

	.comment-list {
		img {
			max-width: 60px;
			display: inline-block;
			// float: left;
			margin-right: 14px;
		}

		b.fn {
			text-transform: capitalize;
		}

		footer.comment-meta {
			display: block;
			overflow: hidden;
			margin-top: 16px;
		}

		.comment-content { 
			margin-top: 10px;
		}

		@media (min-width: 768px) {
			.comment-content,
			.reply {
				margin-left: 70px;
			}
		}
	}
}

ul.comment-list {
	margin: 0;
	padding: 30px 0; 
}
 
.comments-area {
	display: block;
	margin-top: 30px;

	h3 {
		font-size: 18px;
		margin-bottom: 15px;
	}

	h2.comments-title {
		text-transform: capitalize;
		font-size: 18px;
	}
}

// Share
.share_tags {
	display: block;
	margin-bottom: 20px;
	margin-top: 30px;

	h4 {
		font-size: 20px;
		margin-bottom: 15px;
	}

	ul.social_icons {
		padding: 0;
		margin: 0;

		li {
			display: inline-block;

			a {
				width: 40px;
				height: 40px;
				display: block;
				background: #ffd8d7;
				text-align: center;
				padding: 7px;
				border-radius: 3px;
				font-size: 17px;
				color: #fff;
			}
		}
	}
}
 
.post-tags {
	a {
		background: #7c49dd;
		padding: 5px 15px  5px  35px;
		color: #fff;
		border-radius: 3px;
		display: inline-block;
		margin-bottom: 3px; 
		position: relative;

		&:before{
			content: '\f02c';
			position: absolute;
			font-family: "Font Awesome 5 Free";
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			font-weight: 900;
			left: 11px;
			font-size: 12px;
			top: 13px;
		}
	}
}

/**
    *  Comments CSS
    */ 
.comment-respond {
	input#wp-comment-cookies-consent {
		display: inline-block;
		width: auto;
	}
}

.comments-area {
	input#submit {
		background: $primary-clr;
		color: #fff;
	}
}

.comment-title {
	border-bottom: 2px solid #1e2528;
	color: #1e2528;
	display: inline-block;
	font-size: 18px;
	text-transform: capitalize;
	position: relative;
	padding-bottom: 0;
	margin-bottom: 30px;
}

.comments {
	margin-bottom: 50px;

	.reply {
		// font-family: $roboto;
		font-size: 14px;
		font-weight: 400;
		line-height: 28px;
		position: absolute;
		top: 0;
		right: 0;
		color: #e57d80;
		letter-spacing: 2.8px;
	}

	ul {
		list-style: none;

		li {
			position: relative;
			margin-bottom: 34px;
			padding-left: 40px;

			@include mq(479) {
				padding-left: 30px;
			}

			h4 {
				color: #1e2528;
				font-size: 16px;
				font-weight: 700;
				margin-bottom: 8px;
			}

			p {
				font-size: 13px;
				line-height: 24px;
				margin-bottom: 10px;
			}

			a,
			span {
				color: #6c6c6f;
				display: inline-block;
				font-size: 13px;
				font-weight: 300;
				padding: 0 15px;

				@include mq(479) {
					padding: 0 5px;
				}
			}

			a:hover {
				color: $primary-clr;
			}

			a:first-of-type {
				padding-left: 0;
			}

			span {
				i {
					color: #1e2528;
					font-size: 13px;
					margin-right: 3px;
					vertical-align: middle;
				}
			}

			ul {
				li {
					&:first-child {
						margin-top: 35px;
					}
				}
			}
		}
	}

	.single-comment {
		border: 1px solid #e3e6ea;
		border-radius: 5px;
		padding: 25px 60px;
		position: relative;

		@include mq(575) {
			padding-right: 15px;
		}

		@include mq(479) {
			padding-left: 40px;
		}
	}

	.user-thumb {
		border-radius: 50%;
		position: absolute;
		left: -40px;
		top: 50%;
		transform: translateY(-50%);
		height: 80px;
		overflow: hidden;
		width: 80px;

		@include mq(479) {
			height: 65px;
			width: 65px;
		}
	}
}

/**
    *  Comment Form
    */
.comment-form {
	form {
		width: 100%;
		display: block;
		position: relative;

		.input-field {
			display: block;
			margin-bottom: 25px;
			width: 100%;

			label {
				color: #1e2528;
				display: block;
				font-size: 13px;
				margin-bottom: 10px;
			}
		}
	}

	input,
	textarea {
		background: transparent;
		border-radius: 3px;
		border: 1px solid #e3e6ea;
		box-shadow: none;
		padding: 7px 20px;
		width: 100%;
	}

	textarea {
		height: 200px;
	}

	button {
		background-color: $primary-clr;
		text-transform: uppercase;
		padding: 15px 30px;
	}
}

/**
    *  Footer Widget
    */
.footer {
	background-color: #fff9f8;
	padding: 0;

	.foo-top {
		background-position: center;
		background-size: cover;
		padding: 90px 0 70px;
		position: relative;
	} 

	.widget ul {
		margin: 0 0 1.5em 1em;
	} 

	.widget li a {
		color: #3c3c3c;
		display: -webkit-box;
		display: -ms-flexbox;
		display: block;
		border-bottom: 1px solid #e0e4e652;
		padding: 3px 0;
	}

	.widget li a:hover {
		color: $primary-clr;
	}

	.widget li a span {
		display: inline-block;
		margin-left: auto;
	}

	.widget li:last-child a {
		border-bottom: 0;
	}

	.widget_search {
		padding: 0 !important;
		border: none !important;
	}

	.widget_search form {
		position: relative;
	}

	.widget_search form i {
		position: absolute;
		top: 50%;
		right: 15px;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.widget_search input {
		background-color: none;
		border: 1px solid #e0e4e6;
		border-radius: 5px;
		padding: 15px 40px 15px 25px;
		width: 100%;
	}

	.widget_search label {
		width: 100%;
		margin-bottom: 0;
	}

	.entry-content,
	.entry-content-fluid {
		position: relative;
		margin-bottom: 60px;
	}

	.entry-content h3,
	.entry-content-fluid h3 {
		// font-family: "Roboto", sans-serif;
		font-weight: 500;
		margin-bottom: 20px;
		/* text-transform: capitalize; */
	}

	.entry-content h6,
	.entry-content-fluid h6 {
		margin: 40px 0 20px;
	}

	.entry-content .meta-tags,
	.entry-content-fluid .meta-tags {
		border-bottom: 1px solid #e0e4e6;
		margin: 30px 0;
		padding-bottom: 20px;
	}

	.entry-content .meta-tags a,
	.entry-content-fluid .meta-tags a {
		color: #83868c;
		font-size: 12px;
		text-transform: capitalize;
		margin-right: 10px;
		padding-right: 10px;
		position: relative;
	}

	.entry-content .meta-tags a i,
	.entry-content-fluid .meta-tags a i {
		margin-right: 10px;
	}

	.entry-content .meta-tags a:not(:last-child):after,
	.entry-content-fluid .meta-tags a:not(:last-child):after {
		content: "";
		position: absolute;
		top: 50%;
		left: auto;
		right: 0;
		bottom: 0;
		background-color: #83868c;
		border-radius: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		height: 3px;
		width: 3px;
	}

	.widget {
		&-title {
			margin-bottom: 30px;
			// font-weight: 500;
			// font-family: $rufina;
			// color: #6c6c6f;
		}

		@media screen and (max-width: 768px) {
			margin-bottom: 30px;

			&-title {
				margin-bottom: 15px;
			}
		}

		ul {
			list-style: none;
			margin: 0;
			padding: 0px;
		}

		img {
			max-width: 160px !important;
		}
	}

	.widget.widget-text {
		margin-bottom: 17px;
	}

	.widget-navigation {
		a {
			position: relative;
			color: #3c3c3c;

			&::before {
				@include pseudo(50%, 0, auto, auto);
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background-color: #ff9997;
				transform: translateY(-50%);
				opacity: 0;
				visibility: hidden;
				transition: all 300ms ease-in-out;
			}

			&:hover {
				padding-left: 10px;

				&::before {
					opacity: 1;
					visibility: visible;
				}
			}
		}
	}

	.foo-logo {
		margin: 0 auto;
	}

	.foo-nav {
		@extend .primary-menu;
		margin: 30px 0;

		ul {
			background-color: transparent;
			list-style: none;
		}
	}

	.foo-social {
		margin-bottom: 0px;

		@include mq(992) {
			text-align: center !important;
			margin-bottom: 15px;
			margin: 0; 
			padding: 0;
		}

		li {
			display: inline-block;

			a {
				border-right: 1px solid #fff;
				color: #263a41;
				display: inline-block;
				font-size: 14px;
				line-height: 0.8;
				padding: 0 10px;

				&:hover {
					color: $primary-clr;
				}

				&:last-child {
					border-right: none;
				}
			}
		}
	}

	.copyright {
		color: #888;
		margin-bottom: 0;

		a {
			color: $primary-clr;
		}
	}

	.foo-btm {
		position: relative;
		padding: 25px 0;
	}
}

a.logo.foo-logo img {
	max-width: 110px;
	margin: 0 auto;
}

/**
    *  Services Widget
    */ 
.service-widget {
	border: 10px solid #e3e6ea99;
	padding: 25px;
	margin-bottom: 15px;
	position: relative;
	background: #fff;
	@include mq(767) {
		border: 5px solid #e3e6ea99;
		padding: 10px;		
	}
	h3 {
		color: #233646;
		display: block;
		font-size: 28px;
		font-weight: 600;
		margin-bottom: 15px;
	}

	.btn {
		margin: 0 auto;
		display: block;
		padding: 13px 15px 15px;
		max-width: 250px;
	}

	&:hover {
		box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.07);
	}
	.sp-wrapper .pricing-list-item {
		padding: 12px 0;
		.content p {
			margin-top: 0;
		}
	}

	&:before {
		content: "\e6c6";
		font-family: "themify";
		font-size: 244px;
		color: #000;
		opacity: 0.02;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		margin: auto;
		bottom: 0;
		display: block;
		height: 244px;
		line-height: 1;
		max-width: 244px;
	}
	.open_border {
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		margin-top: 20px;
		margin-left: 20px;
		border: 10px solid $primary-clr;
		z-index: -1;
	}
}

ul.serviceList {
	margin: 0;
	padding: 0;

	li {
		list-style: none;
		display: block;

		a {
			text-align: left;
			font-size: 16px;
			font-weight: 400;
			margin-bottom: 15px;
			background: #ffffff;
			color: #162b45;
			padding: 8px 15px;
			display: block;
			box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.07);
			border-radius: 3px;
			position: relative;

			&:hover {
				background: $primary-clr;
				color: #fff;

				&:before {
					background: #fff;
				}
			}

			&:before {
				content: "";
				width: 2px;
				height: 2px;
				background: $primary-clr;
				position: absolute;
				right: 15px;
				display: block;
				top: 50%;
				left: 50px;
			}
		}

		&.active a {
			background: $primary-clr;
			color: #fff;

			&:before {
				background: #fff;
			}
		}
	}
}

.market-single-widgets-details {
	.content-box {
		margin-bottom: 30px;

		h2 {
			display: block;
			padding-bottom: 0;
			margin-bottom: 5px;
			margin-top: 15px;
		}
	}
}

.iconBox {
	border: 1px solid #e3e6ea99;
	border-radius: 5px;
	padding: 40px 25px;
	position: relative;
	text-align: center; 
	transition: all .5s;
	margin-bottom: 10px;

	.icon {
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 27px;
		line-height: 70px;
		margin: 0 auto 30px;
		height: 80px;
		width: 80px;
		background: $secoundery-clr;
		text-align: center;
		position: relative;
		transition: all 0.4s;

		img {
			display: inline-block;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			max-width: 40px;
			// -webkit-filter: opacity(.5) drop-shadow(0 0 0 $primary-clr);
			// filter: opacity(.5) drop-shadow(0 0 0 $primary-clr);
		}

		i {
			color: $primary-clr;
			transition: all 0.4s;
		}

		[class^="borax-"],
		[class*=" borax-"] {
			font-size: 80px;
		}
	}

	a {
		color: #233646;
		display: block;

		h3 {
			font-size: 22px;
			font-weight: 600;
			margin-bottom: 10px;
			// font-family: $rufina;
		}
	}

	p {
		margin-bottom: 0;
		width: 100%;
		overflow: hidden;
	}

	i,
	a,
	h3,
	p {
		position: relative;
		z-index: 2;
		translate: all 1s;
	}

	// IconBox hover
	&:hover {
		border-color: transparent;
		box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.07);

		.icon {
			background-color: $primary-clr;
		}

		i {
			// color: #fff;
		}
	}

	@include mq(991) {
		margin-bottom: 30px;
	}

	&.ib-left {
		.icon {
			display: inline-block;
			width: 40px;
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			margin-bottom: 20px;
		}

		a {
			display: inline-block;
			margin-left: 10px;
			margin-bottom: 0;
		}
	}

	&.iconBox2 {
		position: relative;
		padding-bottom: 50px;

		&:before,
		&:after {
			content: "";
			width: 0;
			height: 100%;
			display: block;
			background: $primary-clr;
			position: absolute;
			right: 0;
			top: 0;
		}

		&:after {
			transition: all 0.4s;
			transition-delay: 0.2s;
		}
		&:before {
			background: $primary-clr;
			opacity: 0.5;
			transition-delay: 0s;
			transition: all 0.3s;
		}

		.view_details {
			width: 50px;
			height: 50px;
			display: block;
			margin: 0 auto;
			background: #fff;
			text-align: center;
			padding: 13px;
			position: absolute;
			left: 0;
			right: 0;
			bottom: -30px;
			border-radius: 3px;
			opacity: 0;
			color: #233646;
		}

		.icon {
			background: transparent !important;

			i {
				color: $primary-clr;
			}

			img {
				max-width: 70px;
			}
		}

		&:hover {
			&:before,
			&:after {
				width: 100%;
			}

			.icon i,
			a,
			h3,
			p {
				color: #fff !important;
			}

			a.view_details {
				box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.07);
				opacity: 1;
				bottom: -20px;

				&:hover {
					background: $secoundery-clr;
				}

				i {
					color: $primary-clr;
				}
			}
		}
	}

	&.v3 {
		background-image: url(../images/dot.png);
		background-repeat: no-repeat;
		background-position: bottom left;
		// .icon-box {
		//     width: 60px;
		//     float: left;
		// }
		// .content-box {
		//     width: calc(100% - 60px);
		//     display: inline-block;
		// }

		.view_details {
			width: 120px;
			height: 40px;
			display: block;
			text-align: center;
			padding: 11px;
			position: absolute;
			text-transform: uppercase;
			right: 0;
			left: auto;
			top: 0;
			bottom: 0;
			border-radius: 3px;
			opacity: 1;
			color: #7c49dd;
			background: #ffd8d7;
			word-break: break-all;
			margin: auto;
			font-size: 14px;
			line-height: 1.4;
			transform: rotate(-90deg);
			transform-origin: 80px 0px;
			opacity: 0;
		}

		&:hover {
			.view_details {
				bottom: 0 !important;
				background-color: #7c49dd;
				color: #fff;
				right: -20px;
				opacity: 1;
			}
		}
	}
}

.iconBox.align-left {
	text-align: left;
	padding: 20px 25px;

	.icon-heading {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-bottom: 20px;
	}

	.icon {
		display: flex;
		text-align: center;
		margin-right: 10px;
		height: 40px;
		width: 40px;
		line-height: 1;
		margin-bottom: 0;

		img {
			position: relative;
			margin-top: 10px;
		}
	}

	a {
		// margin-bottom: 10px;
		display: inline-block;
		position: relative;

		h3 {
			margin-bottom: 0;
		}
	}
}

.iconBox.align-right {
	text-align: right;
	padding: 20px 25px;

	.icon {
		text-align: center;
		margin-right: 10px;
		height: 40px;
		width: 40px;
		line-height: 1;
		float: right;
		margin: 0 auto 30px;

		img {
			position: relative;
			// margin-top: 10px;
		}
	}

	a {
		display: inline-block;
		margin-right: 17px;

		h3 {
			margin-bottom: 0;
			padding-left: 5px;
		}
	}

	.iconBox p {
		margin-bottom: 0;
		display: block;
		overflow: hidden;
		width: 100%;
		margin-top: 16px;
	}
}

/**
    *  Call To Action 
    */
.call-action-section {
	// background: url(../images/video-bg.jpg);
	background-size: cover;
	background-position: center;
	position: relative;

	.call-inner {
		padding: 80px 0;
		width: 100%;
		height: 100%;
		display: block;
		background: #ffffffd9;
	}
}

.call-content {
	h2,
	p {
		color: #10233a;
	}
}

/**
    *  Accordiion
    */
.accordion {
	.card-header {
		padding: 10px;
 
		.a-btn {
			color: #fff;
			display: block;
			width: 100%;
			text-align: left;
			padding: 15px 15px;
			position: relative;
			text-transform: capitalize;
			background: $primary-clr;
			text-decoration: none;
			border: none;
			outline: none;
			border-radius: 0;
			&:before {
				content: "";
				width: 20px;
				height: 2px;
				background: #fff;
				position: absolute;
				right: 10px;
				display: block;
				top: 50%;
			}

			&:after {
				content: "";
				width: 2px;
				height: 20px;
				position: absolute;
				right: 10px;
				display: block;
				top: 12px;
				right: 19px;
				display: none;
			}

			&.collapsed {
				background-color: #e8e8e8ad;
				color: #252525;

				&:after,
				&:before {
					background: $primary-clr;
					display: block;
				}
			}
		}
	}

	.card {
		img {
			max-width: 50%;

			&.alignleft {
				float: left;
				margin-right: 20px;
				margin-bottom: 20px;
			}

			&.alignright {
				float: right;
				margin-left: 20px;
				margin-bottom: 20px;
			}
		}
	}

	&.version-2 {
		.card {
			margin-bottom: 15px;
			box-shadow: 0 0 30px 5px #00000012;
			border: none;
			overflow: inherit;
			background: transparent;
			border-radius: 10px;

			&.card:not(:first-of-type):not(:last-of-type) {
				border-radius: 10px;
			}

			&:hover {
				border: none;
			}

			.card-header {
				background: transparent;
				padding: 0;
				position: relative;
				border-bottom: none;

				&:before {
					content: "";
					width: 30px;
					height: 30px;
					border-radius: 50%;
					border: 1px solid #ddd;
					position: absolute;
					right: 15px;
					display: block;
					top: 0;
					z-index: 1;
					bottom: 0;
					margin: auto;
				}

				.a-btn {
					background: transparent;
					color: #252525;
					padding: 25px 40px;
					border: 0px solid transparent;
					font-size: 18px;

					&:hover {
						border: 0px solid transparent;
					}
				}
			}

			.card-body {
				padding: 20px 37px 10px;
				padding-top: 0;
			}
		}

		.card-header .a-btn:before,
		.card-header .wp-block-button__link:before {
			content: "\e622";
			font-family: "themify";
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			text-transform: none; 
			line-height: 1; 
			-webkit-font-smoothing: antialiased;
			width: 15px; 
			height: 15px;
			color: #b7b7b7;  
			background: transparent;
			right: 23px;
			top: 32px;
		}
 
		.card-header .a-btn:after, 
		.card-header .wp-block-button__link:after {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			position: absolute;
			left: 15px; 
			display: block;
			top: 0; 
			right: auto;
			z-index: 1;
			bottom: 0;
			margin: auto;
			background: $primary-clr;
		}

		.card-header .a-btn.collapsed:before { 
			content: "\e61a";
			background: transparent; 
		}

		.card-header .a-btn.collapsed:after {
			background: #ddd;
		}
	}
}

.content-box {
	h2 {
		color: #233646;
		font-size: 30px;
		line-height: 40px;
		margin-bottom: 23px;

		@include mq(479) {
			font-size: 26px;
			line-height: 34px;
		}
	}

	h5 {
		color: #233646;
		font-size: 20px;
		font-weight: 500;
		line-height: 30px;
		margin-bottom: 30px;
	}

	.a-btn {
		// margin-top: 20px;
	}
}

.image-box {
	.content-box {
		h2 {
			margin-bottom: 10px;
		}

		p {
			margin-bottom: 0;
		}
	}

	.right-arrow {
		position: relative;

		&:before {
			position: absolute;
			top: 0;
			bottom: 0;
			margin: auto;
			left: 15px;
			content: "";
			width: 0;
			height: 0;
			border-top: 30px solid transparent;
			border-left: 0 solid transparent;
			border-bottom: 30px solid transparent;
			transition: all 0.4s;
		}
	}

	.left-arrow {
		position: relative;

		&:before {
			position: absolute;
			top: 0;
			bottom: 0;
			margin: auto;
			right: 15px;
			content: "";
			width: 0;
			height: 0;
			border-top: 30px solid transparent;
			border-right: 0 solid transparent;
			border-bottom: 30px solid transparent;
			transition: all 0.4s;
		}
	}

	&:hover .right-arrow {
		&:before {
			border-left-width: 60px;
			border-left-color: #fff;
		}
	}

	&:hover .left-arrow {
		&:before {
			border-right-width: 60px;
			border-right-color: #fff;
		}
	}
}

.content-box-fluid {
	@include mq(992) {
		padding: 30px 0;
		display: block;
		text-align: center; 
	}

	@extend .content-box;
	width: 100%;

	@include min-mq(768) {
		// max-width: 505px;
	}

	&.right {
		@include min-mq(768) {
			float: right;
		}
	}

	&.left {
		h2 {
			margin-bottom: 10px;
		}

		span {
			margin-bottom: 5px;
		}

		p {
			margin-bottom: 0;
		}
	}

	span.tagline {
		color: $primary-clr;
	}
}

/**
    *  Sidebar
    */
.sidebar {
	@media screen and (max-width: 768px) {
		margin-top: 30px;
		border-top: 1px solid #ddd;
		padding-top: 45px;
	}

	.widget {
		border: 1px solid #e3e6ea99;
		border-radius: 5px;
		padding: 25px;
		position: relative;
		margin-bottom: 30px;

		h3 {
			font-size: 20px;
		}

		&.widget_nav_menu {
			overflow: hidden;
		}
	}

	.sidebar .widget .widget-title {
		text-transform: capitalize;
		margin-bottom: 20px;
	}

	.widget {
		padding-bottom: 30px;

		a {
			overflow: hidden;
			display: block;
		}

		img {
			transition: all 0.5s;
		}

		&.widget_media_image {
			&:hover {
				img {
					transform: scale(1.1);
				}

				.gallery-item {
					img {
						transform: scale(1);
					}
				}
			}
		}

		.gallery-item {
			a:hover {
				img {
					transform: scale(1.1);
				}
			}
		}

		.tagcloud {
			display: block;
			margin-top: 15px;

			a {
				background: $primary-clr;
				padding: 3px 10px;
				color: #fff;
				border-radius: 3px;
				display: inline-block;
				font-size: 14px !important;
			}
		}
	}

	.widget ul {
		margin: 0;

		li {
			list-style: none;
			display: flex;
			align-items: center;
			width: 100%;

			&:not(:last-child) {
				border-bottom: 1px solid #e0e4e6;
			}
		}
	}

	.widget li a {
		color: #83868c;
		display: -webkit-box;
		display: -ms-flexbox;
		// display: inline-block;
		display: block;
		// border-bottom: 1px solid #e0e4e6;
		padding: 7px 0;
		flex-grow: 1;
		flex-shrink: 1;
	}

	.widget li a:hover {
		color: $primary-clr;
	}

	.widget li a span {
		display: inline-block;
		margin-left: auto;
	}

	.widget li:last-child a {
		border-bottom: 0;
	}

	.widget_search {
		padding: 0 !important;
		border: none !important;
	}

	.widget_search form {
		position: relative;
	}

	.widget_search form i {
		position: absolute;
		top: 50%;
		right: 15px;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.widget_search input {
		background-color: none;
		border: 1px solid #e0e4e6;
		border-radius: 5px;
		padding: 15px 40px 15px 25px;
		width: 100%;
	}

	.recentcomments {
		padding: 10px 0;

		span {
			a:first-child {
				padding-left: 0 !important;
				text-transform: capitalize;
				font-weight: 700;
			}

			padding-right: 12px;
		}

		a:last-child {
			padding-left: 10px !important;
		}
	}

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

		th,
		td {
			border: 1px solid #e0e4e6;
			text-align: center;
			padding: 5px;
		}
	}

	span.screen-reader-text {
		display: none;
	}

	.widget_search label {
		width: 100%;
	}

	input.search-submit {
		background: #7c49dd;
		position: absolute;
		right: 13px;
		width: 90px !important;
		height: 35px;
		padding: 0px !important;
		top: 12px;
		color: #fff;
	}

	.entry-content,
	.entry-content-fluid {
		position: relative;
		margin-bottom: 60px;
	}

	.entry-content h3,
	.entry-content-fluid h3 {
		// font-family: "Roboto", sans-serif;
		font-weight: 500;
		margin-bottom: 20px;
	}

	.entry-content h6,
	.entry-content-fluid h6 {
		margin: 40px 0 20px;
	}

	.entry-content .meta-tags,
	.entry-content-fluid .meta-tags {
		border-bottom: 1px solid #e0e4e6;
		margin: 30px 0;
		padding-bottom: 20px;
	}

	.entry-content .meta-tags a,
	.entry-content-fluid .meta-tags a {
		color: #83868c;
		font-size: 12px;
		text-transform: capitalize;
		margin-right: 10px;
		padding-right: 10px;
		position: relative;
	}

	.entry-content .meta-tags a i,
	.entry-content-fluid .meta-tags a i {
		margin-right: 10px;
	}

	.entry-content .meta-tags a:not(:last-child):after,
	.entry-content-fluid .meta-tags a:not(:last-child):after {
		content: "";
		position: absolute;
		top: 50%;
		left: auto;
		right: 0;
		bottom: 0;
		background-color: #83868c;
		border-radius: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		height: 3px;
		width: 3px;
	}
}

@media screen and (min-width: 768px) {
	.entry-content-fluid {
		max-width: 540px;
		width: 100%;
	}
}

.page-content {
	form.search-form {
		position: relative;
		overflow: hidden;
		width: auto;
		max-width: 250px;
	}
	form.search-form input,
	form.search-form label {
		display: block;
		width: 100%;
	}
}

.tag-cloud {
	display: flex;
	flex-wrap: wrap;
}

.tag-cloud a {
	border-radius: 5px;
	color: #6c6c6f;
	text-align: left;
	padding: 0 7px;
	margin-bottom: 5px;
	text-transform: capitalize;
}

.tag-cloud a i {
	transform: rotate(45deg);
	display: inline-block;
}

.pricings {
	.card {
		&-img {
			max-height: 160px;
			margin-bottom: 30px !important;
			overflow: hidden;

			img {
				object-fit: cover;
				object-position: center;
				height: 160px;
			}
		}

		.btn {
			font-size: 14px;
			&:hover{
				color: #fff;
			}
		}

		.table-content {
			margin-bottom: 20px;

			ul {
				padding: 0; 
				margin: 0;

				li {
					list-style: none;
				} 
			}  
		}

		&.highlight {
			transform: scale(1.03) translateY(-10px);
			border-color: #7c49dd;
		}

		&.align-left {
			ul {
				padding: 15px;

				li { 
					text-align: left;
					position: relative;
					line-height: 2.5;

					&:before {
						content: "\f058";
						font-family: 'Font Awesome 5 Free';
						font-size: 17px;
						color: #d4d0d0;
						position: absolute;
						margin-top: 5px;
						transition: 0.3s;
						border: none;
						padding: 0;
						right: 0;
					}
				}
			}
		}
		&.align-right {
			ul {
				padding: 15px;

				li { 
					text-align: right;
					position: relative;
					line-height: 2.5;

					&:before {
						content: "\f058";
						font-family: 'Font Awesome 5 Free';
						font-size: 17px;
						color: #d4d0d0;
						position: absolute;
						margin-top: 5px;
						transition: 0.3s;
						border: none;
						padding: 0;
						left: 0;
					}
				}
			}
		}
	}
}
  
.card-deck {
	@include mq(768) {
		flex-flow: column; 
	}

	.card { 
		padding-bottom: 15px;
		border-color: rgba(0, 0, 0, 0.07); 
		transition: all .5s;
		@include mq(992) { 
			max-width: 400px;
			margin: 30px auto; 
		}
 
		&:hover {
			border-color: rgba(0, 0, 0, 0.07);
			box-shadow: 0 0 30px 5px #00000012;
		}

		ul {
			li { 
				line-height: 2.2;
			}
		}
	} 
} 

// Ribbon Css
.ribbon {
	position: absolute;
	left: -5px;
	top: -5px;
	z-index: 1;
	overflow: hidden;
	width: 115px;
	height: 115px;
	text-align: right;
}

.ribbon span {
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	line-height: 30px;
	transform: rotate(-45deg);
	width: 150px;
	display: block;
	background-color: $primary-clr;
	box-shadow: 0 3px 10px -5px black;
	position: absolute;
	top: 27px;
	left: -33px;
}

.ribbon span::before {
	content: "";
	position: absolute;
	left: 0px;
	top: 100%;
	z-index: -1;
	border-left: 3px solid #000;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #000;
}

.ribbon span::after {
	content: "";
	position: absolute;
	right: 0px;
	top: 100%;
	z-index: -1;
	border-left: 3px solid transparent;
	border-right: 3px solid #000;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #000;
}

.post,
.blog-single-post {
	.ribbon {
		right: 13px;
		top: -4px;
		z-index: 1;
		width: 115px;
		height: 115px;
		left: auto;
		@include mq(768) {
			transform: scale(0.7);
			transform-origin: 0 0;
			right: -21px;
		}
		span {
			font-size: 14px;
			font-weight: bold;
			color: #fff;
			text-transform: uppercase;
			text-align: center;
			line-height: 30px;
			-webkit-transform: rotate(-45deg);
			transform: rotate(45deg);
			width: 150px;
			display: block;
			background-color: #7c49dd;
			-webkit-box-shadow: 0 3px 10px -5px black;
			box-shadow: 0 3px 10px -5px black;
			position: absolute;
			top: 27px;
			right: -35px;
			left: auto;
		}
	}
}

.blog-single-post {
	&:hover {
		box-shadow: none;
		border: 1px solid #e3e6ea99;
	}
}

/**
    *  Footer 2
    */
.footer {
	.foo-btm {
		background-color: #ff9997;
	}

	.copyright {
		color: #fff;

		a {
			color: #262934;
		}

		@include mq(992) {
			text-align: center !important;
			margin-bottom: 15px;
		}
	}

	.socials {
		a {
			color: #fff;
		}
	}
}

.footer-2 {
	padding: 80px 0 70px;

	.foo-social {
		margin: 0;
		margin-bottom: 30px;

		li {
			display: inline-block;

			a {
				// color: #888;
			}
		}
	}

	.copyright {
		margin-bottom: 0;

		a {
			color: $primary-clr;
		}
	}
}

.widget-text,
.textwidget {
	.logo {
		display: block;
		margin-bottom: 20px;
	}

	p {
		// color: #7b8491;
		font-size: 15px;
		line-height: 28px;
		margin-bottom: 17px;
	}

	.phone {
		color: #ff6448;
		font-family: $roboto;
		font-size: 20px;
		line-height: 28px;
	}
}

.widget {
	p {
		// color: #7b8491;
		font-size: 15px;
		line-height: 28px;
	}

	.form {
		width: 100%;

		.form-field {
			position: relative;
			margin-bottom: 15px;

			i {
				color: $primary-clr;
				position: absolute;
				top: 50%;
				right: 20px;
				transform: translateY(-50%);
			}
		}

		input {
			background-color: #fff;
			border: 1px solid $primary-clr;
			border-radius: 3px;
			color: #888;
			font-size: 14px;
			padding: 10px 40px 10px 20px;
			outline: 0;

			width: 100%;
		}

		.btn {
			padding: 15px 25px;

			@include mq(992) {
				padding: 15px;
			}
		}
	}
}

/**
    *  Coming Soon
    */
.coming-sec {
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	position: relative;
	overflow: hidden;
	padding: 12.5% 0;

	&:before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #f7f7f7;
		opacity: 0.9;
	}

	.bill-form {
		display: block;
		margin: 0 auto;
	}

	.bill-form h3 {
		font-size: 24px;
		margin-bottom: 20px;
	}

	.sec-heading {
		text-align: center;

		.paragraph {
			line-height: 28px;
		}
	}

	@media screen and (max-width: 575px) {
		.sec-heading {
			margin-bottom: 40px;
		}
	}

	.sec-heading h2 {
		font-size: 65px;
		line-height: 72px;
		margin-bottom: 20px;
		line-height: 1.3;
	}

	@media (max-width: 767px) {
		.sec-heading {
			max-width: 85% !important;

			.m-auto.text-left {
				margin: 0 !important;
			}
		}

		.sec-heading h2 {
			font-size: 62px;
		}
	}

	@media screen and (max-width: 575px) {
		.sec-heading h2 {
			font-size: 52px;
			line-height: 60px;
		}
	}

	@media screen and (max-width: 479px) {
		.sec-heading h2 {
			font-size: 33px;
			line-height: 40px;
		}
	}

	#clock {
		margin-bottom: 50px;
	}

	#clock span {
		color: #fff;
	}

	#clock p {
		display: inline-block;
		font-size: 14px;
		text-transform: uppercase;
		position: relative;
		margin: 2px;
		overflow: hidden;

		&:before {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			display: block;
			background-color: $primary-clr;
			border-radius: 50%;
			bottom: -40%;
		}
	}

	#clock span {
		background: $secoundery-clr;
		border-radius: 5px;
		display: block;
		font-size: 30px;
		line-height: 65px;
		margin: 5px 5px 0;
		position: relative;
		height: 60px;
		width: 60px;
		z-index: 2;
		color: $primary-clr;
	}

	p {
		color: #7b8491;
		font-size: 15px;
		line-height: 28px;
	}

	.form {
		width: 100%;

		.form-field {
			position: relative;
			margin-bottom: 15px;

			i {
				color: $primary-clr;
				position: absolute;
				top: 50%;
				right: 20px;
				transform: translateY(-50%);
			}
		}

		input {
			background-color: #fff;
			border: 1px solid $primary-clr;
			border-radius: 3px;
			color: #888;
			font-size: 14px;
			padding: 15px 40px 15px 20px;
			outline: 0;

			width: 100%;
		}

		.btn {
			padding: 20px 25px;
		}
	}
}

/**
    *  Page Feaures
    */
.page-feature {
	@include bg-props;
	background-color: #f4f6fb;
	position: relative;

	.inner-page-features,
	.inner-search-features {
		padding: 125px 0 125px;
	}
	.inner-page-features {
		background-color: rgba(255, 255, 255, 0.84);
	}
	&.page-transparent {
		display: block;

		.inner-page-features,
		.inner-search-features {
			padding: 200px 0 125px;

			@include mq(768) {
				padding: 100px 0 25px;
			}
		}
	}

	h2 {
		color: $primary-clr;
		font-size: 48px;
		line-height: 60px;

		@include mq(768) {
			font-size: 30px;
			line-height: 42px;
		}
	}

	.breadcrumb {
		// text-align: center;
		background-color: transparent;
		display: block;
		margin-bottom: 0;
		padding: 0;

		ul {
			margin: 0;
			padding: 0;
		}

		a,
		span {
			color: #7b8491;
			display: inline-block;
			font-size: 15px;
			font-family: $roboto;
			// font-weight: 600;
			// padding: 0 7px;
			position: relative;
		}

		a {
			color: $primary-clr;
			&:hover {
				color: $primary-clr;
			}
		}
	}
}

figure.post-featImg {
	position: relative;

	img {
		max-height: initial;
		border-radius: 5px;
		margin-bottom: 0;
	}
}

/**
    *  About Features
    */
.about {
	.content-box-fluid {
		h2 {
			font-size: 42px;
			line-height: 50px;
			margin-bottom: 23px;

			@include mq(767) {
				font-size: 30px;
			}

			@include mq(479) {
				font-size: 22px;
				line-height: 30px;
			}
		}

		h5 {
			@include mq(479) {
				font-size: 16px;
				line-height: 22px;
			}
		}

		@include min-mq(992) {
			padding-left: 60px;
		}

		@include mq(991) {
			margin: 0 auto;
		}
	}
}

.about-img-group {
	position: relative;

	.about-img-bg {
		position: absolute;
		left: 50%;
		top: 30px;
		max-width: 545px;
		transform: translateX(-50%);
		opacity: 0.7;
		border-radius: 5px;
	}

	.about-img-1 {
		border-radius: 5px;
		margin-top: 80px;

		@include mq(767) {
			margin-bottom: 30px;
		}
	}

	.about-img-2 {
		border-radius: 5px;

		@include mq(479) {
			margin-bottom: 20px;
		}
	}

	h3 {
		font-size: 40px;
		line-height: 50px;
		margin-bottom: 0;
		margin-top: 25px;
		@include mq(991) {
			font-size: 30px;
			line-height: 1.6;
		}
		@include mq(479) {
			font-size: 18px;
			line-height: 1.8;
		}
	}

	@include mq(991) {
		margin-bottom: 50px;
	}
}

/**
    *  Funfact Widget
    */
.funfacts {
	background-color: $primary-clr;
	padding: 105px 0;

	@include mq(991) {
		padding-bottom: 35px;
	}
}

.single-fun {
	position: relative;

	@include mq(991) {
		text-align: center;
	}

	img {
		max-width: 65px !important;
		margin-bottom: 30px;
		filter: invert(1);

		@include mq(991) {
			margin: 0 auto 30px;
			max-width: 50px !important;
		}

		@include mq(575) {
			margin: 0 auto 30px;
		}
	}

	.count-box {
		align-items: center;
		color: #fff;
		display: inline-flex;
		font-size: 22px;
		font-weight: 700;
		line-height: 30px;
		margin-bottom: 0;
		text-transform: uppercase;
		position: relative;

		@include mq(991) {
			display: block;
		}

		span {
			font-size: 70px;
			font-weight: 700;
			margin-right: 15px;

			@include mq(991) {
				display: block;
				margin-top: 20px;
				margin-right: 0;
				font-size: 50px;
			}
		}
		h3.text {
			font-size: 27px;
			line-height: 1.2;
			text-transform: capitalize;
			color: #fff;
			@include mq(991) {
				font-size: 17px;
			}
		}
	}

	@include mq(991) {
		margin-bottom: 60px;
	}

	@include mq(575) {
		text-align: center;
	}

	&.style2 {
		&::before {
			content: "";
			width: 50%;
			height: 100%;
			position: absolute;
			border: 10px solid #fff;
			margin: auto;
			left: 0;
			right: 0;
			opacity: 0.4;
			text-align: center;
			top: 34px;
		}
		img {
			margin: 0 auto;
			// margin-top: 30px;
			opacity: 1; 
			transition: all 0.3s;
			max-width: 80px !important;
		}
		.count-box  { 
			display: block;
			text-align: center; 
			margin-top: 17px; 
			position: relative;
			// overflow: hidden;  
			span {
				margin: 30px 0;
				display: block;
				transition: all 0.3s;
				&.stat-count {
					opacity: 0;
					top: -60px;
					margin: 0 auto;
					position: absolute;
					left: 0;
					right: 0;
				}
				
			}
			h3.text {
				margin-top: 20px;
			}
		}
		&:hover {
			img {
				opacity: 0;
				// margin-top: 15px;
			}
			span.stat-count {
				opacity: 1;
			}
		}

	}
	&.style3{
		position: relative;
		text-align: center;
		img{
			position: absolute;
			opacity: .1;
			top: 0;
			bottom: 0;
			margin: auto;
			right: 0;
			left: 0;
			max-width: 160px !important;
		}
		.count-box{
			flex-direction: column;
			span, h3{
				display: block;
				text-align: center;
			} 
			span{
				display: block;
				line-height: 1;
			}
			h3{  
				padding-top: 20px;
				margin-top: 15px;
				position: relative;
				margin-right: 0;
				&:before{
					content: '';
					width: 80px;
					background-color: #fff;
					height: 2px; 
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					margin: 0 auto;
				}
			}
		}
	}
}  

/**
    *  Partner Logo
    */
.partners-logo {
	img {
		max-width: 186px !important;
		width: 100%;
		margin: 0 auto;
	}
}

.preview-btn {
	background-color: #fff;
	border-radius: 50%;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 90px;
	width: 90px;
	z-index: 2;

	i {
		color: $primary-clr;
		font-size: 20px;
		line-height: 90px;
		transition: all 0.5s;
	}

	&:hover {
		background-color: $primary-clr;
		color: #fff;

		i {
			color: #fff;
		}
	}
}

/**
    *  Banner Slide
    */
.banner {
	// background-color: #f7f7f7;
	padding: 13% 0 10%;
	// overflow: hidden;

	@include mq(992) {
		padding-top: 140px;
	}

	.content-box {
		.tagline {
			// font-family: $roboto;
			font-size: 18px;
			font-weight: 500;
			text-transform: capitalize;
		}

		h2 {
			font-size: 60px;
			line-height: 70px;
			margin-bottom: 30px;

			@include mq(991) {
				font-size: 38px;
				line-height: 50px;
			}

			@include mq(479) {
				font-size: 30px;
				line-height: 40px;
			}
		}

		p {
			margin-bottom: 10px;
		}
	}

	.ban-img {
		@include mq(767) {
			margin-bottom: 40px;
		}
	}

	&.v2 {
		padding: 0;

		.hero-slide {
			position: relative;

			.item {
				position: relative;

				img {
					pointer-events: none;
					position: absolute;
					object-fit: cover;
					height: 100%;
					@include mq(992) {
						display: block;
						width: auto;
						max-width: 100%;
						object-fit: cover;
						min-height: 650px;
					}
				}
			}

			.active {
				.content-box {
					&.v1 {
						padding: 50px;

						.tagline,
						h2,
						p,
						a {
							opacity: 1;
							top: 0;
						}
					}
				}
			}
			.owl-dots {
				display: block;
				position: absolute;
				bottom: 15px;
				right: 0;
				left: 0;
				margin: 0 auto;
				max-width: 200px;
				text-align: center;

				button {
					width: 20px;
					height: 30px;
					background: $primary-clr;
					opacity: 0.5;
					margin-right: 5px;
					outline: none;
					transition: all 0.5s;
					&.active {
						opacity: 1;
						height: 35px;
					}
				}
			}
		}

		.slide-box {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			transition: all ease-in-out 1s;
			margin: auto;
			left: 0;
			right: 0;
			@include min-mq(992) {
				min-width: 650px;
			}

			p {
				margin-bottom: 15px;
			}
			a {
				margin-top: 0;
				margin-left: 5px;
				margin-right: 5px;

				@include mq(992) {
					margin-top: 20px;
					line-height: 1.7;
				}
			}
			&.s1,
			&.s2 {
				position: relative;
				transform: inherit;
				padding: 150px 0 120px;
			}
			&.s2 {
				padding: 200px 0 120px;
				.content-box {
					padding: 50px;
				}
				.boxShpe {
					opacity: 0.3;
					position: absolute;
					width: 50%;
					height: 100%;
					left: 0;
					right: 0;
					margin: auto;
					top: 0;
					// border-radius: 50%;
					border: 15px solid $primary-clr;

					&.shape1,
					&.shape2 {
						opacity: 0.3;
						position: absolute; 
						width: 100px;
						height: 200px;
						border: 15px solid $primary-clr;
						top: -30px;
						left: -30px;
					}
					&.shape2 {
						top: auto;
						left: auto;
						bottom: -30px;
						right: -30px;
					}
				} 
			}
		}

		.homeowlControl,
		.owl-nav {
			float: left;
			bottom: 0;
			top: auto;
			left: auto;

			button {
				margin: 0;
				width: 65px;
				height: 65px;
				border-radius: 50%;
				position: absolute;
				background: $secoundery-clr;
				display: inline-block;
				color: #fff;
				padding: 6px;
				text-align: center;
				margin: auto;
				outline: none;
				font-size: 20px;
				top: 0;
				bottom: 0;
				right: 50px;
				left: 50px;
				border: 1px solid #ddd;
				transition: all 0.5s;

				@include mq(992) {
					right: 0;
					left: 0;
				}

				&.owl-prev {
					right: auto;
				}

				&.owl-next {
					left: auto;
				}

				&:hover {
					background-color: $primary-clr;
					transform: scale(1.3);
					color: #fff;

					span {
						color: #fff;
					}
				}

				span {
					color: $primary-clr;
					font-size: 35px;
					margin: 3px;
					line-height: 1;
					position: relative;
					top: -3px;
				}
			}
		}

		.content-box {
			position: relative;

			@include mq(767) {
				padding: 0 50px;
			}

			&.v1 {
				padding: 50px;

				.tagline,
				h2,
				p,
				a {
					position: relative;
					opacity: 0;
					top: 20px;
					transition: all 0.5s;
					transition-delay: 0.1s;
				}
				h2 {
					transition-delay: 0.3s;
				}
				p {
					transition-delay: 0.5s;
				}
				a {
					transition-delay: 0.7s;
				}
			}
		}

		.ban-img {
			position: relative;
			text-align: right;
			width: 100%;
			height: 100%;

			img {
				max-width: 85%;
				position: relative;
				display: inline-block;
				z-index: 99;
			}

			&:before,
			&:after {
				content: "";
				width: 35%;
				height: 100%;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				border: 10px solid #ff7214;
				z-index: 1;
				border-radius: 50%;
				right: 0;
				bottom: 0;
				margin: auto;
				transform: rotate(-45deg);
			}

			&:after {
				border: 10px solid #ffe2cf;
				transform: rotate(45deg);
			}
		}
	}
}

/**
    *  Animation 
    */
img.ael {
	width: auto;
	height: auto;
	max-width: auto;
	position: absolute;
}

img.ael:nth-child(1) {
	left: 30%;
	top: 20%;
}

img.ael:nth-child(2) {
	left: 80%;
	top: 70%;
}

img.ael:nth-child(3) {
	left: 50%;
	top: 50%;
}

img.ael:nth-child(4) {
	left: 10%;
	top: 10%;
}

img.ael:nth-child(5) {
	left: 30%;
	top: 90%;
}

img.ael:nth-child(6) {
	left: 70%;
	top: 60%;
}

img.ael:nth-child(7) {
	left: 56%;
	top: 20%;
}

img.ael:nth-child(1) {
	left: 36%;
	top: 87%;
}

.works {
	.pb-50 {
		padding-bottom: 80px;

		@include mq(991) {
			padding-bottom: 60px;
		}

		@include mq(767) {
			padding-bottom: 40px;
		}
	}

	.content-box-fluid {
		&.right {
			@include mq(767) {
				margin-bottom: 40px;
			}
		}
	}
}

/**
    *  Fortfoli Filter
    */
.portfolioITems {
	.filters {
		text-align: center;
		margin-bottom: 30px;

		button {
			border: none;
			color: $primary-clr;
			background: $secoundery-clr;
			padding: 10px 20px;
			outline: none;
			margin-bottom: 1px;
			border-radius: 3px;
			margin: 5px;
			position: relative;

			&:before {
				content: "";
				width: 20px;
				height: 50px;
				display: block;
				background-color: $primary-clr;
				border-radius: 50%;
				position: absolute;
				right: 0;
				bottom: -20px;
				z-index: -1;
				opacity: 0;
				transition: all 0.5s;
			}

			&.active,
			&:hover {
				color: #fff;
				background: $primary-clr;

				&:before {
					opacity: 0;
					bottom: 0;
				}
			}
		}

		@media (max-width: 992px) {
			.portfolio .filter-menu {
				display: none;
			}
		}

		.themeies-wrapper {
			max-width: 300px;
			border: 1px solid #ddd;
			position: relative;
			height: 40px;
			margin: 0 auto;
			margin-bottom: 20px;
		}

		.themeies-wrapper i {
			position: absolute;
			right: 10px;
			top: 13px;
			pointer-events: none;
		}

		.themeies-wrapper .bttn {
			width: 100%;
			height: 40px;
		}

		.placeholder {
			position: relative;
			width: 100%;
			height: 100%;
			display: block;
			text-align: center;
			padding: 7px 10px;
			cursor: pointer;
		}
	}

	.portGrid {
		.protItem {
			margin-bottom: 30px;

			img {
				border-radius: 5px;
			}

			.demoBox {
				position: absolute;
				width: calc(100% - 30px);
				height: 0;
				bottom: 0;
				background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(0%, rgba(160, 0, 73, 0)), color-stop(0%, white));
				background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(160, 0, 73, 0) 30%, white 69%);
				right: 15px;
				opacity: 0;
				-webkit-transition: all ease-out 0.3s;
				transition: all 0.3s;
				border: 1px solid #f3f1f1;
				border-top: none;
				height: 70%;

				h3.pTitle {
					position: absolute;
					font-size: 24px;
					bottom: 35px;
					left: 0;
					right: 0;
					text-align: center;
				}
				p.pCat {
					position: absolute;
					font-size: 16px;
					bottom: -15px;
					left: 0;
					right: 0;
					text-align: center;
					text-transform: capitalize;
				}

				a {
					display: block;
					width: 70px;
					height: 70px;
					border-radius: 50%;
					color: $primary-clr;
					background: $secoundery-clr;
					margin: 2px;
					padding: 24px 20px;
					text-align: center;
					position: absolute;
					right: 0;
					top: 30px;
					left: 0;
					margin: auto;

					&.elem {
						top: 42px;
						padding: 10px;
					}

					&:hover {
						color: #fff;
						background: $primary-clr;
					}

					i {
						font-size: 26px;
					}
				}
			}

			&:hover .demoBox {
				opacity: 1;
				height: 100%;
				background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(160, 0, 73, 0)), color-stop(69%, white));
				background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(160, 0, 73, 0) 30%, white 70%);
				transition: all 0.3s;
			}
		}
	}

	&.v2 {
		.portGrid {
			.protItem {
				.demoBox {
					// opacity: 1;
					transition: all 0.3s;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background: #fff;
					border-top: 1px solid #f3f1f1;
					a,
					h3,
					p {
						position: relative;
						margin: 0;
						top: 20px;
						transition: all 0.5s;
						opacity: 0;
					}
					a {
						width: 40px;
						height: 40px;
						border-radius: 50%;
						margin: 2px;
						padding: 11px 3px;
						margin-bottom: 40px;
						position: relative;

						i {
							font-size: 18px;
						}
						&:before {
							content: "";
							width: 1px;
							height: 30px;
							display: block;
							background: #7c49dd;
							margin: 0 auto;
							position: absolute;
							bottom: -93%;
							right: 0;
							left: 0;
						}
					}
					p {
						text-transform: capitalize;
						transition-delay: 0.3s;
					}
					.pTitle {
						bottom: inherit;
						transition-delay: 0.2s;
					}
					&:hover {
						a,
						h3,
						p {
							opacity: 1;
							top: 0;
						}
					}
				}
			}
		}
	}
}

// Portfolio v3:
.xop-section {
	// font-family: "Maven Pro", sans-serif;
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.3;
	margin: 0 0 4em;
}
.project {
	display: block;
	width: 100%;
	text-decoration: none;
	margin: 1em 0;
	cursor: pointer;
	border-radius: 5px;
	overflow: hidden;
}
figure {
	margin: 0;
	padding: 0;
}
.project figure img {
	width: 100%;
	display: block;
	object-fit: cover;
	height: 300px;
}
.project figcaption {
	padding: 1em;
	background: #7c49dd;
	color: #fff;
}
.project h3 {
	margin: 0;
	font-size: 24px;
	color: #fff;
	margin-bottom: 10px;
}
p.pCat.cta {
	font-size: 16px;
	line-height: 1;
	text-transform: capitalize;
}
.cta:after {
	content: "\f061";
	font-family: "Font Awesome 5 Free";
	display: inline-flex;
	margin: 0 0 0.5em 0.5em;
}

/*
    
    When the browser is 960px or larger.
    
    */

@media screen and (min-width: 960px) {
	.xop-wrapper {
		max-width: 960px;
		margin: 0 auto;
	}
	.xop-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		-ms-grid-columns: repeat(3, 1fr);
		grid-gap: 1em;
	}
	.project:nth-child(1) {
		grid-column: 1 / span 3;
	}
	.project {
		width: 100%;
		height: 300px;
		text-decoration: none;
		margin: 0;
	}
	.project:first-child {
		height: 400px;
		img {
			height: 400px;
		}
	}
	.project figure {
		position: relative;
		overflow: hidden;
	}
	.project figure img {
		position: relative;
		z-index: 999;
		transition: transform 0.4s;
	}
	.project figure:hover img {
		transform: translateY(-90px);
	}

	.project figcaption {
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 20px;
		height: 90px;
		width: 100%;
	}
}

.comporision-slider {
	position: relative;

	.imageDiff {
		display: block;
		border-radius: 5px;

		&.active {
			&:hover .twentytwenty-before-label,
			&:hover .twentytwenty-after-label {
				opacity: 1 !important;
			}
		}
	}

	.overlay {
		position: absolute;
		width: 100%;
		height: auto;
		top: 0;
		left: 0;
		opacity: 0;
		pointer-events: none;
	}

	&:hover {
		.overlay {
			opacity: 1;
		}
	}
}

span.cat-links {
	margin-right: 7px;
}

/**
    *  Preloader
    */
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	z-index: 99999999;
	width: 100%;
	height: auto;
}

#status {
	width: 120px;
	height: 120px;
	position: absolute;
	left: 50%;
	top: 50%;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	padding: 25px;

	&:before {
		content: "";
		position: absolute;
		pointer-events: none;
		width: 100% !important;
		height: 100% !important;
		left: 0;
		top: 0;
		opacity: 1;
		bottom: 0;
		right: 0;
		margin: auto;
		border-bottom: 2px solid $secoundery-clr;
		border-radius: 50%;
		-webkit-animation: rotatingPlus 4s linear infinite;
		-moz-animation: rotatingPlus 4s linear infinite;
		-ms-animation: rotatingPlus 4s linear infinite;
		-o-animation: rotatingPlus 4s linear infinite;
		animation: rotatingPlus 4s linear infinite;
	}

	&:after {
		content: "";
		position: absolute;
		pointer-events: none;
		width: 90%;
		height: 90%;
		left: 0;
		top: 0;
		opacity: 1;
		bottom: 0;
		right: 0;
		margin: auto;
		border-top: 2px solid $primary-clr;
		border-radius: 50%;
		-webkit-animation: rotatingMinus 6s linear infinite;
		-moz-animation: rotatingMinus 6s linear infinite;
		-ms-animation: rotatingMinus 6s linear infinite;
		-o-animation: rotatingMinus 6s linear infinite;
		animation: rotatingMinus 6s linear infinite;
	}

	img {
		max-width: 100%;
		height: auto;
	}
/* 
	@-webkit-keyframes rotating {
		from {
			-webkit-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		to {
			-webkit-transform: rotate(360deg);
			-o-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@keyframes rotating {
		from {
			-ms-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		to {
			-ms-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-o-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
 */
	/*
            NAGATIVE ROTAE
        */
	@keyframes rotating {
		from {
			-ms-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		to {
			-ms-transform: rotate(-360deg);
			-moz-transform: rotate(-360deg);
			-webkit-transform: rotate(-360deg);
			-o-transform: rotate(-360deg);
			transform: rotate(-360deg);
		}
	}
}

.rotating1{
		animation: rotatingPlus 10s linear infinite;
}
.rotating2{
	animation: rotatingMinus 10s linear infinite;

}

@keyframes rotatingPlus {
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/*
		NAGATIVE ROTAE
	*/
@keyframes rotatingMinus { 
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-ms-transform: rotate(-360deg);
		-moz-transform: rotate(-360deg);
		-webkit-transform: rotate(-360deg);
		-o-transform: rotate(-360deg);
		transform: rotate(-360deg);
	} 
}

/**
    *  Scroll Top 
    */
.scroll-top-area {
	width: 50px;
	height: 50px;
	position: fixed;
	right: 15px;
	bottom: 15px;
	z-index: 9;

	a { 
		width: 100%;
		height: 100%;
		border-radius: 50%;
		position: absolute;
		// bottom: -15px;
		left: 0;
		right: 0;
		margin: 0 auto;
		text-align: center;
		background: $secoundery-clr;
		transition: all 0.5s;
		// opacity: 0;

		&.show {
			opacity: 1; 
		}

		i {
			color: $primary-clr;
			font-size: 20px;
			position: absolute;
			transform: translate(-50%, -50%);
			top: 50%;
			left: 50%;
		}
	}
 
	&:hover a {
		background: $primary-clr;
		bottom: 0;

		i {
			color: #fff;
		}
	}
}

/**
    *  Font Awosaome
    */
.fa {
	// font-family: "FontAwesome" !important;
	font-weight: 900;
}

/**
    *  Error Widget
    */
.errr-page {
	padding: 100 0 80px;
}

.error-content {
	img {
		max-width: 100% !important;
		margin: 0 auto 40px;
		width: 500px;
	}

	.btn {
		margin-top: 30px;
		padding: 15px 25px;
	}

	h1.page-title {
		font-size: 400px;
		position: absolute;
		color: #1e25280a;
		line-height: 1;
		top: 40%;
		margin: 0;
		text-align: center;
		z-index: 0;
		pointer-events: none;
	}
}

// Extra Elementor css fix
.elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated {
	padding: 15px !important;
}

// Video Box

.video-box {
	position: relative; 
}

.video-box:after {
	content: "";
	position: absolute;
	top: 0; 
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(22, 43, 69, 0.7);
}

.video-box .video-in {
	position: absolute;
	text-align: center;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 100%;
	z-index: 1;
} 

.video-box .video-in span {
	color: #fff;
}

.video-btn { 
	color: #fff;
	display: block;
	font-size: 18px;
	text-align: center;
	margin: 0 auto 15px;
	position: relative;
	line-height: 65px;
	height: 60px;
	width: 60px;
	outline: none;
}

.video-btn {
	i::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		-webkit-animation: beat infinite 1.2s;
		animation: beat infinite 1.2s;
		height: 100%;
		width: 100%;
		background-color: $primary-clr;
		border-radius: 50%;
		z-index: -1;
	}
}

.video-btn:hover {
	color: #233646;
}

@-webkit-keyframes beat {
	0% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(1.5);
		transform: scale(1.5);
	}
}

@keyframes beat {
	0% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(1.5);
		transform: scale(1.5);
	}
}

/*****************************
    Tabs
    *****************************/
.nav-tabs {
	border: none;
	margin: 0;
	padding: 0;

	.nav-item {
		margin-bottom: 3px;
		margin-right: 3px;

		&:last-child {
			margin-right: 0;
		}

		.nav-link {
			border: none;
			font-size: 16px;
			padding: 12px 30px;
			border-radius: 0;
			font-weight: 600;
			background: $secoundery-clr;
			color: $primary-clr;
			border-radius: 5px;

			span {
				// transform: skew(20deg);
				display: block;
			}
		}

		.nav-link.active {
			background: $primary-clr;
			color: #fff;
		}
	}
}

/* table */

.table {
	border-collapse: separate;
	border-spacing: 0 1px;
	font-size: 16px;
	font-weight: 600;

	tr,
	thead {
		background-color: #f6f7fb;
	}

	td {
		padding: 14px 20px;

		img {
			max-width: 30px;
		}
	}

	th {
		padding: 14px 20px;
	}
}

.table-bordered {
	td {
		border-color: $primary-clr;
	}

	th {
		border-color: $primary-clr;
	}
}

.table-striped {
	tbody {
		tr {
			&:nth-of-type(odd) {
				background: #f3f3f3;
			}

			&:nth-of-type(even) {
				background: #fff;
			}
		}
	}
}

.table td,
.table th {
	vertical-align: middle;
}

// BMI Calculaotr

.bmi-form {
	background-color: #fff;
	width: 400px;
	max-width: 100%;
	margin: 20px auto 20px auto;
	display: block;
	padding: 25px;

	.form-field {
		margin-bottom: 20px;
	}

	.form-control:focus {
		border-color: $primary-clr;
	}

	.text-input {
		width: 60px;
		height: auto;
		border: 1px solid rgba(242, 56, 73, 0.5);
		outline: none;
		padding: 10px 10px;
		cursor: pointer;
		width: 100%;
	}

	.text-input:hover {
		background-color: #cbe7fd;
	}

	#submit {
		margin: 0 auto;
		text-align: center;
		float: none;
		display: block;
	}

	.text {
		display: inline-block;
		margin: 0 0 10px;
		font-weight: bold;
	}

	.row-one {
		padding: 30px 20px 15px 20px;
	}

	.row-two {
		padding: 15px 20px 30px 20px;
	}

	.custom-label {
		display: inline-block;
		position: relative;
		padding-left: 30px;
		cursor: pointer;
		user-select: none;
		margin-bottom: 0;
	}

	.custom-label input {
		position: absolute;
		opacity: 0;
	}

	.checkmark {
		position: absolute;
		top: 0;
		left: 0;
		height: 25px;
		width: 25px;
		background-color: $primary-clr;
		border-radius: 50%;
	}

	.custom-label:hover input ~ .checkmark {
		background-color: #cbe7fd;
	}

	.custom-label input:checked ~ .checkmark {
		background-color: $primary-clr;
	}

	.checkmark:after {
		content: "";
		position: absolute;
		display: none;
	}

	.custom-label input:checked ~ .checkmark:after {
		display: block;
	}

	.custom-label .checkmark:after {
		left: 11px;
		top: 6px;
		width: 5px;
		height: 10px;
		border: solid white;
		border-width: 0 2px 2px 0;
		transform: rotate(45deg);
	}

	#message{
		margin-top: 25px;
		background: #ffd8d7;
		padding: 10px 16px;
		border-left: 5px solid #f23849;
		h1{
			font-size: 20px ;
			margin-bottom: 5px;
			margin: 0;
		}
		h2{
			font-size: 15px;
			margin: 0;
		}
	}
}

/* 
    Custom Select
    */

.s-hidden {
	visibility: hidden;
	padding-right: 10px;
}

.select {
	cursor: pointer;
	position: relative;
	color: black;
	background-color: #fff;
	font-size: 14px;
	height: 53px;
	border-radius: 30px;
	@include mq(550){
		margin-bottom: 30px;
	} 
	&:hover {
		border-color: $primary-clr;
	}
}

.customdSelect {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 18px 30px;
	color: #3c3c3c;
	box-shadow: 0 5px 8px #f0f0f059;
	font-weight: 400;
	// font-family: "Roboto", sans-serif;
	font-size: 16px;
}

.customdSelect:after {
	content: "";
	width: 0;
	height: 0;
	border: 7px solid transparent;
	border-color: #3c3c3c transparent transparent transparent;
	position: absolute;
	top: 23px;
	right: 25px;
} 

.options {
	display: none;
	position: absolute;
	// font-family: "Roboto";
	border-radius: 30px;
	top: 100%;
	right: 0;
	left: 0;  
	z-index: 999;
	margin: 0 0;
	padding: 0 0;
	list-style: none;
	border: 1px solid #ddd;
	background-color: white;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
}


.options li {
	padding: 0 6px;
	margin: 0 0;
	padding: 15px 30px;
}

.options li:hover { 
	color: white;
}

// Unity Test
.sidebar {
	.widget-text p, .textwidget p { 
		color: #3c3c3c;
	}
	.widget {
		.rsswidget {
			display: inline-block;
			overflow: inherit;
			color: #192225;

			img {
				max-width: 26px;
				position: relative;
				top: 2px;
				width: 17px;
			}
		}

		&.widget_rss {
			ul {
				li {
					a,
					span,
					.rssSummary,
					cite {
						display: block;
						width: 100%;
					}

					a.rsswidget {
						display: block;
						font-size: 18px;
						font-weight: 500;
						// font-family: $rufina;
					}

					cite {
						font-weight: 500;
					}
				}
			}

			li {
				display: block;
				padding-top: 5px;
				padding-bottom: 20px;
			}
		}

		.customdSelect {
			color: #3c3c3c;
			border: 1px solid #dad7d7;
			border-radius: 3px;
		}

		// Sub Item
		ul.menu {
			li {
				float: left;
				width: 100%;
			}

			ul.sub-menu {
				margin: 0;
				display: block;
				border-top: 1px solid #ddd;
				padding-left: 20px;
			}
		}
		.menu-menu-1-container,
		.menu-footer-menu-container {
			display: block;
			overflow: hidden;

			li {
				display: block;

				a {
					padding: 0;
					padding-top: 10px;
				}
			}
		}
	}
}

.wp-block-button__link {
	@extend .btn, .btn-filled;
}

.wp-block-latest-posts.wp-block-latest-posts__list {
	list-style: disc;
	margin-left: 15px;
}
 
ul.wp-block-archives.wp-block-archives-list {
	margin-left: 15px;
}

.entry-content ul {
	margin-left: 18px;
	margin-bottom: 25px;
	li {
		strong {
			display: inline-block;
			margin-bottom: 0;
		}
	}
}

a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
	color: $rufina;
}

.wp-block-column p {
	margin-bottom: 0;
}

.wp-block-pullquote p {
	font-size: 28px;
	line-height: 1.6;
	margin-bottom: 3px;
}

.wp-block-pullquote cite {
	color: #192225;
}

ul.blocks-gallery-grid {
	margin-left: 0;
}

ul.wp-block-gallery {
	margin-left: 0;
}

.wp-block-image .alignright {
	margin-left: 15px;
}

.wp-block-latest-posts li {
	margin-bottom: 0 !important;
}

.wp-block-quote.is-large p,
.wp-block-quote {
	font-size: 24px;
	font-style: italic;
	line-height: 1.6;
	margin-bottom: 5px;
}

pre {
	border-radius: 5px;
}

a.wp-block-button__link {
	line-height: 1.8;
	margin-bottom: 15px;

	&:hover {
		background: $secoundery-clr;
		color: $primary-clr !important;
	}
}

.sidebar {
	.widget {
		ul {
			li {
				display: block;

				a {
					vertical-align: middle;
				}
			}

			.children {
				padding-left: 15px;
				border-top: 1px solid #e0e4e6;
			}
		}
	}
}

.comment-list {
	list-style: none;

	.children {
		list-style: none;
	}

	.comment-body {
		margin-bottom: 1rem;
	}
}

.comment-content {
	p {
		margin-bottom: 0;
	}
}

.comment-author {
	&.vcard {
		img {
			max-width: 60px;
			display: inline-block;
			float: left;
			margin-right: 20px;
		}
	}
}

.page-links {
	@include flexbox($a: "center", $jc: "start");

	span {
		margin-right: 5px;

		.page-link {
			background-color: #7c49dd;
			border: none;
			color: #fff;
		}
	}

	a {
		.page-link {
			border: none;
			background-color: #ffd8d7;
			color: #7c49dd;

			&:hover {
				background-color: #7c49dd;
				color: #fff;
			}
		}
	}
}

// Share tags
.post-footer {
	.share_tags {
		margin-top: 20px;
	}
}

.has-large-font-size {
	line-height: 1.3;
}

.wp-block-group.has-background {
	padding: 25px 25px 10px;
}

#more-1781 {
	display: block;
	margin-bottom: 30px;
}

.entry-content {
	p {
		img {
			width: auto;
		}

		input {
			padding: 8px 20px;
		}

		input[type="submit"] {
			padding: 12px 15px;
			border-radius: 4px;
		}
	}
}

.page-feature,
.post {
	h2 {
		word-wrap: break-word;
	}
}

.post .wp-block-button__link {
	min-width: 220px;
	padding: 10px;
}

:root .has-pale-pink-background-color {
	background-color: $primary-clr;
}

.wp-block-cover-text {
	color: #fff !important;
}

.wp-block-column ol {
	margin-left: 15px;
}

.post .wp-block-image img {
	max-height: inherit;
}

.post.blog-single-post img {
	max-height: inherit;
	width: auto;
	max-width: 100%;
}

/*=================================================
        28. comment from
    ==============================================================*/

.comment-respond .comment-reply-title {
	margin-bottom: 20px;

	small {
		float: right;
		background: #ddd;
		position: relative;
	}
}

.comment-respond .form-control {
	margin-bottom: 40px;
}

.comment-respond .form-submit {
	margin-bottom: 0px;
}

.comment-respond .comments-info {
	font-size: 1rem;
	margin-bottom: 35px;
}

.comment-respond {
	border: 1px solid #f1f1f1;
	padding: 30px;
	// margin-right: 5px;
	margin-bottom: 20px;
}

.comment-respond .respond-header {
	margin-bottom: 35px;
}

.comment-respond .respond-header .comment-reply-title {
	font-size: 1.8666666667rem;
	font-weight: 700;
	color: #0c5adb;
	margin-bottom: 0px;
}

.comment-respond .respond-header > .border-divider + .comments-info {
	margin-top: 25px;
}

.comment-respond .respond-header .comments-info {
	margin-bottom: 0px;
	color: #8c8c8c;
}

.comment-respond .xs-form .form-control {
	border-color: #f5f5f5;
}

.comment-respond .xs-form .form-control:focus {
	border-color: #0c5adb;
} 

.comment-respond .responsed-title {
	font-size: 1.6rem;
	// font-family: "Nunito";
	color: #000000;
	font-weight: 600;
	margin-bottom: 15px;
}

/*=================================================
        29. comment respond area
    ==============================================================*/
 
.comments-area {
	margin-bottom: 60px;
	padding-bottom: 100px;
	border-bottom: 1px solid #e7e7e7;
	margin-right: 5px;
}

.comments-area .comments-title {
	margin-bottom: 45px;
	font-size: 1.4666666667rem;
	font-weight: 600;
	position: relative;
	padding-bottom: 15px;
}

.comments-area .comments-title:before {
	content: "";
	position: absolute;
	display: inline-block;
	bottom: 0px;
	width: 100px;
	height: 3px;
	left: 0;
	z-index: 1;
	background: #7c49dd;
}

.comments-area .comment-body:before {
	display: table;
	content: "";
	clear: both;
}

.comments-area .comment-body img {
	width: 80px;
	height: 80px;
	border-radius: 100%;
	float: left;
}

.comments-area .meta-data {
	margin-left: 100px;
}

.comments-area .reply {
	float: right;
}

.comments-area .reply .comment-reply-link {
	color: #292225;
	font-size: 1rem;
}

.comments-area .reply .comment-reply-link:hover {
	color: #0c5adb;
}

.comments-area .comment-author a {
	font-weight: 600;
	color: #181818;
}

.comments-area .comment-author a:hover {
	color: #0c5adb;
}

.comments-area .comment-author a::after {
	padding: 0 5px;
	color: #7a7a7a;
}

.comments-area .comment-author > p {
	display: inline-block;
}

.comments-area .comment-date {
	color: #7a7a7a;
	margin-bottom: 0px;
	font-weight: 600;
}

.comments-area .comment-content {
	margin-top: 10px;
	padding-right: 50px;
}

.comments-area .comment-content p,
.comments-area .comment-content ul,
.comments-area .comment-content ol {
	margin-bottom: 15px;
}

.comments-area .comment-content h1,
.comments-area .comment-content h2,
.comments-area .comment-content h3,
.comments-area .comment-content h4,
.comments-area .comment-content h5,
.comments-area .comment-content h6 {
	margin-top: 20px;
	margin-bottom: 10px;
}

.comments-area .pingback:not(:last-child) .children,
.comments-area .comment:not(:last-child) .children {
	margin-left: 70px;
}

.comments-area .pingback:not(:last-child) .meta-data,
.comments-area .comment:not(:last-child) .meta-data {
	margin-bottom: 50px;
}

.comments-area {
	padding-top: 30px;
	border-top: 1px solid #f1f1f1;
	background-color: #ffffff;
	@media screen and (max-width: 768px) {
		padding: 20px;
		margin-bottom: 0;
		.comment-respond {
			padding: 20px;
		}
	}
	span.edit-link {
		float: right;
	}
}

.comments-area .pingback:not(:last-child) .comment-body,
.comments-area .comment:not(:last-child) .comment-body {
	padding-bottom: 35px;
	margin-bottom: 35px;
	border-bottom: 1px solid #f5f5f5;
}

.comments-area .pingback:not(:last-child) .meta-data,
.comments-area .comment:not(:last-child) .meta-data {
	margin-bottom: 0px;
}

.comments-area .pingback:not(:last-child) .children,
.comments-area .comment:not(:last-child) .children {
	margin-left: 0px;

	@media screen and (max-width: 768px) {
		padding-left: 10px;
	}
}

.comments-area .comment-header {
	margin-bottom: 30px;
}

.comments-area .comments-title {
	margin-bottom: 0px;
	font-size: 1.8666666667rem;
	color: #192225;
	font-weight: 700;
}

.comments-area .meta-data {
	margin-left: 70px;
}

.comments-area .comment-author > a {
	color: #606060;
	font-weight: 700;
	margin-right: 40px;
}

.comments-area .comment-author > a::after {
	display: none;
}

.comments-area .comment-author > p {
	color: #606060;
	font-weight: 600;
	font-size: 14px;
}

.comments-area .comment-author p.author {
	color: #192225;
	font-weight: 700;
	margin-right: 40px;
	margin-bottom: 0;
	text-transform: capitalize;
}

.comments-area .comment-author > p:not(:last-child) {
	margin-right: 30px;
}

.comments-area .comment-body img {
	width: 50px;
	height: 50px;
	-webkit-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.12);
	box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.12);
}

.comment-list .comment-body {
	position: relative;
}

.comments-area .reply {
	line-height: 1;
}

.comments-area .reply .comment-reply-link {
	font-size: 15px;
	color: #7c49dd;
	position: absolute;
	top: 15px;
	right: 0;
}

.comments-area .reply .comment-reply-link:hover {
	color: #00138e;
}

.comment-respond .form-control {
	margin-bottom: 30px;
}

.comment-content table td,
.comment-content table th,
.entry-content table td,
.entry-content table th,
.post-body table td,
.post-body table th {
	border: 1px solid #ededed;
	padding: 8px;
}

.comment-content table,
.entry-content table,
.post-body table {
	margin-bottom: 30px;
	width: 100%;
}

.entry-content h1,
.post-body h1,
.comment-content h1 {
	color: #181818;
}

.pingback .comment-content {
	display: none;
}

.entry-content p {
	display: block;
}

.entry-content .page-links {
	margin-bottom: 15px;
}

.comments-list .comment .comment-respond {
	margin-top: 30px;
	margin-bottom: 30px;
	position: relative;
}

#cancel-comment-reply-link {
	position: absolute;
	top: 0px;
	right: 10px;
	color: #fff;
	width: 20px;
	height: 30px;
	overflow: hidden;
	font-size: 1px;

	&:before,
	&:after {
		content: "";
		width: 20px;
		height: 2px;
		background: #192225;
		display: block;
		position: absolute;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 14px;
	}

	&:after {
		transform: rotate(-45deg);
	}
}

form#commentform {
	margin: 0 -10px;

	p {
		padding: 0 10px;
	}

	p.comment-form-author,
	p.comment-form-email {
		width: 50%;
		float: left;
	}
}

.boxShape {
	position: relative;
	.borderShape {
		opacity: 0.3;
		border: 15px solid $primary-clr;
		width: 50%;
		height: 100%;
		position: absolute;
		top: -10px;
		left: 0;
		display: block;
		margin-top: 50px;
	}
}

/**
    Intagram
*/
.instagram_gallery {
	display: flex; 
	a {
		overflow: hidden;
		position: relative;
		&::before {
			content: "\e73d";
			color: #fff;
			font-family: "themify";
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 40px;
			z-index: 9;
			opacity: 0;
		}
		&::after {
			content: "";
			background-color: $primary-clr;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 40px;
			opacity: 0;
		}
		&:hover {
			&::before {
				opacity: 1;
			}
			&::after {
				opacity: 0.8;
			} 
		}

	} 
	.ImgShadow{
		width: 25%;
		margin: 0%;
		position: relative;
		display: inline-block;
		height: 100%;
		a{ 
			width: 100% !important; 
			height: 100%;
    display: block;	
		}
	}
	img.insta-image {
		height: 300px;
		object-fit: cover;
	}
}

/*
*  
** CURSOR
*
*/
.circle-cursor {
	pointer-events: none; 
	background: #7c49dd4f;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	position: fixed;
	color: #fff;
	font-size: 20px;
	text-align: center;
	transition: linear 0.2s;
	z-index: 9999999;
	top: 0;
	text-transform: uppercase;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
}
.cursorActive {
	-webkit-animation: leaves 1s ease-in-out infinite alternate;
	animation: leaves 1s ease-in-out infinite alternate;
}
@-webkit-keyframes leaves {
	0% {
		-webkit-transform: scale(1);
	}
	100% {
		-webkit-transform: scale(1.5);
	}
}

@keyframes leaves {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(2);
	}
}

.background_animation{
	position: absolute;
	width: 100%; 
	height: 100%;
	display: block;
	top: 0;
	left: 0;
	 
	overflow: hidden;
}
section{
	&.backgroundAnimationActive{
		// overflow: hidden;
	}
}
.el-animation-items{ 
	width: 50px; 
	height: 50px;
	position: absolute;
	display: block;
	overflow: hidden;
	opacity: 0;
	div{
		height: 100%; 
		width: 100%;
	} 
}  


html body .squre{
	border-radius: 0 !important;
}
html body .round{ 
	border-radius: 30px !important;
} 
html body .roundShape{
	border-radius: 5px !important;
}