/*===========================
02.HEADER css
===========================*/

body.active {
	overflow: hidden;
}

.offline-state{
	background-color: #f00;
	cursor: help;
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 10px;
	border-radius: 12px;
	box-shadow: #800 0 -1px 7px 1px, inset #800 0 -1px 2px, #800 0 0px 15px;
}

.header-area {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99;
}

.desktoplogo {
	@media #{$md} {
		display: none;
	}

	@media #{$xs} {
		display: none;
	}
}


.header-menu {
	border-bottom: 1px solid rgba($white, 0.2);

	&.sticky {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: $white;
		@include box-shadow (0px 10px 25px 0px rgba($heading-color, 0.1));
		z-index: 99;
		@include animation(sticky 1.5s);
	}
}

@-webkit-keyframes sticky {
	0% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%)
	}

	100% {
		-webkit-transform: translateY(0%);
		transform: translateY(0%)
	}
}

@keyframes sticky {
	0% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%)
	}

	100% {
		-webkit-transform: translateY(0%);
		transform: translateY(0%)
	}
}



.horizontalMenucontainer {
	background-size: cover;
	overflow: hidden;
	background-attachment: fixed;
	background-position: 50% 0;
	background-repeat: no-repeat;
	@include transition(0.3s);
}

.horizontal-main {}

.desktoplogo {}

.desktoplogo img {
	width: 100%
}

.horizontalMenu {
	color: $white;
	padding: 0;
	display: block;

	@media #{$md} {
		width: 100%;
		left: 0;
		overflow-y: hidden;
		padding: 0;
		top: 0;
		position: fixed;
		visibility: hidden;
		margin: 0px;
	}

	@media #{$xs} {
		width: 100%;
		left: 0;
		overflow-y: hidden;
		padding: 0;
		top: 0;
		position: fixed;
		visibility: hidden;
		margin: 0px;
	}

	& .horizontalMenu-list {
		position: static;

		@media #{$md} {
			height: auto;
			min-height: 100%;
			width: 270px;
			background-color: $white;
			padding-bottom: 0;
			margin-left: -270px;
			display: block;
			text-align: left;
			position: relative;
			z-index: 99999999;
		}

		@media #{$xs} {
			height: auto;
			min-height: 100%;
			width: 270px;
			background-color: $white;
			padding-bottom: 0;
			margin-left: -270px;
			display: block;
			text-align: left;
			position: relative;
			z-index: 99999999;
		}

		& > li {
			display: inline-block;
			position: relative;
			padding: 26px 0;

			@media #{$md} {
				width: 100%;
				display: block;
				position: relative;
				white-space: inherit;
				padding: 0;
				border-bottom: 1px solid rgba($heading-color, 0.3);
			}

			@media #{$xs} {
				width: 100%;
				display: block;
				position: relative;
				white-space: inherit;
				padding: 0;
				border-bottom: 1px solid rgba($heading-color, 0.3);
			}

			&.position-static {
				@media #{$md} {
					position: relative !important;
				}

				@media #{$xs} {
					position: relative !important;
				}
			}

			& .horizontalMenu-click {
				height: 50px;
				position: absolute;
				top: 0;
				right: 0;
				cursor: pointer;
				width: 100%;
				display: none;
				@include transition(0.3s);
				float: right;

				@media #{$md} {
					display: inline-block;
				}

				@media #{$xs} {
					display: inline-block;
				}

				& i {
					display: block;
					line-height: 50px;
					width: 50px;
					text-align: center;
					font-size: 16px;
					color: $body-color;
					text-align: center;
					float: right;
				}

				&.ws-activearrow {
					& i {
						@include transform(rotate(180deg));
					}
				}
			}

			& > a {
				font-size: 16px;
				font-weight: 300;
				color: $white;
				padding: 7px 18px;
				border-radius: 5px;
				@include transition(0.3s);

				@media #{$md} {
					color: $heading-color;
					display: block;
					border-radius: 0;
					height: 50px;
					line-height: 50px;
					padding: 0 20px;
				}

				@media #{$xs} {
					color: $heading-color;
					display: block;
					border-radius: 0;
					height: 50px;
					line-height: 50px;
					padding: 0 20px;
				}

				& i {
					font-size: 12px;
					padding-left: 5px;

					@media #{$md} {
						display: none;
					}

					@media #{$xs} {
						display: none;
					}
				}
			}

			&.active {
				& > a {
					color: $white;
					background-color: $theme-color;
				}

				& > .horizontalMenu-click02,
				& > .horizontalMenu-click {
					& i {
						color: $white;
					}
				}
			}

			&:hover {
				& > a {
					color: $white;
					background-color: $theme-color-2;
				}

				& > .horizontalMenu-click02,
				& > .horizontalMenu-click {
					& i {
						color: $white;
					}
				}
			}

			& .sub-menu {
				width: 200px;
				position: absolute;
				left: 0;
				top: 100%;
				background-color: $white;
				text-align: left;
				padding: 16px 0;
				@include box-shadow (0px 10px 30px 0px rgba($heading-color, 0.1));
				z-index: 99;
				@include transform(rotateX(-75deg));
				transform-origin: 0% 0%;
				-o-transform-origin: 0% 0%;
				-moz-transform-origin: 0% 0%;
				-ms-transform-origin: 0% 0%;
				-webkit-transform-origin: 0% 0%;
				transform-style: preserve-3d;
				-o-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				-webkit-transform-style: preserve-3d;
				opacity: 0;
				visibility: hidden;
				padding: 10px;

				@media #{$md} {
					display: none;
					position: relative;
					top: 0px;
					background-color: $white;
					border: none;
					padding: 0px;
					opacity: 1;
					visibility: visible;
					@include transform(none);
					transform-style: flat;
					-o-transform-style: flat;
					-moz-transform-style: flat;
					-ms-transform-style: flat;
					-webkit-transform-style: flat;
					width: 100%;
				}

				@media #{$xs} {
					display: none;
					position: relative;
					top: 0px;
					background-color: $white;
					border: none;
					padding: 0px;
					opacity: 1;
					visibility: visible;
					@include transform(none);
					transform-style: flat;
					-o-transform-style: flat;
					-moz-transform-style: flat;
					-ms-transform-style: flat;
					-webkit-transform-style: flat;
					width: 100%;
				}

				&::after {
					position: absolute;
					top: -5px;
					left: 12px;
					display: inline-block;
					border-right: 5px solid transparent;
					border-bottom: 5px solid $white;
					border-left: 5px solid transparent;
					content: '';
				}


				& li {
					display: block;
					padding: 0;
					position: relative;

					& a {
						display: block;
						color: $heading-color;
						font-size: 14px;
						padding: 8px 12px;
						border-radius: 0;
						@include transition(0.3s);
						font-weight: 400;

						& i {
							float: right;
							margin-top: 4px;
						}


					}

					&.active {
						& > a {
							color: $white;
							background-color: $theme-color;
							margin-right: 0;
						}
					}

					&:hover {
						& > a {
							color: $white;
							background-color: $theme-color-2;
							margin-right: 0;
						}

						& > .horizontalMenu-click02 {
							& i {
								color: $white;
							}
						}
					}

					& .horizontalMenu-click02 {
						height: 37px;
						position: absolute;
						top: 0;
						right: 0;
						cursor: pointer;
						width: 100%;
						display: none;

						@media #{$md} {
							display: inline-block;
						}

						@media #{$xs} {
							display: inline-block;
						}

						& i {
							display: block;
							line-height: 37px;
							width: 37px;
							text-align: center;
							font-size: 16px;
							color: $body-color;
							text-align: center;
							float: right;

							&.horizontalMenu-rotate {
								@include transform(rotate(180deg));
							}
						}
					}

					& .sub-menu {
						top: -10px;
						left: 105%;
						opacity: 0;
						visibility: hidden;
						@include transform(rotateX(-75deg));
						transform-origin: 0% 0%;
						-o-transform-origin: 0% 0%;
						-moz-transform-origin: 0% 0%;
						-ms-transform-origin: 0% 0%;
						-webkit-transform-origin: 0% 0%;
						transform-style: preserve-3d;
						-o-transform-style: preserve-3d;
						-moz-transform-style: preserve-3d;
						-ms-transform-style: preserve-3d;
						-webkit-transform-style: preserve-3d;

						@media #{$md} {
							display: none;
							position: relative;
							top: 0px;
							left: 0;
							background-color: $white;
							border: none;
							padding: 0px;
							opacity: 1;
							visibility: visible;
							@include transform(none);
							transform-style: flat;
							-o-transform-style: flat;
							-moz-transform-style: flat;
							-ms-transform-style: flat;
							-webkit-transform-style: flat;
						}

						@media #{$xs} {
							display: none;
							position: relative;
							top: 0px;
							left: 0;
							background-color: $white;
							border: none;
							padding: 0px;
							opacity: 1;
							visibility: visible;
							@include transform(none);
							transform-style: flat;
							-o-transform-style: flat;
							-moz-transform-style: flat;
							-ms-transform-style: flat;
							-webkit-transform-style: flat;
						}

						&::after {
							display: none;
						}
					}
				}
			}

			&:hover {
				& .sub-menu {
					opacity: 1;
					visibility: visible;
					@include transform(rotateX(0));
					transition: transform 0.3s, opacity 0.3s;
					-o-transition: -o-transform 0.3s, opacity 0.3s;
					-ms-transition: -ms-transform 0.3s, opacity 0.3s;
					-moz-transition: -moz-transform 0.3s, opacity 0.3s;
					-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;

					& li {
						&:hover {
							& .sub-menu {
								opacity: 1;
								visibility: visible;
								@include transform(rotateX(0));
								-o-transition: -o-transform 0.3s, opacity 0.3s;
								-ms-transition: -ms-transform 0.3s, opacity 0.3s;
								-moz-transition: -moz-transform 0.3s, opacity 0.3s;
								-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
							}
						}
					}
				}
			}

			& .horizontal-megamenu {
				width: 100%;
				left: 0px;
				position: absolute;
				top: 100%;
				z-index: 1000;
				margin: 0px;
				text-align: left;
				@include transform(rotateX(-75deg));
				transform-origin: 0% 0%;
				-o-transform-origin: 0% 0%;
				-moz-transform-origin: 0% 0%;
				-ms-transform-origin: 0% 0%;
				-webkit-transform-origin: 0% 0%;
				transform-style: preserve-3d;
				-o-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				-webkit-transform-style: preserve-3d;
				opacity: 0;
				visibility: hidden;


				@media #{$md} {
					display: none;
					position: relative;
					top: 0px;
					padding: 0px 0px;
					border: solid 0px;
					@include transform(none);
					opacity: 1;
					visibility: visible;
					border-bottom: 1px solid rgba(0, 0, 0, 0.13);
					transform-style: flat;
					-o-transform-style: flat;
					-moz-transform-style: flat;
					-ms-transform-style: flat;
					-webkit-transform-style: flat;
					width: 100%;
				}

				@media #{$xs} {
					display: none;
					position: relative;
					top: 0px;
					padding: 0px 0px;
					border: solid 0px;
					@include transform(none);
					opacity: 1;
					visibility: visible;
					border-bottom: 1px solid rgba(0, 0, 0, 0.13);
					transform-style: flat;
					-o-transform-style: flat;
					-moz-transform-style: flat;
					-ms-transform-style: flat;
					-webkit-transform-style: flat;
					width: 100%;
				}

				& .container {
					@media #{$md} {
						padding: 0;
					}

					@media #{$xs} {
						padding: 0;
					}

					& .row {
						@media #{$md} {
							margin: 0;
						}

						@media #{$xs} {
							margin: 0;
						}
					}
				}

				& .megamenu-content {
					background-color: $white;
					padding: 20px;
					border-radius: 2px;
					@include box-shadow (0px 10px 30px 0px rgba($heading-color, 0.1));

					@media #{$md} {
						padding: 0;
						border: 0;
					}

					@media #{$xs} {
						padding: 0;
						border: 0;
					}

					& .link-list {
						border-left: 1px solid #e8ebf3;
						width: 20%;
						position: relative;
						min-height: 1px;
						padding-right: 0.75rem;
						padding-left: 0.75rem;

						@media #{$md} {
							padding: 0;
							width: 100%;
						}

						@media #{$xs} {
							padding: 0;
							width: 100%;
						}

						&:first-child {
							border: 0;
						}

						& li {
							&.title {
								font-size: 16px;
								font-weight: 600;
								color: $heading-color;
								padding: 8px 12px;
							}

							& a {
								display: block;
								color: $heading-color;
								font-size: 14px;
								padding: 8px 12px;
								border-radius: 0;
								@include transition(0.3s);
								font-weight: 400;

								& i {
									float: right;
									margin-top: 4px;
								}
							}

							&:hover {
								& > a {
									color: $white;
									background-color: $theme-color-2;
									margin-right: 0;
								}
							}
							&.active{
								& > a {
									color: $white;
									background-color: $theme-color;
									margin-right: 0;
								}
							}
						}
					}
				}
			}

			&:hover {
				& .horizontal-megamenu {
					opacity: 1;
					visibility: visible;
					@include transform(rotateX(0));
					transition: transform 0.3s, opacity 0.3s;
					-o-transition: -o-transform 0.3s, opacity 0.3s;
					-ms-transition: -ms-transform 0.3s, opacity 0.3s;
					-moz-transition: -moz-transform 0.3s, opacity 0.3s;
					-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
				}
			}

			&:last-child {
				border-bottom: 0;
				padding: 20px;
			}

			& .main-btn {
				width: 100%;
				height: 36px;
				line-height: 36px;
				border-radius: 3px;
				color: $white;
				background-color: $theme-color;

				&:hover {
					background-color: $theme-color-2;
				}
			}
		}
	}
}


.horizontal-btn {
	& .main-btn {
		background-color: rgba($white, 0.15);

		&:hover {
			background-color: $theme-color-2;
			color: $white;
		}
	}
}

.overlapblackbg {
	right: 0;
	width: 100%;
	height: 100vh;
	min-height: 100%;
	position: fixed;
	top: 0;
	opacity: 0;
	visibility: hidden;
	background-color: rgba($heading-color, 0.45);
	cursor: pointer;
	@include transition(0.3s);
}


.horizontal-header {
	width: 100%;
	position: relative;
	top: 0;
	left: 0;
	z-index: 1;
	text-align: center;
	@include transition(0.3s);
	padding: 5px 0;

	& .navtoggle {
		font-size: 26px;
		color: $white;
	}

	& .smllogo {}

	& .callusbtn {
		font-size: 26px;
		color: $white;
	}
}


.active {
	& .horizontalMenu {
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		visibility: visible;
		z-index: 1000;
		top: 0;
		height: 100% !important;
		@include transition(0.3s);

		& .overlapblackbg {
			opacity: 1;
			visibility: visible;
			@include transition(0.3s);
		}

		& .horizontalMenu-list {
			margin-left: 0;
			@include transition(0.3s);
		}
	}

	& .horizontalMenucontainer {
		margin-left: 270px;
		@include transition(0.3s);
	}
}




/*===== sticky =====*/

.sticky {
	border-bottom: 0;

	& .horizontalMenu {
		& .horizontalMenu-list {
			& > li {
				& > a {
					color: $heading-color;

					@media #{$md} {
						color: $heading-color;
					}

					@media #{$xs} {
						color: $heading-color;
					}
				}

				&.active {
					& > a {
						color: $white;
						background-color: $theme-color;
					}

					& > .horizontalMenu-click02,
					& > .horizontalMenu-click {
						& i {
							color: $white;
						}
					}
				}

				&:hover {
					& > a {
						color: $white;
						background-color: $theme-color-2;
					}
				}

				& .main-btn {
					color: $white;
				}
			}
		}
	}

	& .horizontal-btn {
		& .main-btn {
			background-color: $theme-color;

			&:hover {
				background-color: $theme-color-2;
				color: $white;
			}
		}
	}

	& .horizontal-header {
		& .navtoggle {
			color: $heading-color;
		}

		& .callusbtn {
			color: $heading-color;
		}
	}
}




/*===== header menu 3 =====*/

.header-menu-3 {
	border-color: rgba($heading-color, 0.2);

	& .horizontalMenu {
		& .horizontalMenu-list {
			& > li {
				& > a {
					color: $heading-color;

					@media #{$md} {
						color: $heading-color;
					}

					@media #{$xs} {
						color: $heading-color;
					}
				}

				&.active {
					& > a {
						color: $white;
						background-color: $theme-color-3;
					}

					& > .horizontalMenu-click02,
					& > .horizontalMenu-click {
						& i {
							color: $white;
						}
					}
				}

				&:hover {
					& > a {
						color: $white;
						background-color: $theme-color-4;
					}
				}

				& .sub-menu {
					& li {
						& a {

						}

						&.active {
							& > a {
								background-color: $theme-color-3;
							}
						}

						&:hover {
							& > a {
								color: $white;
								background-color: $theme-color-4;
								margin-right: 0;
							}
						}
					}
				}

				& .horizontal-megamenu {

					& .megamenu-content {

						& .link-list {
							& li {
								& a {
									&.active {
										color: $white;
										background-color: $theme-color-3;
										margin-right: 0;
									}
								}

								&:hover {
									& > a {
										color: $white;
										background-color: $theme-color-4;
										margin-right: 0;
									}
								}
							}
						}
					}
				}

				& .main-btn {
					color: $white;
					background-color: $theme-color-3;

					&:hover {
						background-color: $theme-color-4;
					}
				}
			}
		}
	}

	& .horizontal-btn {
		& .main-btn {
			background-color: $theme-color-3;

			&:hover {
				background-color: $theme-color-4;
				color: $white;
			}
		}
	}

	& .horizontal-header {
		& .navtoggle {
			color: $heading-color;
		}

		& .callusbtn {
			color: $heading-color;
		}
	}
}


/*===== header menu 4 =====*/

.header-menu-4{
	border-color: rgba($white, 0.2);

	& .desktoplogo{
		display: none;
	}

	& .horizontalMenu {
		& .horizontalMenu-list {
			& > li {
				& > a {}

				&.active {
					& > a {
						color: $white;
						background-color: $theme-color-5;
					}
				}

				&:hover {
					& > a {
						color: $white;
						background-color: $theme-color-5;
					}
				}

				& .sub-menu {
					& li {
						& a {

						}

						&.active {
							& > a {
								background-color: $theme-color-5;
							}
						}

						&:hover {
							& > a {
								color: $white;
								background-color: $theme-color-5;
							}
						}
					}
				}

				& .horizontal-megamenu {

					& .megamenu-content {

						& .link-list {
							& li {
								& a {
									&.active {
										color: $white;
										background-color: $theme-color-5;
									}
								}

								&:hover {
									& > a {
										color: $white;
										background-color: $theme-color-5;
									}
								}
							}
						}
					}
				}

				& .main-btn {
					color: $white;
					background-color: $theme-color-5;

					&:hover {
						background-color: rgba($theme-color-5, 0.5);
					}
				}
			}
		}
	}

	& .horizontal-btn {
		& .main-btn {
			background-color: $theme-color-5;

			&:hover {
				background-color: rgba($theme-color-5, 0.5);
				color: $white;
			}
		}
	}


	&.sticky {
		& .desktoplogo{
			display: block;

			@media #{$md}{
				display: none;
			}
			@media #{$xs}{
				display: none;
			}
		}
	}
}


/*===== header menu 5 =====*/

.header-menu-5 {
	border-color: rgba($heading-color, 0.2);
	background-color: $white;

	& .horizontalMenu {
		& .horizontalMenu-list {
			& > li {
				& > a {
					color: $heading-color;

					@media #{$md} {
						color: $heading-color;
					}

					@media #{$xs} {
						color: $heading-color;
					}
				}

				&.active {
					& > a {
						color: $white;
						background-color: $theme-color-7;
					}

					& > .horizontalMenu-click02,
					& > .horizontalMenu-click {
						& i {
							color: $white;
						}
					}
				}

				&:hover {
					& > a {
						color: $white;
						background-color: $theme-color-7;
					}
				}

				& .sub-menu {
					& li {
						& a {

						}

						&.active {
							& > a {
								background-color: $theme-color-7;
							}
						}

						&:hover {
							& > a {
								color: $white;
								background-color: $theme-color-7;
								margin-right: 0;
							}
						}
					}
				}

				& .horizontal-megamenu {

					& .megamenu-content {

						& .link-list {
							& li {
								& a {
									&.active {
										color: $white;
										background-color: $theme-color-7;
										margin-right: 0;
									}
								}

								&:hover {
									& > a {
										color: $white;
										background-color: $theme-color-7;
										margin-right: 0;
									}
								}
							}
						}
					}
				}

				& .main-btn {
					color: $white;
					background-color: $theme-color-7;

					&:hover {
						background-color: $theme-color-4;
					}
				}
			}
		}
	}

	& .horizontal-btn {
		& .main-btn {
			background-color: $theme-color-7;

			&:hover {
				background-color: rgba($theme-color-7, 0.8);
				color: $white;
			}
		}
	}

	& .horizontal-header {
		& .navtoggle {
			color: $heading-color;
		}

		& .callusbtn {
			color: $heading-color;
		}
	}
}




/*===== header Top =====*/

.header-top{
	background-color: $clr2;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 54px;
	padding-bottom: 7px;
	padding-top: 7px;
	box-shadow:
  0 1.5px 2.1px rgba(0, 0, 0, 0.035),
  0 12px 17px rgba(0, 0, 0, 0.07)
;
}

.header-mobile{
	background: $clr2;
	display: none;
	position: absolute;
	top: 0;
	left: -1000px;
	width: min(77vw, 300px);
	height: 100vh;
	overflow-y: scroll;
	z-index: -1;
	-webkit-transition: all .35s linear;
	-moz-transition: all .35s linear;
	-ms-transition: all .35s linear;
	-o-transition: all .35s linear;
	transition: all .35s linear;

	@media (max-width: 1020px) {
		display: -webkit-flex;
		display: flex;
	}

	&.slideout{
		left: 0;
		display: -webkit-flex;
		display: flex;
		flex-flow: column nowrap;
		z-index: 1000;
	}

	.mobile-logo{
		position: relative;
		margin: 30px 0;

		button{
			position: absolute;
			top: 0;
			right: 10px;
		}

		img{
			width: auto;
			max-height: 40px;
		}
	}

	.mobile-menu{
		flex: 1;

		a:not(.create-ad){
			color: $white;
		}
	}

	> .mobile-social{
		justify-content: space-around;
		padding-top: 7px;
		padding-bottom: 7px;
	}

}

.header-top-left{
	display: -webkit-flex;
	display: flex;
	height: 100%;

	@media (max-width: 1020px) {
		display: none;
	}

	& .header-meta{
		margin: 0;

		& li{
			display: inline-block;

			& + li{
				margin-left: 20px;
			}

			& a{
				font-size: 14px;
				font-weight: 400;
				color: $white;
				@include transition(0.3s);

				& i{
					margin-right: 3px;
				}

				&:hover{
					color: $clr1;
				}
			}
		}
	}

	& .header-logo{
		margin-right: 70px;
		width: auto;
		height: 40px;

		img{
			height: 40px;
			margin: 0;
			padding: 0;
		}
	}
}

.header-top-right{
	height: 100%;

	@media (max-width: 1020px) {
		flex: 1;
	}

	.header-toggler{
		flex: 1;
		display: none;

		@media (max-width: 1020px) {
			display: block;
		}
	}

	& .header-follow{
		& .social{
			margin: 0;

			& li{
				display: inline-block;

				& + li{
					margin-left: 10px;
				}

				& span{
					font-size: 14px;
					font-weight: 400;
					color: $body-color;
				}

				& a{
					font-size: 14px;
					color: $body-color;
					@include transition(0.3s);

					&:hover{
						color: $clr1;
					}
				}
			}
		}

		& .header-login{
			margin: 0;
			padding-left: 25px;

			& li{
				display: inline-block;
			}
		}
	}
}


/*===== header Center =====*/

.header-center{
	padding-bottom: 20px;
}

.header-center-wrapper{
	padding-top: 20px;

	& .get-quote{
		& .get-icon{
			& i{
				font-size: 28px;
				color: $white;
				line-height: 35px;
			}
		}
		& .get-text{
			padding-left: 15px;

			& .title{
				font-size: 14px;
				font-weight: 700;
				color: $white;
			}
			& p{
				font-size: 14px;
				color: $body-color;
				line-height: 22px;
			}
		}
	}
}

.header-search{
	padding-top: 20px;

	& .search-seylon{
		display: inline-block;

		@media #{$xs}{
			display: block;
		}
		@media #{$sm}{
			display: inline-block;
		}

		& .seylon-dropdown{
			display: inline-block;
			position: relative;

			@media #{$xs}{
				display: block;
			}
			@media #{$sm}{
				display: inline-block;
			}

			& .seylon-toggler{
				padding-left: 20px;
				padding-right: 40px;
				display: inline-block;
				line-height: 50px;
				height: 50px;
				cursor: pointer;
				border: 0;
				border-right: 0;
				position: relative;
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
				background-color: $white;
				color: $heading-color;

				@media #{$lg}{
					padding-right: 35px;
				}
				@media #{$xs}{
					padding-left: 10px;
					padding-right: 20px;
					display: block;
					border-radius: 0;
					height: 40px;
					line-height: 40px;
				}
				@media #{$sm}{
					display: inline-block;
					padding-left: 20px;
					padding-right: 40px;
					border-top-left-radius: 5px;
					border-bottom-left-radius: 5px;
				}

				&::before{
					position: absolute;
					content: '';
					width: 1px;
					height: 15px;
					background-color: $body-color;
					top: 15px;
					right: 0;

					@media #{$xs}{
						width: 100%;
						height: 1px;
						top: auto;
						bottom: 0;
					}
					@media #{$sm}{
						width: 1px;
						height: 15px;
						top: 15px;
						bottom: auto;
					}
				}

				& span{
					font-size: 14px;
					color: $heading-color;
					font-weight: 600;
					font-family: $font-2;

					@media #{$xs}{
						font-size: 13px;
					}
					@media #{$sm}{
						font-size: 14px;
					}
				}
				& i{
					margin-left: 5px;
					font-size: 14px;
					color: $heading-color;
					position: absolute;
					top: 35%;
					right: 15px;
					@include transition(0.3s);

					@media #{$lg}{
						right: 10px;
					}
				}

				&.active{
					& i{
						@include transform(rotate(180deg));
					}
				}
			}
			& .seylon-dropdown-menu{
				width: 215px;
				padding: 5px 20px 15px;
				@include box-shadow ( 0 6px 12px rgba(0,0,0,.175));
				background-color: $white;
				display: none;
				position: absolute;
				left: 0;
				top: 100%;
				z-index: 9;

				& li{
					margin-top: 10px;

					& a{
						font-size: 14px;
						color: $body-color;
						@include transition(0.3s);

						&:hover{
							color: $theme-color;
						}
					}
				}
			}
		}
	}

	& .search-form{
		min-width: 340px;

		@media #{$lg}{
			min-width: 65%;
		}
		@media #{$xs}{
			min-width: 100%;
		}
		@media #{$sm}{
			min-width: 65%;
		}

		& input{
			width: 100%;
			height: 50px;
			padding: 0 20px;
			border: 0;
			border-left: 0;
			border-right: 0;
			font-size: 14px;

			@media #{$xs}{
				height: 40px;
			}
		}
		& button{
			background: $theme-color-5;
			border: none;
			box-shadow: none;
			color: #fff;
			cursor: pointer;
			float: left;
			font-size: 1em;
			font-weight: normal;
			height: 50px;
			letter-spacing: .05em;
			min-width: 50px;
			outline: none;
			padding: 0;
			position: static;
			text-align: center;
			width: auto;
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;

			@media #{$xs}{
				min-width: 40px;
				height: 40px;
				border-radius: 0;
			}
			@media #{$xs}{
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
			}
		}
	}
}