//COMMON IMPORTS
@import "../config/imports";

$primary-font: 'Sintony', sans-serif;
$secondary-font: 'Playfair Display', serif;

// RTL
@include if-rtl() {
	[class*="fa-"] {
		&.fa-chevron-right, &.fa-long-arrow-alt-right, &.fa-reply {
			transform: rotate(180deg);
		}
	}	

	.gmap_marker {
		padding-right: 15px;
	}
}

h1, h2, h3, h4, h5, h6  {
	font-family: $secondary-font;
}

a, p, span, button, input, textarea {
	font-family: $primary-font;
}

// Custom Demo Margins
h2 {
	margin: 0 0 15px 0;
}

@media (max-width: 991px) {
	.custom-sm-margin-top {
		margin-top: 20px;
	}
}

// Fonts
.custom-primary-font {
	font-family: $primary-font;
}

.custom-secondary-font {
	font-family: $secondary-font;
}

// Custom Section Padding
.custom-section-padding {
	padding: 60px 0px;
}

.custom-section-padding-2 {
	padding-top: 60px;
}

.custom-section-padding-3 {
	padding-#{$left}: 110px !important;
}

.custom-opacity-font {
	opacity: 0.6;
	transition: ease all 300ms;
	&:hover {
		opacity: 1;
	}
}

// Custom Borders
.custom-border-radius {
	border-radius: 35px !important;
	padding: 11px 30px !important;
	&.custom-border-radius-small {
		padding: 7px 17px !important;
		font-size: 12px;
	}
}

.btn-outline.custom-border-width {
	border-width: 2px;
}

@media (min-width: 991px) {
	.custom-md-border-top {
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
}

// Custom Position
.custom-position-1 {
	position: relative;
	margin-top: -177px;
}

@media (max-width: 991px) {
	.custom-position-1 {
		margin-top: 0;
		background: #101019;
	}
}

// Custom Colors
.custom-color-red {
	color: #fa4141;
}

// Rev Slider - Custom Arrows Style
.tp-leftarrow, .tp-rightarrow {
	&.custom-arrows-style-1 {
		width: 45px;
		height: 120px;
		background: rgba(16, 16, 25, 0.5);

		&:hover {
			background: rgba(16, 16, 25, 1);
		}

		&:before {
			content: '';
			position: absolute;
			top: 50%;
			left: 70%;
			width: 30px;
			height: 30px;
			border-top: 1px solid #FFF;
			border-left: 1px solid #FFF;
			transform: translate3d(-50%, -50%, 0) rotate(-45deg);
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			left: 106%;
			top: 50%;
			width: 70px;
			border-top: 1px solid #FFF;
			transform: translate3d(-50%, -50%, 0);
		}
	}
}

@media (max-width: 767px) {
	.tp-leftarrow, .tp-rightarrow {
		&.custom-arrows-style-1 {
			width: 30px;
			height: 90px;

			&:before {
				width: 20px;
				height: 20px;
			}

			&:after {
				width: 50px;
			}
		}
	}
}

.tp-rightarrow {
	&.custom-arrows-style-1 {
		transform: rotate(180deg);
	}
}

// Owl Carousel - Fix
.owl-carousel {
	.owl-item {
		> div {
			width: calc(100% + 2px);
		}
	}
}

// Owl Carousel Custom Dots Position
.owl-carousel {
	&.custom-dots-position, &.custom-dots-position-2 {
		.owl-dots {
			position: absolute;
			top: 0;
			#{$right}: 0;
			margin-top: -45px !important;
			width: auto;
		}
	}

	&.custom-dots-position-2 {
		.owl-dots {
			width: 100%;
			max-width: 1140px;
			right: 50%;
			margin: 0 15px;
			text-align: $right;
			transform: translateX(50%);
			@include if-rtl() {
				margin: 0 -15px;
			}
		}
	}
}

@media (min-width: 768px) {
	.owl-carousel {
		&.custom-dots-position-2 {
			.owl-dots {
				max-width: 750px;
			}
		}
	}
}

@media (min-width: 992px) {
	.owl-carousel {
		&.custom-dots-position-2 {
			.owl-dots {
				max-width: 970px;
			}
		}
	}
}

@media (min-width: 1200px) {
	.owl-carousel {
		&.custom-dots-position-2 {
			.owl-dots {
				max-width: 1140px;
			}
		}
	}
}

// Owl Carousel - Custom Arrows Style 2
.owl-carousel {
	&.custom-arrows-style-2, &.custom-xs-arrows-style-2 {
		.owl-nav {
			button.owl-prev, button.owl-next {
				position: absolute;
				width: 30px;
				transition: ease all 300ms;

				&:before {
					content: '';
					display: block;
					position: absolute;
					top: 50%;
					right: -2px;
					left: auto;
					width: 100%;
					border-top: 1px solid #4dbb6d;
					transform: translateY(-50%);
				}

				&:after {
					content: '';
					display: block;
					position: absolute;
					top: 50%;
					right: 0;
					width: 15px;
					height: 15px;
					border-top: 1px solid #4dbb6d;
					border-right: 1px solid #4dbb6d;
					transform: translateY(-50%) rotate(45deg);
				}

				&.disabled {
					&:before {
						border-top: 1px solid #646466;
					}

					&:after {
						border-top: 1px solid #646466;
						border-right: 1px solid #646466;
					}
				}
			}

			button.owl-prev {
				left: -95px;
				transform: rotate(-180deg);
			}
			
			button.owl-next {
				right: 10px;
			}
		}

		&.show-nav-title {
			.owl-nav {
				margin-top: -52px;

				button[class*="owl-"], button[class*="owl-"]:hover, button[class*="owl-"]:active {
					width: 30px;
				}
			}
		}
	}
}

// Show custom-xs-arrows-style-2
@media (max-width: 767px) {
	.owl-carousel {
		&.custom-xs-arrows-style-2 {
			.owl-nav {
				display: block;
			}

			.owl-dots {
				display: none;
			}
		}
	}
}

// Hide custom-xs-arrows-style-2
@media (min-width: 767px) {
	.owl-carousel {
		&.custom-xs-arrows-style-2 {
			.owl-nav {
				display: none;
			}
		}
	}
}

/* 
* Header
*/
html:not(.sticky-header-active) {
	#header.header-transparent-dark-bottom-border {
		.header-body {
    		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    	}
    }
}

html.sticky-header-active #header.header-effect-shrink .header-body {
	box-shadow: none !important;
}

/*
* Rev Slider
*/
@media (min-width: 991px) {
	.slider-container {
		height: 100vh !important;

		.slider {
			height: 100vh !important;
		}
	}
}

@media (max-width: 767px) {
	.slider-container {
		.btn {
			font-size: 12px !important;
		}
	}
}

// Custom Page Header
.custom-page-header {
	padding: 120px 0 35px !important;
	h1 {
		font-size: 2em;
	}
}

/*
* Looking For
*/
.looking-for {
	.container {
		padding: 30px;
	}

	.looking-for-box {
		h2 {
			color: #FFF;
			line-height: 1.2;
			margin-bottom: 0;
		}
	}
}

@media (max-width: 991px) {
	.looking-for {
		.looking-for-box {
			h2 {
				font-size: 2em;
			}
		}
	}
}

// Custom call to action
.custom-call-to-action {
	display: block;
	border-#{$left}: 2px solid #4a8961;
	padding-#{$left}: 10px;

	span {
		&:nth-child(2) {
			display: block;
			font-size: 1.1rem;
		}
	}

	&.white-border {
		border-color: #FFF !important;
	}
}

@media (max-width: 991px) {
	.custom-call-to-action {
		span {
			&:nth-child(2) {
				font-size: 1rem;
			}
		}
	}
}

@media (max-width: 767px) {
	.custom-call-to-action {
		span {
			&:nth-child(2) {
				font-size: 1.2rem;
			}
		}
	}
}

// Custom Content Grid
.custom-content-grid {
	&:before {
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		box-shadow: 0px 0px 97px 70px rgba(152, 152, 152, 0.1);
		transform: translate(-50%, -50%);
	}

	.content-grid-item {
		&:before {
			left: 0px;
		}

		&:after {
			z-index: 1;
		}
	}

	.counters {
		.counter {
			margin-left: 80px;
			text-align: left;

			&.margin-style-2 {
				margin-left: 55px;
			}

			.counter-icon {
				float: left;
				margin-left: -50px;
				margin-top: 8px;
			}

			label {
				font-weight: normal;
				letter-spacing: -1px;
				color: #1e1e24;
			}
		}

		strong {
			font-size: 45px;
		}
	}
}

@media (max-width: 991px) {
	.custom-content-grid {
		&:before {
			content: none;
		}

		.counters {
			.counter.custom-sm-counter-style {
				margin-left: 0;
				text-align: center;
				padding-left: 40px;

				&.margin-style-2 {
					margin-left: 0;
				}

				.counter-icon {
					float: none;
					margin-left: 0;
					position: absolute;
					top: 50px;
					left: 17%;
				}
			}
		}
	}
}

// Custom List Icons
.list.list-icons.list-icons-style-3 li > .fa:first-child, 
.list.list-icons.list-icons-style-3 li > .icons:first-child, 
.list.list-icons.list-icons-style-3 li a:first-child > .fa:first-child, 
.list.list-icons.list-icons-style-3 li a:first-child > .icons:first-child {
	font-size: 0.7em;
	padding: 10px;
	padding-top: 8px;
}

/*
* Expertise
*/
// Custom Feature Box
.feature-box {
	&.custom-feature-box {
		margin-bottom: 1.2rem;

		&.custom-feature-box-active, &:hover {
			.feature-box-icon {
				box-shadow: 0px 0px 40px 4px rgba(200, 200, 200, 0.5);

				img {
					transform: translate3d(-50%, -50%, 0) scale(1.1);
				}
			}
		}
		
		.feature-box-icon {
			flex: 0 0 auto;
			background: transparent;
			width: 100px;
			position: relative;
			height: 100px;
			border: 6px solid #FFF;
			border-radius: 100%;
			padding: 5px;
			margin-top: 0;
			overflow: hidden;
			z-index: 1;
			transition: ease box-shadow 300ms;

			img {
				position: absolute;
				width: 113%;
				top: 50%;
				left: 50%;
				z-index: 0;
				transform: translate3d(-50%, -50%, 0) scale(1);
				transition: ease transform 300ms;
			}
		}
	}
}

@media (max-width: 991px) {
	.col-md-12 .feature-box.feature-box-style-2.custom-feature-box {
		.feature-box-info {
	    	padding-left: 115px;
	    }
	}
}

/*
* Our Strategy
*/
.custom-step-item {
	.step {
		position: relative;
		text-align: center;
		clear: both;
		position: absolute;
		top: 0;
		#{$left}: 0;
		font-weight: 600;

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			#{$right}: -20px;
			height: 63px;
			border-left: 1px solid #e4e4e4;
		}

		.step-number {
			display: block;
			font-size: 3em;
			font-weight: 700;
			letter-spacing: -4px;
			line-height: 1;
		}
	}

	.step-content {
		margin-#{$left}: 80px;
	}
}

// Owl Carousel Dots - Numbered Dots Style
.owl-carousel {
	&.numbered-dots {
		.owl-dots {
			display: inline-block;
			counter-reset: dots;
			margin-left: 70px;
		}

		button.owl-dot {
			span {
				width: 30px;
				height: 30px;

				&:before {
					counter-increment:dots;
					content: counter(dots);
					color: #245432;
					font-weight: bold;
					line-height: 2.2;
				}
			}

			&.active, &:hover {
				span {
					&:before {
						color: #FFF;
					}
				}
			}

			&:hover {
				opacity: 0.5;
			}
		}
	}

	&.owl-theme {
		button.owl-dot {
			span {
				background: #eef4f2;
			}
		}
	}
}

/*
* Frequently Asked Questions
*/
.custom-accordion-style-1 {
	.card {
		position: relative;
		margin-top: 0 !important;
		border-#{$right}: 0;
		border-bottom: 0;
		border-top: 0;
		box-shadow: none;
		border-radius: 0 !important;

		&:last-child {
			border-bottom: 1px solid #e4e4e4;
		}

		.card-header {
			margin: 0;
		}

		.card-title {
			> a {
				font-size: 14px !important;

				&.accordion-toggle {
					color: #4dbb6d;
					border-bottom: 1px solid #e4e4e4;

					&:before {
						content: '';
						display: block;
						position: absolute;
						top: 0;
						#{$left}: 0;
						height: 100%;
						border-left: 1px solid #4dbb6d;
					}

					.custom-accordion-plus {
						&:after {
							border-top: 2px solid #4dbb6d;
							transform: translate(-50%, -50%) rotate(0deg);
						}
					}
				}

				&.collapsed {
					color: #1e1e24 !important;
					border-bottom: 0;

					&:before {
						content: none;
					}

					.custom-accordion-plus {
						&:after {
							border-top: 2px solid #1e1e24;
							transform: translate(-50%, -50%) rotate(90deg);
						}
					}
				}

				.custom-accordion-plus {
					position: absolute;
					top: 23px;
					#{$right}: 15px;
					width: 15px;

					&:before, &:after {
						content: '';
						display: block;
						position: absolute;
						top: 50%;
						left: 50%;
						width: 100%;
						border-top: 2px solid #1e1e24;
						transform: translate(-50%, -50%);
						transition: ease all 300ms;
					}
				}
			}
		}

		.card-body {
			padding: 15px 15px 35px;
		}
	}
}

/*
* Our Cases
*/
// Custom Thumb Info Style
.thumb-info.custom-thumb-info-style-1 {
	border: none;

	&:hover {
		.thumb-info-caption {
			background: #4dbb6d !important;

			.custom-thumb-info-title {
				span {
					color: #FFF !important;
				}
			}

			.custom-arrow {
				width: 55px;

				&:before {
					border-top: 1px solid #FFF;
				}

				&:after {
					border-top: 1px solid #FFF;
					border-right: 1px solid #FFF;
				}
			}
		}
	}

	.thumb-info-caption {
		position: relative;
		padding: 25px;
		display: block;
		transition: ease background 300ms, ease width 300ms;

		.custom-thumb-info-title {
			span {
				color: #777;
			}

			.custom-thumb-info-name {
				display: block;
			}
		}

		.custom-arrow {
			position: absolute;
			top: 50%;
			#{$right}: 25px;
			width: 40px;
			transform: translateY(-50%);
			transition: ease all 300ms;
			@include if-rtl() {
				transform: translateY(-50%) rotate(180deg);
			}

			&:before {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				right: -2px;
				width: 100%;
				border-top: 1px solid #1e1e24;
				transform: translateY(-50%);
			}

			&:after {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				right: 0;
				width: 15px;
				height: 15px;
				border-top: 1px solid #1e1e24;
				border-right: 1px solid #1e1e24;
				transform: translateY(-50%) rotate(45deg);
			}
		}
	}
}

// Owl Carousel - Custom Both Sides Shadow Style / Custom Dots Style 1
.owl-carousel {
	&.custom-both-sides-shadow {
		.owl-stage-outer {
			&:before, &:after {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				box-shadow: 0px 0px 140px 220px rgba(255, 255, 255, 0.8);
				z-index: 1;
				transition: ease opacity 300ms;
			}

			&:after {
				left: auto;
				right: 0;
			}

			&:hover {
				&:before, &:after {
					opacity: 0;
				}
			}
		}
	}

	&.custom-dots-style-1 {
		.owl-dots {
			margin-top: 30px;
		}

		button.owl-dot {
			span {
				width: 12px;
				height: 12px;
				border: 2px solid black;
				background: transparent !important;
			}

			&.active, &:hover {
				span {
					position: relative;
					border: 2px solid #4dbb6d;
					background: transparent;

					&:before {
						content: '';
						display: block;
						position: absolute;
						top: 50%;
						left: 50%;
						width: 3px;
						height: 3px;
						border-radius: 100%;
						background: #4dbb6d;
						transform: translate3d(-50%, -50%, 0);
					}
				}
			}

			&:hover {
				opacity: 0.5;
			}
		}
	}
}

@media (max-width: 991px) {
	.owl-carousel {
		&.custom-both-sides-shadow {
			.owl-stage-outer {
				&:before, &:after {
					box-shadow: none;
				}
			}
		}
	}
}

/*
* Testimonials
*/
// Custom Image Rounded
.custom-rounded-image {
	border-radius: 100%;
}

// Custom Testimonial Style 
.testimonial.custom-testimonial-style-1 {
	blockquote {
		background: transparent;
		padding: side-values(40px 20px 40px 0px);

		&:before {
			#{$left}: 0;
			font-size: 60px;
			color: #1e1e24;
		}

		&:after {
			font-size: 60px;
			color: #1e1e24;
		}

		p {
			color: #777;
			font-family: $primary-font;
			font-style: normal;
			font-size: 1em;
			line-height: 1.8;
			padding: 0px;
		}
	}

	.testimonial-author {
		p {
			position: relative;
			margin: 0;

			&:before {
				content: '';
				display: block;
				position: absolute;
				top: -10px;
				#{$left}: 0;
				width: 18px;
				border-top: 2px solid #1e1e24;
			}
		}
	}
}

/*
* Our Team
*/
.team-item {
	padding: 0px 10px;

	&:hover {
		.image-wrapper {
			img {
				transform: scale(1.1);
			}
		}
	}

	.image-wrapper {
		display: block;
		overflow: hidden;

		img {
			transition: ease transform 300ms;
		}
	}

	.team-infos {
		position: relative;
		background: #FFF;
		padding: 25px;

		.share {
			position: absolute;
			bottom: calc(100% - 22px);
			#{$right}: 15px;
			width: 42px;
			overflow: hidden;
			z-index: 1;
			transition: ease height 300ms;

			&:hover {
				.share-icons {
					transform: translateY(0);
				}

				i {
					&.fa-share-alt {
						background: #4dbb6d;
					}
				}
			}

			&:after {
				content: '';
				display: block;
				position: absolute;
				bottom: 0;
				left: 0;
				background: #FFF;
				width: 100%;
				height: 22px;
			}

			.share-icons {
				text-align: center;
				padding-bottom: 42px;
				border-radius: 50px;
				transform: translateY(100%);
				transition: ease transform 300ms;
			}

			i {
				display: block;
				color: #FFF;
				padding: 15px;
				opacity: 0.5;
				transition: ease opacity 300ms;

				&.fa-share-alt {
					position: absolute;
					background: #58605a;
					bottom: 0;
					left: 0;
					border-radius: 50px;
					opacity: 1;
					z-index: 1;
				}

				&.fa-facebook-f {
					color: #4d70a8;
				}

				&.fa-instagram {
					color: #964b00;
				}

				&.fa-linkedin-in {
					color: #0077b5;
				}

				&:hover {
					opacity: 1;
				}
			}
		}

		.team-member-desc {
			display: block;
			color: #777;
		}
	}
}

/*
* Our Blog
*/
article.blog-post {
	.blog-post-image-wrapper {
		img {
			max-width: 95%;
		}

		.blog-post-date {
			position: absolute;
			top: 65%;
			#{$right}: 10px;
			font-size: 3em;
			text-align: center;
			line-height: 1;
			padding: 25px 15px;
			transform: translateY(-50%);

			.month-year {
				display: block;
				font-size: 0.4em;
			}
		}
	}

	@include if-rtl() {
		.post-infos {
			span {
				display: inline-block;
			}
		}
	}
}

/*
* Contact Us
*/
.custom-call-to-action-2 {
	.info {
		display: block;
	}
}

// Custom Social Icons Style
.custom-social-icons-style-1 {
	li {
		border: 2px solid #FFF;

		a {
			background: transparent;
			color: #FFF !important;
		}
	}
}

// Custom Contact Form Style
.custom-contact-form-style-1 {
	.custom-input-box {
		position: relative;

		.icons {
			position: absolute;
			top: 16px;
			#{$left}: 16px;
			font-size: 1.3em;
		}

		.form-control {
			border-radius: 2px;
			height: 50px;
			padding-#{$left}: 50px;
		}

		textarea.form-control {
			padding-top: 14px;
			height: 0;
			min-height: 130px;
		}
	}
}

/*
* Footer
*/
#footer {
	background: #1A1E2A;
	border-top: 1px solid #3c3e49;
	margin-top: 0;
	padding: 20px 0 0;

	p {
		color: #a8b1b8;
		margin-bottom: 0;
	}
}