/*
@File: Flexa Template Styles

* This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.

This files table contents are outlined below>>>>>

******************************************* 
** - DEFAULT AREA STYLE 
** - Default Btn Area Style
** - Read More Area Style
** - Header Area Style
** - Nav Area
** - Sidebar Modal Area Style
** - Banner Area Style
** - Choose Us Area Style
** - About Area Style
** - Our Vision Area Style
** - Services Area Style
** - Quat Area Style
** - Counter Area Style
** - Achievement Area Style
** - Agent Now Area Style
** - Testimonial Area Style
** - Business Contact Area Style
** - Blog Area Style
** - Footer Top Area Style
** - Footer Bottom Area Style
** - Page Title Area Style
** - Sign In & Log In  Area Style
** - Coming Soon Area Style
** - 404 Error Area Style
** - Service Details Area Style
** - Blog Details Area Style
** - Contact Area Style
** - FAQ Area Style
** - Client Area Style
** - Gallery Area Style
** - Preloader Area Style
** - Go Top Style
** - Video wave Style
** - Section Title Area Style
** - Nice select Area

*******************************************
/*

/*
Default Style
============================*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap');

$paragraph-font-family :  'Open Sans', sans-serif;
$body-font-family : 'Roboto', sans-serif;

$main-color: #31abfc;
$body-color: #6e6e6e;
$heading-color: #262566;
$white-color: #ffffff;
$black-color: #000000;
$box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
$transition: all 0.5s;
$border-radius: 4px;

:root {
    scroll-behavior: inherit;
}

body {
	padding: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    font-family: $body-font-family;
	color: $body-color;
}
a {
	display: inline-block;
    transition: $transition;
	text-decoration: none;
	color: $main-color;
	&:hover {
        text-decoration: none;
        color: $heading-color;
	}
	&:focus {
		text-decoration: none;
	}
}
button {
    outline: 0 !important; 
	box-shadow: none;
	border: none;
    &:focus {
        box-shadow: none;
    }
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: $heading-color;
	font-weight: 700;
}
h3 {
	font-size: 20px;
}
.d-table {
    width: 100%;
    height: 100%;
}
.d-table-cell {
    vertical-align: middle;
}
p {
    font-size: 15px;
	margin-bottom: 15px;
	font-family: $paragraph-font-family;
	&:last-child {
        margin-bottom: 0;
    }
} 
img {
    max-width: 100%;
    height: auto;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ml-0 {
	margin-left: 0 !important;
}
.pr-0 {
	padding-right: 0;
}
.form-control {
    height: 50px;
    color: $heading-color;
	border: 1px solid #e8e8e8;
	background-color: #f9f9f9;
	border-radius: $border-radius;
	font-size: 15px;
	padding: 10px 20px;
	width: 100%;
	&::placeholder {
		color: #495057;
	}
	&:focus {
		color: $black-color;
		background-color: transparent;
		box-shadow: unset;
		outline: 0;
		border: 1px solid $main-color;
	}
}
.form-control:hover, .form-control {
    &:focus {
        box-shadow: unset;
    }
}
textarea {   
    &.form-control {
        height: auto;
    }
}
.ptb-100 {
    padding-top: 100px;
    padding-bottom: 100px;
}
.pt-100 {
    padding-top: 100px;
}
.pb-100 {
    padding-bottom: 100px;
}
.pt-70 {
    padding-top: 70px;
}
.pb-70 {
    padding-bottom: 70px;
}
.mt-30 {
	margin-top: 30px;
}
.mb-30 {
	margin-bottom: 30px;
}
.ml-30 {
	margin-left: 30px;
}

/*
Default Btn Area Style*/
.default-btn {
	font-size: 16px;
    color: $white-color;
	padding: 15px 30px;
    line-height: 1;
    transition: $transition;
    text-transform: capitalize;
    position: relative;
    cursor: pointer;
	border-radius: $border-radius;
	text-align: center;
	overflow: hidden;
	z-index: 1;
	background-color: $main-color;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 100%;
		width: 100%;
		height: 50%;
		background-color: #262566;
		z-index: -1;
		transition: $transition;
	}
	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		right: 100%;
		width: 100%;
		height: 50%;
		background-color: #262566;
		z-index: -1;
		transition: $transition;
	}
	&.active {
		margin-left: 30px;
		color: $white-color;
		background-color: $heading-color;
	}
	&:hover {
		color: $white-color;
		&::before  {
			left: 0;
		}
		&::after  {
			right: 0;
		}
	}
}

/*
Read More Area Style*/
.read-more {
	line-height: 1;
	color: $main-color;
	font-weight: 500;
	transition: $transition;
	display: block;
	font-size: 13px;
	&:hover {
		color: $main-color; 
		i{
			color: $main-color;
			animation: rotation 0.5s linear infinite;
		}
	}
}

/*===== DEFAULT STYLE END ======*/

/*====================================================
HOME PAGE ONE STYLE
======================================================*/

/*
Header Area Style
======================================================*/ 
.header-area {
	.top-header-area {
		padding: 15px 0;
		background-color: $white-color;
		.header-content-left {
			p {
				color: $heading-color;
				font-size: 14px;
				text-transform: capitalize;
			}
		}
		.header-content-right {
			float: right;
			li {
				display: inline-block; 
				padding-right: 20px;
				color: $heading-color;
				&:last-child {
					padding-right: 0;
				}
				a {
					color: $heading-color;
					display: inline-block;
					i {
						color: $white-color;
						margin-right: 5px;
						font-size: 15px; 
						background-color: #193e80;
						width: 25px;
						height: 25px;
						line-height: 25px;
						text-align: center;
						border-radius: 50%;
						position: relative;
						top: 1px;
					}
					&:hover {
						color: $main-color;
					}
				}
			}
		}
	}
}

/*
Nav Area Style
======================================================*/ 
.navbar-area {
	.main-nav {
		position: unset;
		background-color: transparent;
		box-shadow: none;
		padding-top: 0;
		padding-bottom: 0;
		nav {
			.navbar-nav {
				.nav-item {
					a {
						font-weight: 500;
						font-size: 15px;
						color: $heading-color;
						text-transform: capitalize;
						transition: $transition;
						margin-left: 0;
						margin: 0 10px;
						position: relative;
						i {
							font-size: 15px;
							line-height: 0;
							position: relative;
							top: 3px;
						}
						&::before {
							content: "";
							position: absolute;
							bottom: -25px;
							right: 0;
							width: 0;
							height: 2px;
							background-color: $white-color;
							opacity: 0;
							transition: $transition;
						}
						&:hover {
							color: $main-color;
						}
						&.active {
							color: $main-color;
						}
					}
					.dropdown-menu {
						background-color: $heading-color;
						border: none;
						border-radius: 0;
						top: 80%;
						left: 0;
						padding: 0;
						opacity: 0;
						visibility: hidden;
						li {
							a {
								font-size: 13px;
								color: $white-color;
								position: relative;
								padding: 10px 15px;
								border-bottom: 1px dashed #5a5a5a;
								margin-left: 0;
								margin-right: 0;
								i {
									float: right;
									top: 12px;
									transition: $transition;
								}
								&:hover {
									color: $heading-color;
									background-color: #f3f3f3;
								}
								&.active {
									color: $heading-color;
									background-color: #f3f3f3;
								}
							}
							.dropdown-menu {
								left: 100%;
								li {
									.dropdown-menu {
										li {
											a {
												border-bottom: 1px dashed #5a5a5a;
											}
											&:last-child {
												a {
													border-bottom: none;
												}
											}
										}
									}
								}
							}
							&:last-child {
								a {
									border-bottom: none;
								}
							}
							&:hover .dropdown-menu {
								top: 0px !important;
							}
							&:hover {
								.dropdown-menu {
									li {
										&:hover {
											.dropdown-menu {
												top: 0px !important;
											}
										}
									}
								}
							}
						}
					}
					&:hover ul {
						opacity: 1;
						visibility: visible;
						top: 100%;
					}
				}
			}
		}
	}
	&.is-sticky {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		background-color: $heading-color;
		box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4);
		animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
		transition: all .5s;
		width: 100% !important;
		.main-nav {
			nav {
				.navbar-nav {
					.nav-item {
						a {
							color: $white-color;
							&:hover {
								color: $main-color;
							}
							&.active {
								color: $main-color;
							}
						}
					}
				}
			}
		}
	}	

	.others-option {
		position: relative;
		top: 4px;
		.subscribe {
			display: inline-block;
			position: relative;
			.default-btn {
				padding: 12px 20px;
			}
		}
		.option-item {
			color: $body-color;
			display: inline-block;
			line-height: 1;
			margin-right: 12px;
			position: relative;
			top: -13px;
			.search-overlay {
				display: none;
				&.search-popup {
					position: absolute;
					top: 100%;
					width: 300px;
					right: 0;
					background: $white-color;
					z-index: 2;
					padding: 20px;
					box-shadow: $box-shadow;
					margin-top: 15px;
					.search-form {
						position: relative;
						.search-input {
							display: block;
							width: 100%;
							height: 50px;
							line-height: initial;
							border: 1px solid #eeeeee;
							color: $heading-color;
							outline: 0;
							transition: $transition;
							font-size: 15px;
							padding-top: 4px;
							padding-left: 15px;
							&:focus {
								border-color: $main-color;
							}
						}
						.search-button {
							position: absolute;
							right: 0;
							top: 0;
							height: 50px;
							background: $main-color;
							border: none;
							width: 50px;
							outline: 0;
							color: $white-color;
							transition: $transition;
							padding: 0;
							&:hover {
								background-color: $heading-color;
							}
						}
					}
				}
			}
			.search-btn {
				cursor: pointer;
				transition: $transition;
				color: $white-color;
				font-size: 20px;
				line-height: 1;
				text-align: center;
				position: relative;
				top: 3px;
				width: 40px;
				height: 40px;
				line-height: 40px;
				background-color: $main-color;
				border-radius: 50%;
				&:hover {
					color: $white-color;
				}
			}
			.close-btn {
				cursor: pointer;
				display: none;
				transition: $transition;
				font-size: 20px;
				line-height: 1;
				text-align: center;
				color: $white-color;
				position: relative;
				top: 3px;
				width: 40px;
				height: 40px;
				line-height: 40px;
				background-color: $main-color;
				border-radius: 50%;
				&:hover {
					color: $white-color;
				}
			}
			.close-btn.active {
				display: block;
			}
		}
		.sidebar-menu {
			display: inline-block;
			margin-left: 8px;
			i {
				font-size: 40px;
				color: $main-color;
				position: relative;
				top: -2px;
			}
		}
	}
}
.dropdown-toggle {
	&::after {
		display: none;
	}
}

/* Navbar toggler */
.navbar-toggler {
    border: none;
    background: #eee !important;
    padding: 10px;
	border-radius: 0;

	&:focus {
		outline: 0 !important;
		box-shadow: none;
	}

    .icon-bar {
        width: 28px;
        transition: all 0.3s;
        background: $main-color;
        height: 2px;
        display: block;
    }
    .top-bar {
        transform: rotate(45deg);
        transform-origin: 10% 10%;
        left: 4px;
        position: relative;
    }
    .middle-bar {
        opacity: 0;
        margin: 6px 0;
    }
    .bottom-bar {
        transform: rotate(-45deg);
        transform-origin: 10% 90%;
        left: 4px;
        position: relative;
    }
    &.collapsed {
        .top-bar {
            transform: rotate(0);      
            left: 0;
        }
        .middle-bar {
            opacity: 1;
        }
        .bottom-bar {
            transform: rotate(0);
            left: 0;
        }
    }
}
.navbar-three {
	.main-nav {
		nav {
			.navbar-nav {
				.nav-item {
					a {
						color: $white-color;
					}
				}
			}
		}
	}
}

/*================================================
Search Overlay CSS
=================================================*/
.search-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	opacity: 0;
	width: 100%;
    height: 100%;
	visibility: hidden;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	overflow: hidden;

	.search-overlay-layer {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		transform: translateX(100%);

		&:nth-child(1) {
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);
			-webkit-transition: all 0.3s ease-in-out 0s;
			transition: all 0.3s ease-in-out 0s;
		}
		&:nth-child(2) {
			left: 0;
			background-color: rgba(0, 0, 0, 0.4);
			-webkit-transition: all 0.3s ease-in-out 0.3s;
			transition: all 0.3s ease-in-out 0.3s;
		}
		&:nth-child(3) {
			left: 0;
			background-color: rgba(0, 0, 0, 0.7);
			-webkit-transition: all 0.9s ease-in-out 0.6s;
			transition: all 0.9s ease-in-out 0.6s;
		}
	}
	.search-overlay-close {
		position: absolute;
		top: 30px;
		right: 20px;
		width: 50px;
		z-index: 2;
		text-align: center;
		cursor: pointer;
		padding: 10px;
		transition: all 0.9s ease-in-out 1.5s;
		opacity: 0;
		visibility: hidden;

		.search-overlay-close-line {
			width: 100%;
			height: 3px;
			float: left;
			margin-bottom: 5px;
			background-color: $white-color;
			-webkit-transition: all 500ms ease;
			transition: all 500ms ease;

			&:nth-child(1) {
				transform: rotate(45deg);
			}
			&:nth-child(2) {
				margin-top: -7px;
				transform: rotate(-45deg);
			}
		}
		&:hover .search-overlay-close-line {
			background: $main-color;
			transform: rotate(180deg);
		}
	}
	.search-overlay-form {
		transition: all 0.9s ease-in-out 1.4s;
		opacity: 0;
		visibility: hidden;
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		max-width: 500px;
		width: 100%;
		margin: auto;
		padding: 0 15px;

		form {
			position: relative;
			.input-search {
				display: block;
				width: 100%;
				height: 60px;
				border: none;
				border-radius: 30px;
				color: $black-color;
				padding: 3px 0 0 25px;
				&:focus {
					outline: 0;
				}

				&::-webkit-input-placeholder {
					transition: $transition;
					letter-spacing: .5px;
					color: $black-color;
				}
				&:-ms-input-placeholder {
					transition: $transition;
					letter-spacing: .5px;
					color: $black-color;
				}
				&::-ms-input-placeholder {
					transition: $transition;
					letter-spacing: .5px;
					color: $black-color;
				}
				&::placeholder {
					transition: $transition;
					letter-spacing: .5px;
					color: $black-color;
				}
				&:focus::-webkit-input-placeholder {
					color: transparent;
				}
				&:focus:-ms-input-placeholder {
					color: transparent;
				}
				&:focus::-ms-input-placeholder {
					color: transparent;
				}
				&:focus::placeholder {
					color: transparent;
				}
			}
			button {
				position: absolute;
				right: 5px;
				top: 5px;
				width: 50px;
				color: $white-color;
				height: 50px;
				border-radius: 50%;
				background-color: $main-color;
				transition: $transition;
				border: none;
				font-size: 20px;
				line-height: 50px;
				 
				&:hover {
					background-color: $black-color;
					color: $white-color;
				}
			}
		}
	}
	&.search-overlay-active.search-overlay {
		opacity: 1;
		visibility: visible;
		.search-overlay-layer {
			transform: translateX(0);
		}
		.search-overlay-close {
			opacity: 1;
			visibility: visible;
		}
		.search-overlay-form {
			opacity: 1;
			visibility: visible;
		}
	}
}

/*
Sidebar Modal Area Style
======================================================*/
.sidebar-modal {
	.navbar-nav {
		li {
			a {
				padding: 10px 0px 10px 15px;
			}
		}
	}
	.modal {
		display: inherit;
		left: auto;
		right: -100%;

		.modal-dialog {
			position: fixed;
			margin: auto;
			max-width: 400px;
			height: 100%;
			transform: translate3d(0%, 0, 0);
		}
		.modal-content {
			height: 100%;
			overflow-y: auto;
			border-radius: 0;
			border: none;
			background-color: $white-color;
			box-shadow: 0px 0px 30px #eee;
		}
		.modal-body {
			padding: 30px;
			.sidebar-modal-widget {
				margin-bottom: 35px;
				.title {
					position: relative;
					z-index: 1;
					margin-bottom: 20px;
					color: $heading-color;
					border-bottom: 1px solid #eeeeee;
					padding-bottom: 5px;
					&::before {
						position: absolute;
						left: 0;
						bottom: -1px;
						width: 70px;
						height: 2px;
						border-radius: 5px;
						background: $main-color;
						content: '';
					}
				}
				&:last-child {
					margin-bottom: 0;
				}
				ul {
					padding: 0;
					margin: 0;
					li {
						margin-bottom: 10px;
						&:last-child {
							margin-bottom: 0;
						}
						a {
							font-size: 14px;
							color: $heading-color;
							font-weight: 500;
							text-transform: capitalize;
							&:hover {
								color: $main-color;
							}
						}
					}
				}
				ul.contact-info {
					li {
						position: relative;
						font-weight: 500;
						padding-left: 45px;
						text-transform: uppercase;
						margin-bottom: 10px;
						font-size: 14px;
						color: $heading-color;
						span {
							display: block;
							font-weight: 400;
							color: #818992;
							text-transform: initial;
						}
						a {
							display: block;
							font-weight: 400;
							color: #818992;
							text-transform: initial;
							&:hover {
								color: $main-color;
							}
						}
						i {
							position: absolute; 
							left: 0;
							top: 5px;
							color: $white-color;
							text-align: center;
							width: 35px;
							height: 35px;
							line-height: 35px;
							font-size: 29px;
							transition: all 0.5s;
							background-color: $heading-color;
							border-radius: 4px;
							font-size: 15px;
						}
						&:hover {
							i {
								color: $white-color;
								background: $main-color;
							}
						}
						&:last-child {
							margin-bottom: 0;
						}
					}
				}
				.social-list {
					text-align: left;
						li {
							display: inline-block;
							padding-right: 5px;
							a {
								i {
								width: 30px;
								height: 30px;
								display: inline-block;
								text-align: center;
								line-height: 30px;
								border-radius: 4px;
								color: $white-color;
								background-color: $heading-color;
								font-size: 15px;
								transition: $transition;
								&:hover {
									background-color: $main-color;
								}
								}
							}
							&:hover {
								color: $main-color;
							}
						}
					li {
						a {
							&:hover {
								color: $white-color;
							}
						}
					}
				}
			}
		}
	}
	&.active {
		.modal {
			.modal-dialog {
				right: 0;
				animation: slideInRight 0.3s linear;
			}
		}
		.modal {
			.modal-dialog {
				right: 0;
			}
		}
	}
	.modal-header {
		display: inline;
		padding: 0;
		border: none;
		position: relative;
		.close {
			height: 30px;
			width: 30px;
			color: $main-color;
			margin: 0px;
			padding: 0px;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
			border: none;
			opacity: 1;
			position: absolute;
			top: 5px;
			right: 5px;
			background: transparent;

			&:hover {
				color: red;
			}
			
			i {
				font-size: 30px;
			}
		}
		h2 {
			background-color: $heading-color;
			box-shadow: $box-shadow;
			padding: 30px 25px;
		}
	}
	button {
		&:focus {
			outline: 0px;
		}
	}
}

/*
Banner Area Style
======================================================*/ 
.main-banner-area {
	position: relative;
	background-color: #c6e3fd; 
	padding-top: 225px;
    padding-bottom: 125px;
	z-index: 1;
	overflow: hidden;
	.banner-text {
		max-width: 540px;
		margin-left: auto;
	}
	.banner-text {
		position: relative;
		span {
			font-size: 16px;
			color: $main-color;
			margin-bottom: 20px;
			display: block;
			font-weight: 600;
		}
		h1 {
			font-size: 45px;
			margin-bottom: 25px;
		}
		p {
			font-size: 16px;
			margin-bottom: 35px;
		}
	}
	.shape {
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 0;
		z-index: -1;
		img {
			width: 100%;
		}
	}
	.banner-shape-right {
		position: absolute;
		right: 0;
		top: 0;
		z-index: -1;
	}
}

/*
Choose Us Area Style
======================================================*/ 
.single-choose {
	text-align: center;
	background-color: $white-color;
	box-shadow: $box-shadow;
	padding: 30px;
	margin-bottom: 30px;
	transition: $transition;
	position: relative;
	z-index: 1;
	border: 1px dotted $heading-color;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	span {
		font-size: 50px;
		display: inline-block;
		margin-bottom: 20px;
		line-height: 1;
		color: $main-color;
	}
	h3 {
		margin-bottom: 10px;
		transition: $transition;
	}
	p {
		transition: $transition;
	}
	a {
		i {
			display: inline-block;
			width: 25px;
			height: 25px;
			line-height: 25px;
			background-color: $main-color;
			border-radius: 50%;
			text-align: center;
			font-size: 16px;
			color: $white-color;
			margin-top: 2px;
		}
	}
	.choose-icon {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		display: flex;
		font-size: 100px;
		z-index: -1;
		opacity: 0;
		transition: $transition;
	}
	&:hover {
		transform: translateY(-5px);
		background-color: $heading-color;
		h3 {
			color: $white-color;
		}
		p {
			color: $white-color;
		}
		.choose-icon {
			opacity: 0.3;
		}
	}
}

/*
About Area Style
======================================================*/ 
.about-area {
	background-color: #f8f9fa;
	height: 100%;
	overflow: hidden;
	.about-content {
		span {
			font-size: 14px;
			font-weight: 700;
			color: $main-color;
			display: block;
			margin-bottom: 15px;
			text-transform: capitalize;
			line-height: 1;
		}
		h2 {
			font-size: 40px;
			margin-bottom: 20px;
			position: relative;
			display: block;
		}
		.about-list {
			margin-top: 15px;
			ul {
				overflow: hidden;
				li {
					color: $heading-color;
					font-size: 16px;
					font-weight: 600;
					font-family: $paragraph-font-family;
					position: relative;
					padding-left: 30px;
					margin-top: 10px;
					width: 50%;
					float: left;
					padding-right: 15px;

					i {
						font-size: 21px;
						font-weight: normal;
						position: absolute;
						left: 0;
						top: -5px;
					}
				}
			}
			.about-single-list {
				padding-left: 60px;
				position: relative;
				margin-top: 10px;
				i {
					position: absolute;
					top: 2px;
					left: 0;
					font-size: 50px;
					color: $heading-color;
					line-height: 1;
				}
				span {
					font-size: 16px;
					color: $heading-color;
					line-height: 1.5;
				}
			}
		}
		.default-btn {
			margin-top: 25px;
		}
	}
	.about-img-3 {
		position: relative;
		float: right;
		img {
			border-radius: 0 25% 0 0;
		}
		.about-img-2 {
			position: absolute;
			top: 35px;
			left: -90px;
		}
	}
}

/*
Our Vision Area Style
======================================================*/ 
.our-vision-area {
	position: relative;
	.vision-content {
		span {
			font-size: 14px;
			font-weight: 700;
			color: $main-color;
			display: block;
			margin-bottom: 15px;
			text-transform: capitalize;
		}
		h2 {
			font-size: 40px;
			margin-bottom: 20px;
			position: relative;
			display: block;
		}
		.vision-list {
			margin-top: 15px;
			ul {
				overflow: hidden;
				li {
					color: $heading-color;
					font-size: 16px;
					font-weight: 600;
					font-family: $paragraph-font-family;
					position: relative;
					padding-left: 30px;
					margin-top: 10px;
					width: 50%;
					float: left;
					padding-right: 15px;
					
					i {
						font-size: 25px;
						font-weight: normal;
						position: absolute;
						left: 0;
						top: 3px;
					}
				}
			}
		}
	}
}

/*
Services Area Style
======================================================*/ 
.services-area {
	position: relative;
	overflow: hidden;
	background-color: #151449;
	z-index: 1;
	.section-title {
		span {
			color: $white-color;
		}
		h2 {
			color: $white-color;
		}
		p {
			color: $white-color;
		}
	}
	.services-shape {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
}
.single-services {
	padding: 30px;
	transition: $transition;
	position: relative;
	padding-left: 85px;
	border: 1px dotted $main-color;
	margin-bottom: 30px;
	transition: $transition;
	h3 {
		margin-bottom: 15px;
		color: $white-color;
	}
	i {
		font-size: 40px;
		color: $main-color;
		position: absolute;
		left: 30px;
		top: 30px;
		line-height: 1;
		transition: $transition;
	}
	p {
		color: $white-color;
	}
	a {
		margin-top: 20px;
		color: $white-color;
		font-size: 15px;
	}
	&:hover { 
		box-shadow: $box-shadow;
		background-color: $main-color;
		i {
			color: $white-color;
		}
		a {
			color: $white-color;
		}
	}
}

/*
Quat Area Style
======================================================*/  
.get-quat-area {
	.quat-form {
		padding: 50px;
		box-shadow: $box-shadow;
		background-color: #151449;
		overflow: hidden;
		position: relative;

		.default-btn {
			display: block;
			width: 100%;
			margin-bottom: 30px;
			font-weight: 600;
		}
		.form-control {
			&:focus {
				background-color: #f9f9f9;
			}
		}
		ul {
			line-height: 1;
			li {
				display: inline-block;
				color: $white-color;
				a {
					margin-left: 10px;
				}
			}
			.right {
				float: right;	
			}
		}
		.tabs {
			margin-bottom: 21px;
			li {
				margin-left: 0 !important;
				padding-right: 40px;
				font-size: 20px;
				color: $white-color;
				cursor: pointer;
				font-weight: 600;

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

				&:hover {
					color: $main-color;
				}
				&.current {
					color: $main-color;
				}
			}
		}
		p {
			margin-bottom: 30px;
			color: $white-color;
		}
		.ratings {
			li {
				color: $white-color;
				a {
					color: $main-color;
					&:hover {
						text-decoration: underline;
					}
				}
			}
		}
	}
	.tab {
		.tabs_item {
			display: none;
			&:first-child {
				display: block;
			}
		}
	}
	.form-group {
		margin-bottom: 30px;
	}
	.nice-select {
		float: unset;
		line-height: 29px;
		&::after {
			width: 8px !important;
			height: 8px !important;
		}
		.option {
			display: block;
		}
	}
}

/*
Counter Area Style
======================================================*/
.counter-area  {
	background-color: #f2f7fd;
	overflow: hidden;
	position: relative; 
	z-index: 1;
	.col-lg-3 {
		&:nth-child(4) {
			.single-counter {
				border-right: none;
			}
		}
	}
}
.single-counter {
	text-align: center;
	transition: $transition;
	margin-bottom: 30px;
	border-right: 1px solid #dadce0;
	position: relative;
	i {
		color: $main-color;
		font-size: 50px;
		line-height: 1;
		display: block;
		margin-bottom: 20px;
	}
	p {
		color: $main-color;
		line-height: 1;
		margin-bottom: 0;
		font-size: 18px;
	}
	h2 {
		color: $heading-color;
		line-height: 1;
		font-size: 40px;
		margin-bottom: 15px;
	}
}

/*
Achievement Area Style
======================================================*/
.achievement-area {
	padding-bottom: 130px;
	.achievement-content {
		span {
			font-size: 14px;
			color: $main-color;
			display: block;
			margin-bottom: 20px;
			text-transform: capitalize;
		}
		h2 {
			font-size: 35px;
			margin-bottom: 30px;
			position: relative;
			display: block;
		}
		.default-btn {
			margin-top: 25px;
		}
	}
	.video-img {
		position: relative;
		z-index: 1;
		&::before {
			content: "";
			position: absolute;
			top: 30px;
			right: 30px;
			width: 100%;
			height: 100%;
			border: 5px solid $heading-color;
			z-index: -1;
		}
		.video {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			justify-content: center;
			align-items: center;
			display: flex;
		}
	}
}

/*
Agent Now Area Style
======================================================*/
.agent-now-area {
	background-color: #f2f7fd; 
	position: relative;
	z-index: 1;
	.call-now {
		background-color: $heading-color;
		position: relative;
		padding: 50px;
		padding-left: 165px;
		border-radius: 10px;
		i {
			line-height: 1;
			font-size: 75px;
			position: absolute;
			top: 50px;
			left: 50px;
			color: $white-color;
		}
		p {
			line-height: 1;
			font-size: 20px;
			font-weight: 600;
			color: $white-color;
		}
		span {
			font-size: 35px;
			font-weight: 600;
			color: $white-color;
			line-height: 1;
		}
	}
	.subscribe-wrap {
		background-color: $heading-color;
		border-radius: 10px;
		padding: 40px 50px; 
		p {
			line-height: 1;
			font-size: 20px;
			font-weight: 600;
			color: #ffffff;
			margin-bottom: 20px;
		}
		.newsletter-form {
			position: relative;
			.default-btn {
				position: absolute;
				top: 0;
				right: 0;
				height: 50px;
				font-weight: 600;
			}
			.form-control {
				&:focus {
					background-color: $white-color;
				}
			}
		}
	}
	.agent-shape {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;
	}
}

/*
Testimonial Area Style
======================================================*/
.testimonial-area {
	&.bg {
		background-color: #f9fbfe;
	}
	.owl-carousel .owl-item img {
		width: unset;
		margin: auto;
	}
	.testimonial-wrap {
		&.owl-theme {
			.owl-nav {
				margin-top: 0;
				.owl-prev, .owl-next {
					background-color: #f2f7fd;
					width: 35px;
					height: 35px;
					border-radius: 50%;
					position: absolute;
					top: -20px;
					left: 0;
					transition: $transition;
					color: $main-color;
					font-size: 20px;	
					line-height: 30px; 
				}
				.owl-next {
					left: auto;
					right: 0;
				}
			}
			&:hover {
				.owl-prev {
					background-color: $main-color;
					i {
						color: $white-color;
					}
				}
				.owl-next {
					background-color: $main-color;
					i {
						color: $white-color;
					}
				}
			}
		}
		.owl-item.active.center {
			.single-client {
				background-color: $heading-color;
				h3 {
					color: $white-color;
				}
				span {
					color: $white-color;
				}
				p {
					color: $white-color;
				}
			}
		}
	}
	.single-client {
		background-color: #f2f7fd;
		box-shadow: none;
		margin-bottom: 0;
		h3 {
			color: $heading-color;
		}
		span {
			color: $main-color;
		}
		p {
			color: $body-color;
		}
		.quotes {
			opacity: 0.1;
		}
		&:hover {
			transform: translateY(0);
		}
	}
}

/*
Business Contact Area Style
======================================================*/
.business-contact-area {
	
	.row {
		background-color: $heading-color;
		border-radius: 15px;
		
	}
	.business-img img {
		border-radius: 15px;
	}
	.business-content {
		padding: 30px;
		position: relative;
		h3 {
			font-size: 30px;
			color: $white-color;
			margin-bottom: 30px;
		}
		p {
			color: $white-color;
			position: absolute;
			bottom: 33px;
			left: 35%;
			font-size: 16px;
		}
		.default-btn {
			background-color: #31abfc;
			&::before {
				background-color: $white-color !important;
			}
			&::after {
				background-color: $white-color !important;
			}
			&:hover {
				color: $main-color;
			}
		}
	}
}

/*
Blog Area Style
======================================================*/
.blog-left-sidebar {
	padding-right: 15px;
}
.blog-right-sidebar {
	padding-left: 15px;
}
.single-blog {
	margin-bottom: 30px;
	transition: $transition;
	.blog-content {
		padding: 30px;
		box-shadow: $box-shadow;
		position: relative;
		overflow: hidden;
		z-index: 1;
		background-color: $white-color;
		max-width: 340px;
		margin: -30px auto 0;
		&::before {
			content: "";
			position: absolute;
			left: -100%;
			top: 0;
			width: 50%;
			height: 100%;
			background-color: $main-color;
			transition: $transition;
			z-index: -1;
		}
		&::after {
			content: "";
			position: absolute;
			right: -100%;
			bottom: 0;
			width: 50%;
			height: 100%;
			background-color: $main-color;
			transition: $transition;
			z-index: -1;
		}
		ul {
			line-height: 1;
			margin-bottom: 15px;
			li {
				display: inline-block;
				color: #78a9e3;
				border-right: 1px solid #78a9e3;
				line-height: 1;
				padding: 0 10px;
				transition: $transition;
				&:last-child {
					border-right: none;
					padding-right: 0;
				}
				&:first-child {
					padding-left: 0;
				}
				a {
					color: #78a9e3;
					&:hover {
						color: $main-color;
					}
				}
			}
		}
		h3 {
			margin-bottom: 20px;
			transition: $transition;
			line-height: 1.5;
		}
		p {
			margin-bottom: 20px;
			transition: $transition;
		}
		.read-more {
			&:hover {
				i {
					color: $white-color;
				}
			}
		}
	}
	&:hover {
		transform: translateY(-5px);
		.blog-content {
			ul {
				li {
					color: $white-color;
					a {
						color: $white-color;
					}
				}
			}
			h3 {
				color: $white-color;
			}
			p {
				color: $white-color;
			}
			.read-more {
				color: $white-color;
			}
			&::before {
				left: 0;
			}
			&::after {
				right: 0;
			}
		}
	}
}

/*
Footer Top Area Style
======================================================*/ 
.footer-top-area {
	background-image: url(/images/footer-bg.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
	position: relative;
	background-attachment: fixed;
	z-index: 1;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #080f2b;
		z-index: -1;
		opacity: 0.9;
	}
}
.single-widget {
	margin-bottom: 30px;
	img {
		margin-bottom: 20px;
	}
	h3 {
		color: $white-color;
		font-size: 22px;
		margin-bottom: 30px;
		position: relative;
		padding-bottom: 15px;
		border-bottom: 1px solid #48475a;
		&::before {
			content: "";
			position: absolute;
			bottom: -1px;
			left: 0;
			width: 80px;
			height: 2px;
			background-color: $white-color;
		}
	}
	p {
		margin-bottom: 0;
		color: $white-color;
	}
	ul {
		li {
			color: #c0cade;
			margin-bottom: 8px;
			font-size: 15px;
			&:last-child {
				margin-bottom: 0;
			}
			span {
				color: $white-color;
			}
			a {
				color: $white-color;
				transition: $transition;
				i {
					display: inline-block;
					margin-right: 2px;
					font-size: 14px;
				}
				&:hover {
					color: $main-color;
					transform: translateX(2px);
				}
			}
		}
	}
	.social-area {
		margin-top: 20px;
		ul {
			line-height: 1;
			li {
				display: inline-block;
				a {
					margin-right: 5px;
					width: 30px;
					height: 30px;
					line-height: 32px;
					background-color: $main-color;
					border-radius: $border-radius;
					text-align: center;
					i {
						color: #eeeeee;
						transition: $transition;
						margin-right: 0;
					}
					&:hover {
						border-color: $main-color;
						transform: translateX(-2px);
						i {
							color: $white-color;
						}
					}
				}
			}
		}
	}
	.footer-btn {
		margin-top: 20px;
		li {
			display: inline-block;
			max-width: 45%;
			margin-right: 10px;
			&:last-child {
				margin-right: 0;
			}
		}
	}
	&.contact {
		ul {
			li {
				position: relative;
				padding-left: 30px;
				a {
					position: relative;
					color: #c0cade;
					i {
						position: absolute;
						top: 0;
						left: 0;
						color: $white-color;
						font-size: 15px;
					}
					span {
						display: block;
						font-weight: 600;
					}
				}
				i {
					position: absolute;
					left: 0;
					top: 0;
					color: $white-color;
					font-size: 15px;
				}
				span {
					display: block;
					font-weight: 600;
				}
			}
		}
	}
	.newsletter-p {
		margin-bottom: 20px;
	}
	.default-btn {
		display: block;
		width: 100%;
		margin-top: 20px;
	}
	.form-control {
		&:focus {
			background-color: $white-color;
		}
	}
	#validator-newsletter {
		color: #dc3545;
		text-align: center;
		margin-top: 5px;
	}
}

/*
Footer Bottom Area Style
======================================================*/ 
.footer-bottom-area {
	background-color: $main-color;
	padding: 20px 0;
	.copy-right {
		text-align: center;
		p {
			text-transform: capitalize;
			margin-bottom: 0;
			color: $white-color;
			a {
				color: $white-color;
				font-weight: bold;
			}
		}
	}
}


/*====================================================
HOME PAGE TWO STYLE
======================================================*/


/*
Nav Style Two
======================================================*/
.navbar-area {
	&.nav-style-two {
		.main-nav {
			nav {
				.navbar-nav {
					.nav-item {
						a {
							color: $white-color !important;
							&:hover {
								color: $main-color !important;
							}
							&.active {
								color: $main-color !important;
							}
						}
					}
				}
			}
		}
	}
}

/*
Main Banner Area Two
======================================================*/
.main-banner-area-two {
	position: relative;
	background-image: url(/images/banner/banner-img-2.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;
	z-index: 1;
	overflow: hidden;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(to right, #03051e , rgba(1, 45, 111,0.8));
	}
	.banner-text {
		position: relative;
		padding-top: 100px;
		max-width: 540px;
		margin-left: auto;
		span {
			font-size: 16px;
			color: $white-color;
			margin-bottom: 20px;
			display: block;
			font-weight: 600;
		}
		h1 {
			font-size: 45px;
			margin-bottom: 25px;
			color: $white-color;
		}
		p {
			font-size: 16px;
			margin-bottom: 35px;
			color: $white-color;
		}
	}
	.banner-img {
		background-image: url(/images/banner/banner-img-right.jpg);
		background-position: right;
		background-repeat: no-repeat;
		background-size: cover;
		height: 100vh;
		
		border-radius: 50% 0 0  50%;
		position: relative;
		
	}
}

/*
Choose Us Area Two
======================================================*/
.choose-us-area-two {
	.single-choose {
		border: none;
		padding: 30px 20px;
		span {
			background-color: $white-color;
			box-shadow: $box-shadow;
			width: 100px;
			height: 100px;
			line-height: 100px;
			border-radius: 50%;
		}
	}
}

/*
Service Area Two Style
======================================================*/
.service-area-two {
	.single-service {
		text-align: center;
		
		margin-bottom: 30px; 
		transition: $transition;
		img {
			border-radius: $border-radius $border-radius 0 0;
		}
		.service-content {
			padding: 30px;
			padding-top: 60px;
			background-color: $white-color;
			box-shadow: $box-shadow;
			position: relative;
			.icon-style {
				font-size: 35px;
				background-color: $main-color;
				line-height: 70px;
				width: 70px;
				height: 70px;
				display: inline-block;
				border-radius: 50%;
				color: $white-color;
				position: absolute;
				top: -36px;
				left: 0;
				right: 0;
				margin: auto;
			}
			h3 {
				margin-bottom: 15px;
			}
			p {
				margin-bottom: 20px;
			}
			a {
				color: $white-color;
				line-height: 1;
				z-index: 1;
				display: inline-block;
				width: 30px;
				height: 30px;
				line-height: 30px;
				background-color: $main-color;
				border-radius: 50%;
				i {
					font-size: 25px;
					position: relative;
					line-height: 30px;
					top: 1px;
					left: 1px;
				}
			}
		}
		&:hover {
			transform: translateX(-5px);
			.service-content {
				.icon-style {
					animation: bounce 1s linear;
				}
			}
		}

		&.mb-65 {
			margin-bottom: 65px;
		}
	}

	&.pb-35 {
		padding-bottom: 35px;
	}
}

/*
Chooses Us Area Two Style
======================================================*/
.chooses-us-area-two {
	background-image: url(../images/choose-bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
	.section-title {
		margin-left: unset;
		margin-right: auto;
		text-align: left;
		max-width: 460px;
		span {
			color: $white-color;
		}
		h2 {
			color: $white-color;
		}
		p {
			color: $white-color;
		}
	}
	.choose-us-wrap {
		max-width: 460px;
		ul {
			li {
				margin-bottom: 30px;
				position: relative;
				padding-left: 75px;
				i {
					font-size: 50px;
					color: #2f89fc;
					line-height: 1;
					position: absolute;
					left: 0;
					top: 2px;
				}
				h3 {
					color: $white-color;
				}
				p {
					color: $white-color;
				}
			}
		}
	}
}

/*
Counter Area Two Style
======================================================*/
.counter-area-two {
	background-image: url(/images/counter-bg.jpg);
	background-position: center center;
	background-size: cover;
	height: 100%;
	position: relative;
	.col-lg-3 {
		&:nth-child(4) {
			.single-counter {
				border-right: none;
			}
		}
	}
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: $heading-color;
		opacity: 0.9;
	}
	.single-counter {
		h2 {
			color: $white-color;
		}
		p {
			color: $white-color;
		}
	}
}

/*
Testimonial Wrap Two Style
======================================================*/
.testimonial-wrap-two {
	&.owl-theme {
		.owl-nav {
			margin-top: 0;
			.owl-prev, .owl-next {
				background-color: #f2f7fd;
				width: 35px;
				height: 35px;
				border-radius: 50%;
				position: absolute;
				top: -50px;
				left: 0;
				transition: $transition;
				color: $main-color;
				font-size: 20px;	
				line-height: 30px; 
			}
			.owl-next {
				left: auto;
				right: 0;
			}
		}
		&:hover {
			.owl-prev {
				background-color: $main-color;
				i {
					color: $white-color;
				}
			}
			.owl-next {
				background-color: $main-color;
				i {
					color: $white-color;
				}
			}
		}
	}

	.single-client {
		position: relative;
		text-align: left;
		padding: 30px;
		padding-left: 160px;
		margin: 0;
		img {
			position: unset;
			border-radius: 4px;
			display: inline-block;
		}
		.client-text {
			position: absolute;
			top: 20px;
			left: 30px;
			text-align: center;
			h3 {
				margin-top: 45px;
				margin-bottom: 0;
				font-size: 18px;
			}
		}
		.quotes {
			position: absolute;
			bottom: 10px;
			right: 15px;
			line-height: 1;
			color: #5e5e82;
			opacity: 0.5;
			width: unset;
			height: unset;
			font-size: 40px;
			justify-content: unset;
			align-items: unset;
			display: unset;
			top: unset;
			left: unset;
			transform: rotate(180deg);
		}
	}
}

/*
Any Contact Area Style
======================================================*/
.any-contact-area {
	.row {
		background-color: #262566;
		border-radius: 10px;
		margin-left: 5px;
		margin-right: 5px;
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.contact-text {
		padding: 30px;
		h3 {
			color: $white-color;
			margin: 0;
		}
	}
	.contact-call {
		padding: 30px;
		h3 {
			color: $white-color;
			i {
				color: $white-color;
				margin-right: 10px;
			}
		}
	}
}

/*====================================================
HOME PAGE THREE STYLE
======================================================*/

/*
Header Area Three Style
======================================================*/
.header-area-three {
	.top-header-area {
		background-color: rgba(255, 255, 255, 0.5);
		.header-content-right li a:hover {
			color: $white-color;
		}
	}
	.navbar-area {
		.navbar {
			background-color: #151447 !important;
			max-width: 1120px;
			margin: 20px auto 0;
			position: relative;
			&::after {
				content: "";
				position: absolute;
				top: 10px;
				left: -10px;
				width: 100%;
				height: 100%;
				background-color: #888894;
				z-index: -1;
				opacity: 0.5;
			}
		}
		&.is-sticky {
			.navbar {
				margin-top: 0;
				max-width: 100%;
				&::after {
					display: none;
				}
			}
		}
	}
}

/*
Hero Slider Area Style
======================================================*/ 
.hero-slider-area {
	.slider-item {
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		height: 100vh;
		overflow: hidden;
		position: relative;
		z-index: 1;
		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: $heading-color;
			opacity: 0.8;
			z-index: -1;
		}
		&.slider-item-bg-1 {
			background-image: url(../images/hero-slider/hero-slider1.jpg);
		}
		&.slider-item-bg-2 {
			background-image: url(../images/hero-slider/hero-slider2.jpg);
		}
		&.slider-item-bg-3 {
			background-image: url(../images/hero-slider/hero-slider3.jpg);
		}
		&.slider-item-bg-4 {
			background-image: url(../images/hero-slider/hero-slider4.jpg);
		}
		.slider-text {
			text-align: center;
			position: relative;
			max-width: 690px;
			margin: 80px auto 0;
			z-index: 1;
			span {
				color: $white-color;
				font-size: 15px;
				display: block;
				margin-bottom: 10px;
			}
			h1 {
				font-size: 60px;
				color: $white-color;
				margin-bottom: 30px;
			}
			p {
				color: $white-color;
				font-size: 16px;
				margin-bottom: 35px;
			}
			.slider-btn {
				.default-btn {
					margin: 0 20px;
					&.white {
						color: $white-color;
					}
				}
			}   
		}
	}
	.owl-item {
		&.active {
			.slider-text {
				&.overflow-hidden {
					overflow: hidden;
				}
				&.one {
					span {
						animation: 1s .1s fadeInUpBig both;
					}
					.video-btn-animat  {
						animation: 1s .1s fadeInUpBig both;
					}
					h1 {
						animation: 2s .2s fadeInUpBig both;
					}
					p {
						animation: 3s .3s fadeInUpBig both;
					}
					.slider-btn {
						animation: 4s .4s fadeInUpBig both;
					}
				}
				&.two {
					span {
						animation: 2s .2s fadeInDownBig both;
					}
					.video-btn-animat  {
						animation: 2s .2s fadeInDownBig both;
					}
					h1 {
						animation: 2s .2s fadeInLeft both;
					}
					p {
						animation: 2s .2s fadeInRight both;
					}
					.slider-btn {
						animation: 2s .2s fadeInUpBig both;
					}
				}
			}
		}
	}
	.owl-theme {
		.owl-dots {
			margin-top: 0 !important;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20px;
			.owl-dot {
				span {
					width: 30px;
					height: 10px;
					transition: $transition;
					background-color: #bdbdbf;
				}
				&.active {
					span {
						background-color: $main-color;
						width: 40px;
					}
				}
				&:hover {
					span {
						background-color: $main-color;
					}
				}
			}
		}
	}
}

/*
Choose Us Area Three
======================================================*/
.choose-us-area-three {
	.single-choose {
		border: none;
		background-color: #d5e8fc;
		span {
			background-color: $white-color;
			box-shadow: $box-shadow;
			width: 100px;
			height: 100px;
			line-height: 100px;
			border-radius: 50%;
		}
		&:hover {
			background-color: $heading-color;
		}
	}
}

/*
About Area Three
======================================================*/
.about-area-three {
	.about-img-3 {
		float: unset;
		img {
			border-radius: $border-radius;
		}
	}
}

/*
Services Area Three
======================================================*/
.services-area-three {
	.single-choose {
		border: none;
		border-radius: 15px;
		background-color: $heading-color;
		span {
			background-color: $white-color;
			box-shadow: $box-shadow;
			width: 60px;
			height: 60px;
			line-height: 60px;
			border-radius: 50%;
			border: 1px dotted $main-color;
			font-size: 30px;
		}
		h3 {
			color: $white-color;
		}
		p {
			color: $white-color;
		}
		&:hover {
			background-color: $heading-color;
		}
	}
}

/*
Get Quat Area Style
======================================================*/
.get-quat-area-three {
	background-image: url(/images/quote-bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
	position: relative;
	z-index: 1;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: $heading-color;
		opacity: 0.9;
	} 
	.get-quat-content {
		.section-title {
			text-align: left;
			max-width: unset;
			h2 {
				color: $white-color;
			}
			p {
				color: $white-color;
			}
		}
		ul {
			li {
				position: relative;
				padding-left: 80px;
				margin-bottom: 30px;
				&:last-child {
					margin-bottom: 0;
				}
				i {
					color: $white-color;
					display: inline-block;
					width: 60px;
					height: 60px;
					line-height: 60px;
					text-align: center;
					border-radius: $border-radius;
					font-size: 30px;
					background-color: $main-color;
					position: absolute;
					left: 0;
					top: -2px;
				}
				h3 {
					color: $white-color;
				}
				p {
					color: $white-color;
				}
			}
		}
	}
} 

.work-area {
	overflow: hidden;
}

/*====================================================
HOME PAGE FOUR STYLE
======================================================*/


/*
Nav Style Four
======================================================*/
.nav-style-four {
	.navbar-area {
		.main-nav {
			background-color: #ffffff !important;
		}
		&.is-sticky {
			.main-nav nav .navbar-nav .nav-item a {
				color: $heading-color;
			}
		}
	}
}


/*==================================================== 
INNER PAGE STYLE
======================================================*/


/* 
Page Title Area Style
=====================================================*/
.page-title-area {
	position: relative;
	overflow: hidden;
	z-index: 1;
	padding-top: 240px;
	padding-bottom: 150px;
	text-align: center;
	background-color: #31306b;
	z-index: 1;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 50%;
		height: 100%;
		background-color: #050b2a;
		z-index: -1;
		animation: 5s fadeInLeft both;
	}
	&::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 50%;
		height: 100%;
		background-color: #050b2a;
		animation: 5s fadeInRight both;
		z-index: -1;
	}
	.page-title-content {
		h2 {
			margin-bottom: 15px;
			color: $white-color;
			font-size: 40px;
			font-weight: 700;
		}
		ul {
			padding-left: 0;
			list-style-type: none;
			margin-top: 10px;
			margin-bottom: 0;
			li {
				display: inline-block;
				position: relative;
				font-size: 15px;
				font-weight: 500;
				padding-right: 10px;
				padding-left: 10px;
				color: $white-color;
				&::before {
					content: "";
					position: absolute;
					top: 12px;
					right: -3px;
					background-color: $white-color;
					width: 5px;
					height: 5px;
					border-radius: 50%;
				}
				&:last-child {
					&::before {
						display: none;
					}
				}
				a {
					color: $white-color;
					&:hover {
						color: $white-color;
					}
				}
			}
		}
	}
}

/*
Sign In & Log In  Area Style
=====================================================*/
.user-area-all-style {
	position: relative;
	z-index: 1;
	.contact-form-action {
		background-color: $white-color;
		border-radius: 4px;
		box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
		padding: 40px;
		max-width: 570px;
		margin: auto;
		.form-heading {
			margin-bottom: 33px;
			.form-title {
				font-size: 35px;
				color: #233d63;
				margin-bottom: 10px;
				text-transform: capitalize;
			}
			.form-desc {
				font-size: 18px;
				color: #677286;
				font-weight: 500;
			}
			.reset-desc {
				line-height: 30px;
				margin-top: 15px;
				a {
					color: $main-color;
				}
			}
			.reset-desc {
				font-size: 16px;
				a {
					font-weight: 600;
				}
			}
		}
		form {
			.submit-btn {
				margin-top: 24px;
			}
			.default-btn {
				font-size: 14px;
				padding: 15px 40px;
				margin-bottom: 30px;
				font-weight: 600;
				&.btn-two {
					display: table;
					margin: 0 auto 0; 
					padding: 15px 40px;
				}
			}
			.col-lg-4 {
				
				&:nth-child(1) .default-btn {
					background-color: #FF5733;
				}
				&:nth-child(2) .default-btn {
					background-color: #3955bc;
					display: table;
					margin: 0 auto 30px;
				}
				&:nth-child(3) .default-btn {
					background-color: $main-color;
					float: right;
				}
			}
			.reset-btn {
				margin-top: 0;
			}
			.form-condition {
				margin-bottom: 20px;
				.agree-label {
					a {
						color: $main-color;
						padding-left: 5px;
					}
				}
			}
			.form-group {
				margin-bottom: 30px;
			}
		}
		.account-desc {
			margin: 25px auto 0;
			display: table;
			a {
				color: $main-color;
				margin-left: 10px;
			}
		}
		#chb1 {
			position: relative;
			top: 1px;
			margin-right: 10px;
		}
		#chb2 {
			position: relative;
			top: 1px;
			margin-right: 10px;
		}
		.forget {
			float: right;
			color: $main-color;
		}
		.now-register {
			float: right;
			margin-bottom: 30px;
			a {
				color: $main-color;
				padding-left: 5px;
			}
		}
	}
}

/* 
Coming Soon Area Style
=====================================================*/
.coming-soon-area {
	position: relative;
	height: 100vh;
	z-index: 1;
	background-color: $heading-color;
	overflow: hidden;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: -5%;
		width: 110%;
		height: 100%;
		opacity: 1;
		z-index: -1;
		background-color: #091c29;
		transform: rotate(45deg);
	}
	.coming-soon-content {
		text-align: center;
		max-width: 750px;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		z-index: 2;
		h1 {
			margin-bottom: 0;
			color: $white-color;
			font-size: 60px;
			margin-top: -18px;
		}
		p {
			color: #f3f3f3;
			font-size: 16px;
			max-width: 600px;
			margin-top: 15px;
			margin-bottom: 0;
			margin-left: auto;
			margin-right: auto;
		}
		#timer {
			margin-top: 30px;
			div {
				display: inline-block;
				color: $white-color;
				position: relative;
				margin-left: 35px;
				margin-right: 35px;
				font-size: 45px;
				font-weight: 700;
				span {
					display: block;
					text-transform: capitalize;
					margin-top: -15px;
					font-size: 16px;
					font-weight: normal;
				}
				&:last-child {
					margin-right: 0;
					&::before {
						display: none;
					}
				}
				&:first-child {
					margin-left: 0;
				}
				&::before {
					content: "";
					position: absolute;
					right: -50px;
					top: -10px;
					font-size: 70px;
					color: $white-color;
				}
			}
		}
		.newsletter-form {
			position: relative;
			max-width: 500px;
			margin-left: auto;
			margin-right: auto;
			margin-top: 50px;
			.input-newsletter {
				display: block;
				width: 100%;
				height: 60px;
				border: none;
				background-color: rgba(255, 255, 255, 0.3);
				padding-left: 15px;
				color: $white-color;
				outline: 0;
				transition: 0.5s;
				border-radius: 10px;
				&::placeholder {
					color: $white-color;
				}
				&:focus {
					border-color: $main-color;
				}
			}
			button {
				position: absolute; 
				right: 0;
				top: 0;
				height: 60px;
				padding: 0 30px;
				text-transform: uppercase;
				outline: 0;
				color: $white-color;
				transition: 0.5s;
				font-weight: 500;
				font-size: 15px;
				cursor: pointer;
				&::after {
					border-radius: 0;
				}
				&::before {
					border-radius: 0;
				}
				&:hover {
					color: $white-color;
					background-color: $main-color;
				}
			}
			#validator-newsletter {
				color: $white-color;
				font-size: 14px;
				position: absolute;
				left: 0;
				right: 0;
				bottom: -30px;
				margin: 0 auto;
			}
		}
	}
} 

/*
404 Error Area Style
=====================================================*/
.error-area {
	padding: 50px 0;
	height: 100vh;  
    text-align: center;
    position: relative;
    z-index: 1;
	background-color: $white-color;
    &::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 1;
		z-index: -1;
		background-color: $main-color;
		clip-path: polygon(0 0, 0% 100%, 100% 100%);
	}
    &::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 1;
		z-index: -1;
		background-color: $heading-color;
		clip-path: polygon(0 0, 100% 0, 100% 100%);
	}
    .error-content-wrap {
		h1 {
			font-size: 300px;
			line-height: 1;
			color: $white-color;
			span {
				color: #ff0000;
			}
		}
        z-index: 1;
        position: relative;
        h3 {
            margin: 30px 0 0;
			position: relative;
			color: #ff0000;
        }
        p {
			margin: 20px 0 20px;
			font-size: 19px;
			color: $white-color;
        }
    }
}

/*
Service Details Area Style
=====================================================*/
.service-sidebar-area {
	padding-right: 15px;
	.service-details-title {
		background-color: $main-color;
		color: $white-color;
		padding: 15px 20px;
		margin: 0;
	}
	.service-card {
		margin-bottom: 30px;
		background-color: $white-color;
		box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
	}
	.service-list {
		ul {
			li {
				border-bottom: 1px dashed #eeeeee;
				padding: 15px 20px;
				font-weight: 500;
				transition: all 0.5s;
				position: relative;
				&:last-child {
					border-bottom: none;
				}
				a {
					color: $heading-color;
					display: block;
				}
				i {
					position: absolute;
					right: 20px;
					top: 11px;
					width: 30px;
					height: 30px;
					line-height: 30px;
					background-color: $main-color;
					border-radius: 50%;
					color: #ffffff;
					font-size: 20px;
					text-align: center;
					transition: all 0.5s;
				}
				&:hover {
					background-color: $main-color;
					color: $white-color;
					i {
						background-color: $white-color;
						color: $main-color;
					}
					a {
						color: $white-color;
					}
				}
			}
		}
	}
	.service-faq {
		.faq-accordion {
			position: unset;
			padding: 0;
			.accordion {
				.accordion-item {
					box-shadow: none;
				}
				.accordion-title {
					font-size: 15px;
					font-weight: 600;
					span {
						top: 11px;
					}
				}
			}
		}
	}
	.paint {
		margin-bottom: 15px;
	}
}
.service-details-wrap {
	.mb-30 {
		margin-bottom: 30px;
	}
	.service-img {
		margin-bottom: 30px;
	}
	ul {
		margin-top: 30px;
		margin-bottom: 30px;
		li {
			font-weight: 600;
			color: $heading-color;
			font-size: 14px;
			padding-left: 35px;
			position: relative;
			i {
				width: 25px;
				height: 25px;
				line-height: 25px;
				background-color: $main-color;
				border-radius: 50%;
				color: $white-color;
				font-size: 20px;
				text-align: center;
				position: absolute;
				top: 4px;
				position: absolute;
				top: 0px;
				left: 0;
			}
		}
	}
	.car-service-list-wrap {
		margin-top: 20px;
		margin-bottom: 35px;
		.car-service-list {
			ul {
				margin: 0;
				li {
					margin-bottom: 15px;
					font-size: 13px;
					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}
	.list-unstyled {
		margin: 0;
		li {
			color: #dc3545;
			padding-left: 0 !important;
			font-size: 14px;
			font-weight: 400;
			margin-top: 10px;
		}
	}
	#msgSubmit {
		margin-top: 30px;
	}
	.ask-question {
		text-align: center;
		margin-top: 30px;
		h3 {
			font-size: 25px;
			margin-bottom: 30px;
		}
		.form-group {
			margin-bottom: 30px;
		}
		padding: 30px;
		box-shadow: $box-shadow;
		.default-btn {
			margin: auto;
			display: table;
		}
	}
}

/*
Blog Details Area Style
=====================================================*/
.blog-details-area {
	.blog-details-desc {
		.article-image {
			position: relative;
			background-color: #f5f5f5;
		}
		.article-content {
			margin-top: 30px;
			.entry-meta {
				margin-bottom: -10px;
				ul {
					padding-left: 0;
					margin-bottom: 0; 
					list-style-type: none;
					li {
						position: relative;
						display: inline-block;
						color: $main-color;
						margin-right: 25px;
						font-size: 14px;
						span {
							display: inline-block;
							color: $main-color;
							font-weight: 500;
							margin-right: 10px;
						}
						a {
							display: inline-block;
							color: #666666;
							&:hover {
								color: $main-color;
							}
						}
						i {
							color: $main-color;
							margin-right: 2px;
						}
						&::before {
							content: '';
							position: absolute;
							top: 11px;
							right: -15px;
							width: 6px;
							height: 1px;
							background: $main-color;
						}
						&:last-child {
							margin-right: 0;
							&::before {
								display: none;
							}
						}
					}
				}
			}
			h3 {
				margin-bottom: 13px;
				margin-top: 25px;
				font-size: 30px;
			}
			.wp-block-gallery.columns-3 {
				padding-left: 0;
				list-style-type: none;
				display: flex;
				flex-wrap: wrap;
				margin-right: -10px;
				margin-left: -10px;
				margin-bottom: 30px;
				margin-top: 30px;
				li {
					flex: 0 0 33.3333%;
					max-width: 33.3333%;
					padding-right: 10px;
					padding-left: 10px;
					figure {
						margin-bottom: 0;
					}
				}
			}
		}
		.article-footer {
			display: flex;
			flex-wrap: wrap;
			margin-top: 30px;
			.article-tags {
				flex: 0 0 50%;
				max-width: 50%;
				span {
					display: inline-block;
					color: $main-color;
					font-size: 20px;
					margin-right: 5px;
					position: relative;
					top: 4px;
				}
				a {
					display: inline-block;
					color: #666666;
					font-weight: 600;
					&:hover {
						color: $main-color;
					}
				}
			}
			.article-share {
				flex: 0 0 50%;
				max-width: 50%;
				.social {
					padding-left: 0;
					list-style-type: none;
					text-align: right;
					margin-bottom: 0;
					li {
						display: inline-block;
						span {
							display: inline-block;
							margin-right: 2px;
							font-weight: 500;
							color: #666666;
						}
						a {
							display: block;
							color: $white-color;
							width: 32px;
							height: 32px;
							line-height: 33px;
							border-radius: 50%;
							background-color: $main-color;
							text-align: center;
							font-size: 14px;
							&:hover {
								animation: rubberBand 1s linear;
							}
						}
					}
				}
			}
		}
		.post-navigation {
			margin-top: 30px;
		}
	}
	blockquote {
		overflow: hidden;
		background-color: #f7f7f7;
		padding: 50px !important;
		position: relative;
		z-index: 1;
		margin-bottom: 20px;
		margin-top: 20px;
		border-radius: $border-radius;
		p {
			color: $heading-color;
			line-height: 1.6;
			margin-bottom: 0;
			font-style: italic;
			font-weight: 600;
			font-size: 17px !important;
			text-align: center;
		}
		cite {
			display: none;
		}
		&::before {
			color: $main-color;
			content: "\ed67";
			position: absolute;
			left: 50px;
			top: -50px;
			z-index: -1;
			font-family:'boxicons';
			font-size: 140px;
			font-weight: 900;
			opacity: 0.2;
		}
		&::after {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 3px;
			background-color: $main-color;
			margin-top: 20px;
			margin-bottom: 20px;
		}
	}
	.post-navigation {
		border-top: 1px solid #eeeeee;
		border-bottom: 1px solid #eeeeee;
		padding-top: 20px;
		padding-bottom: 20px;
		.navigation-links {
			display: flex;
			flex-wrap: wrap;
			.nav-previous {
				flex: 0 0 50%;
				max-width: 50%;
				a {
					i {
						margin-right: 0;
						font-size: 20px;
						position: relative;
						top: 4px;
					}
				}
			}
			.nav-next {
				flex: 0 0 50%;
				max-width: 50%;
				text-align: right;
				a {
					i {
						margin-left: 0;
						font-size: 20px;
						position: relative; 
						top: 4px;
					}
				}
			}
			div {
				a {
					display: inline-block;
					font-weight: 600;
					color: $heading-color;
					&:hover {
						color: $main-color;
					}
				}
			}
		}
	}
	.comments-area {
		padding: 25px;
		margin-top: 30px;
		box-shadow: 0px 0px 29px 0px rgba(102, 102, 102, 0.08);
		background-color: $white-color;
		.comments-title {
			position: relative;
			margin-bottom: 30px;
			line-height: initial;
			font-size: 22px;
			&::before {
				content: '';
				height: 25px;
				width: 3px;
				left: -25px;
				position: absolute;
				background: $main-color;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		ol {
			padding: 0;
			margin: 0;
			list-style-type: none;
		}
		ul {
			padding: 0;
			margin: 0;
			list-style-type: none;
		}
		.comment-list {
			padding: 0;
			margin: 0;
			list-style-type: none;
		}
		.children {
			margin-left: 40px;
		}
		.comment-body {
			border-bottom: 1px solid #eeeeee;
			padding-left: 65px;
			font-size: 14px;
			margin-bottom: 20px;
			padding-bottom: 20px;
			.reply {
				margin-top: 15px;
				a {
					border: 1px solid #ded9d9;
					color: $heading-color;
					display: inline-block;
					padding: 5px 20px;
					border-radius: 30px;
					text-transform: uppercase;
					position: relative;
					z-index: 1;
					font-size: 13px;
					font-weight: 600;
					&:hover {
						color: $white-color;
						background-color: $main-color;
						border-color: $main-color;
					}
				}
			}
		}
		.comment-meta {
			margin-bottom: .8em;
		}
		.comment-author {
			font-size: 16px;
			margin-bottom: 0.4em;
			position: relative;
			z-index: 2;
			.avatar {
				height: 50px;
				left: -65px;
				position: absolute;
				width: 50px;
				border-radius: 50%;
			}
			.fn {
				font-weight: 600;
				color: $heading-color;
				font-size: 18px;
			}
			.says {
				display: none;
			}
		}
		.comment-metadata {
			color: #666666;
			letter-spacing: 0.01em;
			text-transform: uppercase;
			font-size: 13px;
			font-weight: 500;
			a {
				color: #666666;
				font-size: 11px;
				&:hover {
					color: $main-color;
				}
			}
		}
		.comment-content {
			p {
				font-size: 14px;
			}
		}
		.comment-respond {
			margin-top: 30px;
			.comment-reply-title {
				margin-bottom: 15px;
				position: relative;
				font-size: 22px;
				&::before {
					content: '';
					height: 25px;
					width: 3px;
					left: -25px;
					position: absolute;
					background: $main-color;
					top: 50%;
					transform: translateY(-50%);
				}
				#cancel-comment-reply-link {
					display: inline-block;
				}
			}
			.comment-form {
				overflow: hidden;
			}
			.comment-form-comment {
				margin-bottom: 30px;
				float: left;
				width: 100%;
			}
			label {
				display: block;
				font-weight: 500;
				color: $heading-color;
				margin-bottom: 5px;
			}
			
			input[type="datetime-local"] {
				display: block;
				width: 100%;
				background-color: #f7f7f7;
				border: 1px solid #eeeeee;
				padding: 0.625em 0.7375em;
				outline: 0;
				transition: 0.5s;
				&:focus {
					border-color: $main-color;
				}
			}
			input[type="week"] {
				display: block;
				width: 100%;
				background-color: #f7f7f7;  
				border: 1px solid #eeeeee;
				padding: 0.625em 0.7375em;
				outline: 0;
				transition: 0.5s;
				&:focus {
					border-color: $main-color;
				}
			}
			input[type="month"] {
				display: block;
				width: 100%;
				background-color: #f7f7f7;
				border: 1px solid #eeeeee;
				padding: 0.625em 0.7375em;
				outline: 0;
				transition: 0.5s;
				&:focus {
					border-color: $main-color;
				}
			}
			input[type="text"] {
				display: block;
				width: 100%;
				background-color: #f7f7f7;
				border: 1px solid #eeeeee;
				padding: 0.625em 0.7375em;
				outline: 0;
				transition: 0.5s;
				&:focus {
					border-color: $main-color;
				}
			}
			input[type="email"] {
				display: block;
				width: 100%;
				background-color: #f7f7f7;
				border: 1px solid #eeeeee;
				padding: 0.625em 0.7375em;
				outline: 0;
				transition: 0.5s;
				&:focus {
					border-color: $main-color;
				}
			}
			input[type="url"] {
				display: block;
				width: 100%;
				background-color: #f7f7f7;
				border: 1px solid #eeeeee;
				padding: 0.625em 0.7375em;
				outline: 0;
				transition: 0.5s;
				&:focus {
					border-color: $main-color;
				}
			}
			input[type="password"] {
				display: block;
				width: 100%;
				background-color: #f7f7f7;
				border: 1px solid #eeeeee;
				padding: 0.625em 0.7375em;
				outline: 0;
				transition: 0.5s;
				&:focus {
					border-color: $main-color;
				}
			}
			input[type="search"] {
				display: block;
				width: 100%;
				background-color: #f7f7f7;
				border: 1px solid #eeeeee;
				padding: 0.625em 0.7375em;
				outline: 0;
				transition: 0.5s;
				&:focus {
					border-color: $main-color;
				}
			}
			input[type="tel"] {
				display: block;
				width: 100%;
				background-color: #f7f7f7;
				border: 1px solid #eeeeee;
				padding: 0.625em 0.7375em;
				outline: 0;
				transition: 0.5s;
				&:focus {
					border-color: $main-color;
				}
			}
			input[type="number"] {
				display: block;
				width: 100%;
				background-color: #f7f7f7;
				border: 1px solid #eeeeee;
				padding: 0.625em 0.7375em;
				outline: 0;
				transition: 0.5s;
				&:focus {
					border-color: $main-color;
				}
			}
			textarea {
				display: block;
				width: 100%;
				background-color: #f7f7f7; 
				border: 1px solid #eeeeee;
				padding: 0.625em 0.7375em;
				outline: 0;
				transition: 0.5s;
				&:focus {
					border-color: $main-color;
				}
			}
			.comment-form-author {
				float: left;
				width: 50%;
				padding-right: 10px;
				margin-bottom: 20px;
			}
			.comment-form-email {
				float: left;
				width: 50%;
				padding-left: 12px;
				margin-bottom: 20px;
			}
			.comment-form-url {
				float: left;
				width: 100%;
				margin-bottom: 20px;
			}
			.comment-form-cookies-consent {
				width: 100%;
				float: left;
				position: relative;
				padding-left: 20px;
				margin-bottom: 20px;
				input {
					position: absolute;
					left: 0;
					top: 6px;
				}
				label {
					display: inline-block;
					margin: 0;
					color: #666666;
					font-weight: normal;
				}
			}
			.form-submit {
				float: left;
				width: 100%;
				input {
					background: $main-color;
					border: none;
					color: $white-color;
					padding: 14px 30px 12px;
					display: inline-block;
					cursor: pointer;
					outline: 0;
					border-radius: 0;
					text-transform: capitalize;
					transition: 0.5s;
					font-weight: 600;
					font-size: 14px;

					&:hover {
						color: $white-color;
						background-color: $heading-color;
					}
					&:focus {
						color: $white-color;
						background-color: $main-color;  
					}
				}
			}
		}
	}
	
	/*
	Sidebar Widget Area Style
	================================*/
	.widget-area {
		.widget {
			margin-top: 35px;
			background-color: $white-color;
			box-shadow: 0px 0px 29px 0px rgba(102, 102, 102, 0.08);
			.post-wrap {
				padding: 20px;
			}
			&:first-child {
				margin-top: 0;
			}
			.widget-title {
				text-transform: capitalize;
				position: relative;
				font-size: 20px;
				margin-bottom: 0;
				background-color: #ececec;
				padding: 10px 20px;
				color: $heading-color;
				position: relative;
				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 2px;
					height: 100%;
					background-color: $main-color;
				}
			}
		}
		.widget_search {
			form {
				position: relative;
				label {
					display: block;
					margin-bottom: 0;
				}
				.screen-reader-text {
					display: none;
				}
				.search-field {
					background-color: transparent;
					height: 50px;
					padding: 6px 15px;
					border: 1px solid #eeeeee;
					width: 100%;
					display: block;
					outline: 0;
					transition: 0.5s;
					&:focus {
						border-color:$main-color;
					}
				}
				button {
					position: absolute;
					right: 0;
					outline: 0;
					bottom: 0;
					height: 50px;
					width: 50px;
					border: none;
					color: $white-color;
					background-color: $main-color;
					transition: 0.5s;
					cursor: pointer;
					&:hover {
						background-color: $heading-color;
					}
				}
			}
		}
		.widget-peru-posts-thumb {
			position: relative;
			overflow: hidden;
			.item {
				overflow: hidden;
				margin-bottom: 10px;
				padding-bottom: 10px;
				border-bottom: 1px solid #efefef;
				&:last-child {
					margin-bottom: 0;
					border-bottom: none;
					padding-bottom: 0;
				}
				.thumb {
					float: left;
					height: 80px;
					overflow: hidden;
					position: relative;
					width: 80px;
					margin-right: 15px;
					.fullimage {
						width: 80px;
						height: 80px;
						display: inline-block;
						background-size: cover !important;
						background-repeat: no-repeat;
						background-position: center center !important;
						position: relative;
						background-color: $heading-color;
					}
					.fullimage.bg1 {
						background-image: url(/images/blog-details/popular-posts-1.png);
					}
					.fullimage.bg2 {
						background-image: url(/images/blog-details/popular-posts-2.png);
					}
					.fullimage.bg3 {
						background-image: url(/images/blog-details/popular-posts-3.png);
					}
					.fullimage.bg4 {
						background-image: url(/images/blog-details/popular-posts-4.png);
					}
				}
				.info {
					overflow: hidden;
					span {
						display: block;
						color: #666666;
						text-transform: uppercase;
						margin-top: 5px;
						margin-bottom: 5px;
						font-size: 12px;
						font-weight: 500;
					}
					.title {
						margin-bottom: 0;
						line-height: 1.5;
						font-size: 14px;
						font-weight: 600;
						a {
							display: inline-block;
							color: #474c40;
							&:hover {
								color: $main-color;
							}
						}
					}
				}
			}
		}
		.widget_recent_entries {
			ul {
				padding: 0;
				margin: 0;
				list-style-type: none;
				li {
					position: relative;
					margin-bottom: 12px;
					color: #666666;
					padding-left: 17px;
					line-height: 1.5;
					font-size: 15px;
					font-weight: 600;
					&:last-child {
						margin-bottom: 0;
					}
					&::before {
						background: $main-color;
						position: absolute;
						height: 7px;
						width: 7px;
						content: '';
						left: 0;
						top: 7px;
					}
					.post-date {
						display: block;
						font-size: 13px;
						color: #666666;
						margin-top: 4px;
					}
				}
			}
		}
		.widget_categories {
			ul {
				padding: 0;
				margin: 0;
				list-style-type: none;
				li {
					position: relative;
					padding-bottom: 10px;
					margin-bottom: 10px;
					color: #666666;
					padding-left: 20px;
					font-size: 15px;
					font-weight: 600;
					border-bottom: 1px solid #efefef;
					&:last-child {
						margin-bottom: 0;
						border-bottom: none;
					}
					&::before {
						background: $main-color;
						position: absolute;
						height: 10px;
						width: 10px;
						content: '';
						left: 0;
						top: 7px;
						clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
					}
					a {
						display: block;
						color: #666666;
						font-weight: normal;
						font-size: 14px;
						span {
							float: right;
							font-size: 13px;
						}
						&:hover {
							color: $main-color;
						}
					}
					.post-count {
						float: right;
					}
				}
			}
		}
		.widget_meta {
			ul {
				padding: 0;
				margin: 0;
				list-style-type: none;
				li {
					position: relative;
					padding-bottom: 10px;
					margin-bottom: 10px;
					color: #666666;
					padding-left: 17px;
					font-size: 15px;
					font-weight: 500;
					border-bottom: 1px solid #efefef;
					a {
						color: $body-color;
						&:hover {
							color: $main-color;
						}
					}
					&:last-child {
						margin-bottom: 0;
					}
					&::before {
						background: $main-color;
						position: absolute;
						height: 10px;
						width: 10px;
						content: '';
						left: 0;
						top: 8px;
						clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
					}
				}
			}
		}
		.widget_tag_cloud {
			.widget-title {
				margin-bottom: 0;
			}
		}
		.tagcloud {
			a {
				display: inline-block;
				color: #666666;
				font-weight: normal;
				font-size: 14px !important;
				padding: 7px 10px;
				border: 1px dashed #eeeeee;
				margin-top: 10px;
				margin-right: 10px;
				text-transform: capitalize;
				&:hover {
					background-color: $main-color;
					color: $white-color;
				}
				&:focus {
					background-color: $main-color;
					color: $white-color;
					border-color: $main-color;
				}
			}
		}
		.widget_services_list {
			ul {
				padding-left: 0;
				list-style-type: none;
				margin-bottom: 0;
				box-shadow: 0 0 1.25rem rgba(108, 118, 134, 0.04);
				background-color: $white-color;
				li {
					a {
						display: block;
						position: relative;
						border-bottom: 1px solid #eeeeee;
						padding-top: 15px;
						padding-bottom: 15px;
						padding-left: 15px;
						padding-right: 35px;
						color: #5d6576;
						z-index: 1;
						font-weight: 500;
						&::before {
							content: "";
							position: absolute;
							left: 0;
							top: 0;
							width: 0;
							height: 100%;
							background: #252920;
							transition: 0.5s;
							opacity: 0;
							visibility: hidden;
						}
						i {
							position: absolute;
							right: 15px;
							top: 50%;
							transform: translateY(-50%);
						}
						&:hover {
							background-color: $main-color;
							color: $white-color;
							padding-left: 20px;
							&::before {
								opacity: 1;
								visibility: visible;
								width: 5px;
							}
						}
					}
					a.active {
						background-color: $main-color;
						color: $white-color;
						padding-left: 20px;
						&::before {
							opacity: 1;
							visibility: visible;
							width: 5px;
						}
					}
					&:last-child {
						a {
							border-bottom: none;
						}
					}
				}
			}
		}
		.widget_download {
			ul {
				padding-left: 0;
				list-style-type: none;
				margin-bottom: 0;
				box-shadow: 0 0 1.25rem rgba(108, 118, 134, 0.04);
				background-color: $white-color;
				li {
					a {
						display: block;
						position: relative;
						border-bottom: 1px solid #eeeeee;
						padding-top: 15px;
						padding-bottom: 15px;
						padding-left: 15px;
						padding-right: 35px;
						color: #5d6576;
						z-index: 1;
						font-weight: 500;
						&::before {
							content: "";
							position: absolute;
							left: 0;
							top: 0;
							width: 0;
							height: 100%;
							background: #252920;
							transition: 0.5s;
							opacity: 0;
							visibility: hidden;
						}
						i {
							position: absolute;
							right: 15px;
							top: 50%;
							transform: translateY(-50%);
						}
						&:hover {
							background-color: $main-color;
							color: $white-color;
							padding-left: 20px;
							&::before {
								opacity: 1;
								visibility: visible;
								width: 5px;
							}
						}
					}
					a.active {
						background-color: $main-color;
						color: $white-color;
						padding-left: 20px;
						&::before {
							opacity: 1;
							visibility: visible;
							width: 5px;
						}
					}
					&:last-child {
						a {
							border-bottom: none;
						}
					}
				}
			}
		}
		.info time {
			font-size: 13px;
			color: #929292;
			display: block;
			margin-bottom: 4px;
		}
	} 
}

/*
Contact Area Style
=====================================================*/
.contact-area {
	.section-title {
		margin-bottom: 30px;
		h2 {
			font-size: 30px;
		}
	}
	.contact-wrap {
		background-color: $white-color;
		box-shadow: $box-shadow;
		padding: 40px;
		text-align: center;
		.form-group {
			margin-bottom: 30px;
		}
		.text-danger {
			color: #dc3545!important;
			margin-top: 30px;
		}
		.text-success {
			color: #28a745!important;
		}
		.list-unstyled {
			text-align: left;
			margin-top: 10px;
			color: #dc3545!important;
		}
	}
	.quick-contact {
		background-color: $white-color;
		box-shadow: $box-shadow;
		padding: 30px;
		h3 {
			font-size: 28px;
			margin-bottom: 20px;
			margin-top: -4px;
		}
		ul {
			li {
				font-size: 18px;
				position: relative;
				color: $white-color;
				font-weight: 600;
				margin-bottom: 15px;
				background-color: $main-color;
				padding: 19px 20px;
				padding-left: 65px;
				&:last-child {
					margin-bottom: 0;
				}
				i {
					position: absolute;
					left: 25px;
					top: 16px;
					font-size: 25px;
				}
				span {
					display: block;
					font-weight: 400;
					font-size: 15px;
				}
				a {
					display: block;
					font-weight: 400;
					font-size: 15px;
					color: $white-color;
				}
			}
		}
	}
}
.map-area {
	iframe {
		width: 100%;
		height: 500px;
		border: none;
		margin-bottom: -8px;
	}
}

/* 
FAQ Area Style
=====================================================*/
.faq-area {
	.faq-accordion {
		background-color: $white-color;
		box-shadow: $box-shadow;
		padding: 40px;
		margin: auto;
		h2 {
			font-size: 35px;
			margin-bottom: 30px;
			text-align: center;
		}
		.accordion {
			list-style-type: none;
			padding-left: 0;
			margin-bottom: 0;
			border: none;

			.accordion__item {
				display: block;
				box-shadow: 0 0 1.25rem rgba(108, 118, 134, 0.1);
				margin-bottom: 20px;
				border: none;
				&:last-child {
					margin-bottom: 0; 
				}
			}
			.accordion__button {
				background-color: #f3f3f3;
				padding: 15px 25px;
				color: #000000;
				font-size: 17px;
				font-weight: 500;
				&:focus {
					outline: 0;
				}
			}
			.accordion__panel {
				position: relative;
				padding: 30px;
				font-size: 14px;
			}
		}
	}
}

/*
Client Area Style
======================================================*/
.single-client {
	background-color: $heading-color;
	text-align: center;
	padding: 0 30px 30px 30px;
	border-radius: $border-radius;
	box-shadow: $box-shadow;
	margin-bottom: 30px;
	margin-top: 30px;
	position: relative;
	z-index: 1;
	transition: $transition;
	img {
		border-radius: 50%;
		margin-bottom: -30px !important;
		position: relative;
		top: -30px;
		width: unset;
	}
	h3 {
		margin-top: 20px;
		margin-bottom: 5px;
		color: $white-color;
	}
	span {
		margin-bottom: 10px;
		display: block;
		color: $white-color;
	}
	p {
		color: $white-color;
	}
	ul {
		line-height: 1;
		li {
			display: inline-block;
			margin: 0 2px;
			i {
				color: #ffc107;
				font-size: 15px;
			}
		}
	}
	.quotes {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		display: flex;
		color: #373784;
		font-size: 90px;
		z-index: -1;
		opacity: 0.3;
	}
	&:hover {
		transform: translateY(-5px);
	}
}
	

/*
Portfolio Area Style
======================================================*/
.single-portfolio {
	position: relative;
	overflow: hidden;
	transition: all 0.5s;
	margin-bottom: 30px;
	.portfolio-image {
		position: relative;
		transition: all 0.5s;
		height: 380px;
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		&.bg-1 {
			background-image: url(/images/portfolio/portfolio1.jpg);
		}
		&.bg-2 {
			background-image: url(/images/portfolio/portfolio2.jpg);
		}
		&.bg-3 {
			background-image: url(/images/portfolio/portfolio3.jpg);
		}
		&.bg-4 {
			background-image: url(/images/portfolio/portfolio4.jpg);
		}
		&.bg-5 {
			background-image: url(/images/portfolio/portfolio5.jpg);
		}
		&.bg-6 {
			background-image: url(/images/portfolio/portfolio6.jpg);
		}
		&.bg-7 {
			background-image: url(/images/portfolio/portfolio7.jpg);
		}
		&.bg-8 {
			background-image: url(/images/portfolio/portfolio8.jpg);
		}
		img {
			transition: all 9s;
		}
	}
	.portfolio-content {
		position: absolute; 
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		padding: 15px;
		transition: $transition;
		z-index: 2;
		text-align: center;
		width: 93%;
		height: 90%;
		justify-content: center;
		align-items: center;
		display: flex;
		background-color: rgba(37, 36, 94, 0.9);
		transform: scaleY(0);
		span {
			color: $white-color;
			font-weight: 500;
			display: block;
			margin-bottom: 6px;
		}
		h3 {
			margin-bottom: 12px;
			transition: $transition;
			&:hover {
				a {
					text-decoration: underline;
				}
					
			}
			a {
				color: $white-color;
			}
			&:hover {
				a {
					color: $white-color;
				}
					
			}
		}
		.read-more {
			&:hover {
				color: $white-color;
			}
		}
	}
	&:hover {
		.portfolio-content { 
			transform: scaleY(1);
		}
		.portfolio-image {
			img {
				transform: scale(2.3) rotate(4deg);
			}
		}
	}
}

/*
Team Area Style
=================================================*/
.team-area {
	.owl-theme {
		.owl-dots {
			margin: 0 !important;
			line-height: 1;
			.owl-dot {
				span {
					background-color: #b8d5fc !important;
					transition: $transition;
					margin: 0 5px !important;
				}
				&:hover {
					span {
						background-color: $heading-color !important;
					}
				}
				&.active {
					span {
						background-color: $heading-color !important;
					}
				}
			}
		}
	}
}
.single-team {
	text-align: center;
	margin-bottom: 30px;
	position: relative;
	.image {
		position: relative;
		.social {
			list-style-type: none;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 40px;
			li {
				display: inline-block;
				transform: translateY(30px);
				transition: all 0.3s ease-in-out 0s;
				opacity: 0;
				visibility: hidden;
				margin: 0 5px;
				a {
					display: block;
					width: 35px;
					height: 35px;
					background-color: $heading-color;
					text-align: center;
					position: relative;
					font-size: 17px;
					color: $white-color;
					border-radius: 30px;
					transition: $transition;
					i {
						position: absolute;
						left: 0;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						margin-left: auto;
						margin-right: auto;
					}
					&:hover {
						color: $white-color;
						background-color: $main-color;
					}
				}
				&:nth-child(1) {
					transition-delay: 0.2s;
				}
				&:nth-child(2) {
					transition-delay: 0.3s;
				}
				&:nth-child(3) {
					transition-delay: 0.4s;
				}
				&:nth-child(4) {
					transition-delay: 0.5s;
				}
			}
		}
	}
	.content {
		background-color: $white-color;
		box-shadow: $box-shadow;
		padding: 30px;
		position: relative;
		margin: -30px auto 0;
		max-width: 320px;
		h3 {
			margin-bottom: 0;
			font-size: 20px;
		}
		span {
			display: block;
			color: $main-color;
			font-size: 14px;
			margin-top: 6px;
			font-weight: 600;
		}
	}
	&:hover {
		.image {
			.social {
				li {
					transform: translateY(0);
					opacity: 1;
					visibility: visible;
				}
			}
		}
	}
}

/*
Blog Area Two Columns
=================================================*/
.blog-area-two-columns {
	.single-blog {
		.blog-content {
			max-width: 100%;
			margin: auto;
		}
	}
}


/*====================================================
OTHER STYLE AREA
======================================================*/


/*
Preloader Area Style*/
.preloader {
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: $heading-color;
	top: 0;
	left: 0;
	z-index: 99999;
	.lds-ripple {
		position: relative;
		width: 80px;
		height: 80px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		div {
			position: absolute;
			border: 4px solid $white-color;
			opacity: 1;
			border-radius: 50%;
			animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
			&:nth-child(2) {
				animation-delay: -0.5s;
			}
		}
	}
}
@keyframes lds-ripple {
    0% {
        top: 28px;
        left: 28px;
        width: 0;
        height: 0;
        opacity: 1
    }
    100% {
        top: -1px;
        left: -1px;
        width: 58px;
        height: 58px;
        opacity: 0
    }
}

/*
Go Top Style*/
.go-top {
	position: fixed;
	cursor: pointer;
	top: 98%;
	left: -10%;
	background-color: $main-color;
	z-index: 4;
	width: 40px;
	text-align: center;
	height: 42px;
	line-height: 42px;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: .9s;
	transition: .9s;
	i {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
		right: 0;
		margin: 0 auto;
		color: $white-color;
		transition: 0.5s;
		font-size: 20px;
		&:last-child {
			opacity: 0;
			visibility: hidden;
			top: 60%;
		}
	}
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		background-color: $main-color;
		opacity: 0;
		visibility: hidden;
		transition: 0.5s;
	}
	&:hover {
		color: $white-color;
		background-color: $heading-color;
		&::before {
			opacity: 1;
			visibility: visible;
		}
		i {
			&:first-child {
				opacity: 0;
				top: 0;
				visibility: hidden;
			}
			&:last-child {
				opacity: 1;
				visibility: visible;
				top: 50%;
			}
		}
	}
	&:focus {
		color: $white-color;
		&::before {
			opacity: 1;
			visibility: visible;
		}
		i {
			&:first-child {
				opacity: 0;
				top: 0;
				visibility: hidden;
			}
			&:last-child {
				opacity: 1;
				visibility: visible;
				top: 50%;
			}
		}
	}
}
.go-top.active {
	transform: translateY(-98%);
	opacity: 1;
	visibility: visible;
	left: 95%;
}

/*
Video wave Style*/
.video-btn {
	display: inline-block;
	width: 60px;
	height: 60px;
	line-height: 69px;
	text-align: center;
	border-radius: 50%;
	color: $main-color;
	position: relative;
	top: 3px;
	z-index: 1;
	background-color: $main-color;
	i {
		font-size: 20px;
		font-weight: 700;
		color: $white-color;
		position: absolute;
		top: 0;
		left: 3px;
		justify-content: center;
		align-items: center;
		display: flex;
		width: 100%;
		height: 100%;
	}
	&::after, &::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		z-index: -1;
		bottom: 0;
		left: 0;
		border-radius: 50%;
		background-color: $main-color;
	}
	&::before {
		animation: ripple 1.6s ease-out infinite;
	}
	&::after {
		animation: ripple 1.6s ease-out infinite;
	}
	&:hover {
		background-color: $main-color;
		i {
			color: $white-color;
		}
	}
}
@keyframes ripple {
	0%, 35% {
		transform: scale(0);
	  	opacity: 1;
	}
	50% {
		transform: scale(1.5);
	  	opacity: 0.8;
	}
	100% {
	  	opacity: 0;
		transform: scale(2);
	}
}

/*
Section Title Area Style*/
.section-title {
	max-width: 660px;
	margin: 0 auto 60px;
	text-align: center;
	position: relative;
	span {
		font-size: 14px;
		font-weight: 700;
		color: $main-color;
		display: block;
		margin-bottom: 15px;
		text-transform: capitalize;
		line-height: 1;
	}
	h2 {
		font-size: 40px;
		margin-bottom: 15px; 
		position: relative;
		display: block;
		&:last-child {
			margin-bottom: 0;
		}
	}
	&.white-title {
		span {
			color: $white-color;
		}
		h2 {
			color: $white-color;
		}
		p {
			color: $white-color;
		}
	}
}

/*
Nice select Area Style*/
.nice-select .list {
	width: 100%;
}
.nice-select {
	.option {
		&:hover {
			background-color: $main-color;
			color: $white-color;
		}
	}
	.option.selected.focus {
		background-color: $heading-color;
		color: $main-color;
	}
}

/*
Page-navigation Area Style*/
.page-navigation-area {
	text-align: center;
	margin: 20px auto 0;
	display: table;
	.page-link {
		color: $main-color;
		background-color: $white-color;
		box-shadow: 0 0 15px #d0d0d0;
		width: 40px;
		height: 40px;
		border: 1px solid #ffffff;
		line-height: 24px;
		transition: $transition;
		font-weight: 700;
		i {
			margin-right: -4px;
			font-size: 21px;
		}
		&:hover {
			color: $white-color;
			background-color: $main-color;
			border: 1px solid $main-color;
		}
		&:focus {
			z-index: 2;
			outline: 0;
			box-shadow: none;
		}
	}
	.page-link.page-links {
		i {
			&::before {
				margin-left: -4px;
			}
		}
	}
	.page-item {
		padding: 0 8px 0;
		&:first-child {
			.page-link {
				border-radius: none;
			}
		}
		&:last-child {
			.page-link {
				border-radius: none;
			}
		}
	}
	.page-item.active {
		.page-link {
			z-index: 1;
			color: $white-color;
			background-color: $main-color;
			border-color: $main-color;
		}
	}
}

// Single pricing
.single-pricing {
	text-align: center;
	background-color: #f3f3f3;
	margin-bottom: 30px;
	padding: 50px 20px;
	.price-header {
		margin-bottom: 20px;
		h3 {
			font-size: 20px;
		}
	}
	.price {
		margin-bottom: 20px;
		sup {
			font-size: 22px;
			font-weight: normal;
			top: -18px;
		}
		h2 {
			font-size: 50px;
			margin: 0;
			line-height: 1;
		}
		sub {
			font-size: 14px;
			font-weight: normal;
			color: #6e6e6e;
		}
	}
	.default-btn {
		margin-top: 10px;
	}
}
.single-privacy {
	h3 {
		font-size: 25px;
	}
}