/*
@File: Constik 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>>>>>

*******************************************
*******************************************
** - Google Fonts
** - Default CSS
** - Section Title CSS
** - Navbar CSS
** - Banner CSS
** - About CSS
** - Service CSS
** - Service Details CSS
** - Works CSS
** - Projects CSS
** - Team CSS
** - Testimonials CSS
** - Blog CSS
** - Blog Details CSS
** - Partner CSS
** - Newsletter CSS
** - Instrument CSS
** - Map CSS
** - Amazing Projects CSS
** - Build CSS
** - Quote CSS
** - Faq CSS
** - Count CSS
** - Page Title CSS
** - Authentication CSS
** - Member Details CSS
** - Terms CSS
** - Error CSS
** - Pricing CSS
** - Comingsoon CSS
** - Contact CSS
** - Pagination CSS
** - Go Top CSS
** - Preloader CSS
** - Footer CSS
** - Copy Right CSS
*/
@import 'variables';

/* -----------------------------------------
  Google Fonts
----------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* -----------------------------------------
  Default CSS
----------------------------------------- */
body {
  padding: 0;
  margin: 0;
  font-size: $font-size;
  font-family: $font-family;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: $color-dark;
  line-height: 1.4;
}

h1{
  font-size: 50px;
}

h2{
  font-size: 40px;
}

h3{
  font-size: 24px;
}

h4{
  font-size: 20px;
}

a {
  color: $color-dark;
  transition: $transition;
  text-decoration: none;
  outline: 0 !important;
}

a:hover {
  color: $color-primary;
  text-decoration: none;
}

:focus {
  outline: 0 !important;
}

.d-table {
  width: 100%;
  height: 100%;
}

.d-table-cell {
  vertical-align: middle;
}

img {
  max-width: 100%;
  height: auto;
}

p {
  color: $color-medium;
  font-size: $font-size;
  margin-bottom: 15px;
  line-height: 1.6;
}

p:last-child {
  margin-bottom: 0;
}

.ptb-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.pt-100 {
  padding-top: 100px;
}

.pb-100 {
  padding-bottom: 100px;
}

.ptb-70 {
  padding-top: 70px;
  padding-bottom: 70px;
}

.pt-70 {
  padding-top: 70px;
}

.pb-70 {
  padding-bottom: 70px;
}

.no-wrap{
  flex-wrap: nowrap;
}

.color-primary{
  color: $color-primary !important;
}

.color-secondary{
  color: $color-secondary !important;
}

.color-dark{
  color: $color-dark;
}

.bg-primary{
  background-color: $bg-primary !important;
}

.bg-secondary{
  background-color: $bg-secondary !important;
}

.bg-fff3cf{
  background-color: $bg-fff3cf !important;
}
.form-group {
	margin-bottom: 20px;
}

/*section-title*/
.section-title {
  max-width: 720px;
  text-align: left;
  margin-right: auto;
  margin-bottom: 60px;
  position: relative;
  z-index: 5;
  &::before{
	position: absolute;
	content: '';
	left: -60px;
	top: 0;
	width: 40%;
	height: 100%;
	background: $color-primary;
	z-index: -1;
  }
  h2 {
	font-size: 40px;
	line-height: 1.3;
	margin: 0;
	padding: 30px 0;
  }

  p {
	max-width: 600px;
	font-size: 17px;
	font-weight: 600;
	margin-left: auto;
	margin-right: auto;
	margin-top: 12px;
	}
	span{
		color: $color-primary;
	}
}

.section-title .learn-more-btn {
  margin-top: 20px;
}

.section-title.style-two{
  text-align: center;
	margin-right: auto;
	margin-left: auto;
  &::before{
	display: none;
  }
  h2 {
	padding: unset;
	margin-top: -10px;
  }
}

/* Primary Button */
.primary-btn {
  position: relative;
  overflow: hidden;
  text-align: center;
  display: inline-block;
  transition: $transition;
  border-radius: 0;
  border: none;
  padding: 10px 30px;
  z-index: 1;
  color: $color-dark;
  background-color: $color-primary;
  font-size: 16px;
	font-weight: 600;
	font-family: $font-family;
  line-height: 1.8;
  text-transform: capitalize;
  &::before,
  &::after {
	content: '';
	position: absolute;
	width: calc(50% + 4px);
	height: 0;
	background-color: $color-dark;
	z-index: -1;
	transition: $transition;
  }
  &::before{
	bottom: 0;
	left: 0;
  }
  &::after{
	top: 0;
	right: 0;
  }
  &:hover {
	color: $color-primary;
	&::before,
	&::after {
	  height: 120%;
	}
  }
}
.cta-btn{
  line-height: .8;
}

/* Text Button*/ 
.btn-text-only{
  background: transparent;
}

/* Social Icon CSS*/
.social-link{
  a{
	display: inline-block;
	line-height: 0;
	text-align: center;
	background: $color-primary;
	color: $color-dark;
	padding: 10px 12px;
	font-size: 16px;
	margin-right: 8px;
	&:hover{
	  background: $color-dark;
	  color: $color-primary;
	}
	&:last-child{
	  margin-right: 0;
	}
  }
}
/*Form-Control CSS*/
.form-control {
  height: 58px;
  color: $color-dark;
  box-shadow: unset !important;
  border: none;
  background-color: $color-white;
  transition: $transition;
  border-radius: 0;
  padding: 1px 0 0 15px;
  font-size: 16px;
}

.form-control::-webkit-input-placeholder {
  color: $color-light2;
  transition: $transition;
}

.form-control:-ms-input-placeholder {
  color: $color-light2;
  transition: $transition;
}

.form-control::-ms-input-placeholder {
  color: $color-light2;
  transition: $transition;
}

.form-control::placeholder {
  color: $color-light2; 
  transition: $transition;
}

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

textarea.form-control {
  height: auto;
  padding-top: 15px;
}

/* -----------------------------------------
  Navbar CSS
----------------------------------------- */
.header-area{
  position: absolute;
  background-color: transparent;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 999;
  .top-header-area{
	padding: 20px 0 35px;
	background: rgb(26,26,26);
	background: -moz-linear-gradient(90deg, rgba(26,26,26,1) 30%, rgba(26,26,26,0.4962359943977591) 30%);
	background: -webkit-linear-gradient(90deg, rgba(26,26,26,1) 30%, rgba(26,26,26,0.4962359943977591) 30%);
	background: linear-gradient(90deg, rgba(26,26,26,1) 30%, rgba(26,26,26,0.4962359943977591) 30%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1a1a1a",endColorstr="#1a1a1a",GradientType=1);
	.navbar-brand{
	  padding: 0;
	  margin: 0;
	}
	.contact-info{
		position: relative;
	  i{
		position: absolute;
		top: 0;
		left: 0;
		width: 45px;
		height: 45px;
		line-height: 45px;
		color: $color-white;
		text-align: center;
		font-size: 30px;
		display: inline-block;
	  }
	  .contact-info-content {
		margin-left: 55px;
		display: inline-block;
		p{
		  text-transform: capitalize;
		  color: $color-primary;
		  line-height:1.4;
		  margin: 0;
		}
		a{
		  font-size: 14px;
		  color: $color-white;
		}
	}
	}
  }
}

/* Header Style Two*/ 
.header-area.header-two,
.header-area.header-three{
  position: absolute;
  background-color: transparent;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 999;
  .top-header-area{
	padding: 16px 0;
	background: $color-primary;
	.social-link{
	  a{
		padding: 0;
		margin-right: 14px;
		background: transparent;
		&:hover{
		  color: $color-white;
		}
	  }
	}
	.contact-info{
	  .contact-info-content {
		margin-left: unset;
		p{
		  margin-right: 8px;
		  display: inline-block;
		  color: $color-white;
		}
		a{
		  font-size: 14px;
		  color: $color-dark;
		}
	}
	}
  }

  .constik-nav{
	padding: 16px 0;
	margin-top: 0;
	margin-top: unset;
	background: rgba(0, 30, 76, 0.78);
	.navbar { 
	  background: transparent;
	  border: transparent;
	  ul{
		margin-left: auto;
	  }
	  .nav-item {
		a{
		  color: $color-white;
		}
		.toggle::after {
		  color: $color-white;
		}
	  }
	  .side-option{
		.item {
			a:not(.primary-btn) {
				color: $color-white;
			}
			.menu-item {
				&:hover{
					a{
						color: $color-primary;
					}
				}
				a{
					color: $color-dark;
				}
		  }
		  &:last-child{
			margin-right: 0;
		  }
		}
	  }
	}
  }
}

/* Header Style Three*/
.header-area.header-three{
  position: unset;
  .constik-nav{
	background: $color-white;
	.navbar {
	  .nav-item {
		a{
		  color: $color-dark;
		}
		.toggle::after {
		  color: $color-dark;
		}
	  }
	  .side-option{
			.item {
						a:not(.primary-btn) {
							color: $color-dark;
						}
						.menu-link {
							color: $color-dark;
				}
				&:last-child{
				margin-right: 0;
				}
			}
			}
	}
  }
}
.constik-responsive-nav {
  display: none;
}
.navbar-light {
	.navbar-brand {
		.logo2 {
			display: none;
		}
	}
}
.constik-nav {
  margin-top: -15px;
  .navbar {
	position: inherit;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	background: $color-white;
	border: 2px solid $color-primary;
	ul {
	  padding-left: 0;
	  list-style-type: none;
	  margin-bottom: 0;
	}
	.navbar-nav{
	  .nav-item {
		position: relative;
		margin-left: 15px;
		margin-right: 15px;
		a {
		  color: $color-dark;
		  font-size: 16px;
		  font-weight: 600;
		  padding-left: 0;
		  padding-right: 0;
		  padding-top: 20px;
		  padding-bottom: 20px;
		  &:hover {
			color: $color-primary;
		  }
		  &::before {
			font-family: 'Font Awesome 5 Free';
			font-weight: 600;
			font-size: 22px;
			position: absolute;
			content: '\f0de';
			left: 50%;
			bottom: 0;
			transform: translate(-50%, 15px);
			opacity: 0;
		  }
		}
		a.active {
		  color: $color-primary;
		  &::before {
			opacity: 1;
		  }
		}
		.toggle {
		  &::after {
			content: "\e900";
			font-family: "Flaticon";
			font-size: 8px;
			vertical-align: middle;
			margin-left: 5px;
			display: inline-block;
			color: $color-dark;
			transition: $transition;
		  }
		}
		.dropdown-menu {
		  border: none;
		  top: 66px;
		  left: 0;
		  z-index: 99;
		  opacity: 0;
		  width: 250px;
		  display: block;
		  border-radius: 0;
		  padding: 10px 0;
		  position: absolute;
		  visibility: hidden;
		  background: $color-white;
		  transition: $transition;
		  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
		  .nav-item {
			position: relative;
			padding-left: 16px;
			margin-left: 0;
			margin-right: 0;
			.nav-link {
			  color: $color-dark;
			  &:hover {
				color: $color-primary;
				&::before {
				  opacity: 0;
								}
								&.toggle {
									&::after {
										transform: rotateZ(90deg);
									}
								}
			  }
			}
			a.active {
			  color: $color-primary;
			  &::before {
				opacity: 0;
			  }
			}
		  }
		  .toggle {
			&::after {
			  content: "\e900";
				position: absolute;
				top: 10px;
			  right: 16px;
			  font-family: "Flaticon";
				font-size: 10px;
				color: $color-dark;
			  transition: $transition;
			}
		  }
		  a {
			font-size: 15px;
			font-weight: 500;
			text-transform: capitalize;
			padding-top: 8px;
			padding-bottom: 8px;
			margin: 0;
			display: block;
		  }
		}
		&:hover{
		  .dropdown-menu {
			opacity: 1;
			visibility: visible;
						margin-top: 0;
						.toggle::after {
							transform: none;
					}
					}
					.toggle::after {
						transform: rotateZ(90deg);
					}
				}
	  }
	}
	.side-option{
	  display: flex;
	  align-items: center;
	  .item{
			position: relative;
			margin-left: 15px;
			margin-right: 15px;
		.language{
		  a{
			color: $color-dark;
			font-size: 16px;
			font-weight: 600;
			i{
			  vertical-align: 3px;
			}
			img{
				width: 16px;
				height: 16px;
				max-width: 16px;
				border-radius: 50%;
				margin-top: -2px;
			}
		  }
		  .menu{
			border: none;
			top: 46px;
			left: -15px;
			z-index: 99;
			display: none;
			border-radius: 0;
			min-width: 130px;
			padding: 10px 5px;
			position: absolute;
			background: $color-white;
			transition: $transition;
			box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
			animation: fadeIn .3s linear 1;
			.menu-item{
			  padding: 5px;
			  .menu-link{
				font-size: 15px;
				font-weight: 500;
				color: $color-dark;
				&:hover{ 
					color: $color-primary;
				}
			  }
			}
			img{
				margin-top: 0;
				border-radius: 50%;
				margin-right: 5px;
				margin-top: -1.5px;
			}
		  }
		}
		.search{
		  i{
			vertical-align: middle;
		  }
		}
	  }
	}
  }
}
.language{
	a{
	color: $color-dark;
	font-size: 16px;
	font-weight: 600;
	i{
		vertical-align: 3px;
	}
	}
	.menu{
	border: none;
	top: 46px;
	left: -15px;
	z-index: 99;
	display: none;
	border-radius: 0;
	min-width: 100px;
	padding: 10px 5px;
	position: absolute;
	background: $color-white;
	transition: $transition;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
	animation: fadeIn .3s linear 1;
	.menu-item{
		padding: 5px;
		.menu-link{
		font-size: 15px;
		font-weight: 500;
		color: $color-dark;
		&:hover{
			color: $color-primary;
		}
		}
	}
	img{
		width: 16px;
		height: 16px;
		max-width: 16px;
		border-radius: 50%;
		margin-right: 5px;
	}
	}
}
.search {
  position: relative;
  transition: $transition;
}
.search-box{
  position: relative;
  width: auto;
  max-width: 400px;
  background: #fff;
  padding: 16px 10px;
  box-shadow: 0 10px 15px rgba(51, 47, 59, 0.1);
  margin: 0 auto;
  .search-form {
	position: relative;
	display: flex;
	.search-input {
	  display: block;
	  width: 100%;
	  line-height: initial;
	  border: 1px solid #eeeeee;
	  color: $color-dark;
	  outline: 0;
	  padding: 6px 12px;
	  transition: $transition;
	  &:focus {
		border-color: $color-primary;
	  }
	}
  }
  .mfp-close {
	width: unset;
	height: unset;
	top: -50px;
	opacity: 1;
	padding: 0 0 18px 10px;
	color: $color-white;
  }
}
.mfp-zoom-in {
	.mfp-with-anim {
		opacity: 0;
		transition: all 0.2s ease-in-out; 
		transform: scale(0.8); 
	}
	&.mfp-bg {
		opacity: 0;
		transition: all 0.3s ease-out;
	}
	&.mfp-ready {
		.mfp-with-anim {
		opacity: 1;
		transform: scale(1); 
		}
		&.mfp-bg {
		opacity: 0.8;
		}
	}  
	&.mfp-removing {
		.mfp-with-anim {
		transform: scale(0.8); 
		opacity: 0;
		}
		&.mfp-bg {
		opacity: 0;
		}
	}
}

.main-navbar-area.stickyadd {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	animation: slideInDown 1s 1;
	.constik-nav {
		margin-top: 0;
		.navbar-brand{
			display: block;
			}
	}
}

.header-area.header-two{
  .main-navbar-area.stickyadd{
	.constik-nav {
	  padding: 5px 0;
			background: rgba(0, 30, 76, 1);
	}
  }
}

.header-area.header-three{
  .main-navbar-area.stickyadd{
	.constik-nav {
	  padding: 5px 0;
		box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.08);
	}
  }
}

.constik-nav {
	.navbar {
		.navbar-nav {
			.nav-item {
				.dropdown-menu {
					li {
						.dropdown-menu {
							top: 0;
							opacity: 0;
							left: -250px;
							margin-top: 15px;
							visibility: hidden;
							li {
								a {
									color: $color-dark;
									&:hover {
										color: $color-primary;
									}
									&:focus {
										color: $color-primary;
									}
								}
								a.active {
									color: $color-primary;
								}
								.dropdown-menu {
									top: 0;
									opacity: 0;
									left: 250px;
									visibility: hidden;
									li {
										a {
											color: $color-dark;
											&:hover {
												color: $color-primary;
											}
											&:focus {
												color: $color-primary;
											}
										}
										a.active {
											color: $color-primary;
										}
										.dropdown-menu {
											top: 0;
											opacity: 0;
											left: 250px;
											visibility: hidden;
											li {
												a {
													color: $color-dark;
													&:hover {
														color: $color-primary;
													}
													&:focus {
														color: $color-primary;
													}
												}
												a.active {
													color: $color-primary;
												}
												.dropdown-menu {
													top: 0;
													opacity: 0;
													left: 250px;
													visibility: hidden;
													li {
														a {
															color: $color-dark;
															&:hover {
																color: $color-primary;
															}
															&:focus {
																color: $color-primary;
															}
														}
														a.active {
															color: $color-primary;
														}
														.dropdown-menu {
															top: 0;
															opacity: 0;
															left: 250px;
															visibility: hidden;
															li {
																a {
																	color: $color-dark;
																	&:hover {
																		color: $color-primary;
																	}
																	&:focus {
																		color: $color-primary;
																	}
																}
																a.active {
																	color: $color-primary;
																}
																.dropdown-menu {
																	top: 0;
																	opacity: 0;
																	left: 250px;
																	visibility: hidden;
																	li {
																		a {
																			color: $color-dark;
																			&:hover {
																				color: $color-primary;
																			}
																			&:focus {
																				color: $color-primary;
																			}
																		}
																		a.active {
																			color: $color-primary;
																		}
																	}
																}
																&:hover {
																	.dropdown-menu {
																		opacity: 1;
																		visibility: visible;
																	}
																}
															}
															li.active {
																a {
																	color: $color-primary;
																}
															}
														}
														&:hover {
															.dropdown-menu {
																opacity: 1;
																visibility: visible;
															}
														}
													}
													li.active {
														a {
															color: $color-primary;
														}
													}
												}
												&:hover {
													.dropdown-menu {
														opacity: 1;
														visibility: visible;
													}
												}
											}
											li.active {
												a {
													color: $color-primary;
												}
											}
										}
										&:hover {
											.dropdown-menu {
												opacity: 1;
												visibility: visible;
											}
										}
									}
									li.active {
										a {
											color: $color-primary;
										}
									}
								}
								&:hover {
									.dropdown-menu {
										opacity: 1;
										visibility: visible;
									}
								}
							}
							li.active {
								a {
									color: $color-primary;
								}
							}
						}
						&:hover {
							.dropdown-menu {
								opacity: 1;
								visibility: visible;
								margin-top: 0;
							}
						}
					}
					li.active {
						a {
							color: $color-primary;
						}
					}
				}
				&:hover {
					.dropdown-menu {
						opacity: 1;
						visibility: visible;
						margin-top: 0;
					}
				}
			}
		}
	}
}
@media only screen and (max-width: 1199px) {
  .header-area{
	.top-header-area{
		background: rgba(26,26,26,0.69);
		padding: 20px 0;
		.navbar-brand{
			display: none;
		}
		.contact-info{
			.contact-info-content {
				margin-left: 10px;
			}
			i{
				position: unset;
				width: unset;
				height: unset;
				vertical-align: 3px;
			}
		}
	}
    }
    .header-area.header-two,
    .header-area.header-three{
			position: unset;
        .top-header-area{
            .contact-info{
                text-align: center;
              .contact-info-content {
                margin-left: unset;
                p{
                  margin-right: unset;
                }
                p,a{
                    display: block;
                }
            }
            }
          }
    }
  .main-navbar-area{
	  position: relative;
  }
  .constik-responsive-menu {
	.logo {
		.logo2 {
			display: none;
		}
	}
}
  .constik-responsive-nav {
	display: block;
	background: $color-white;
	border: 2px solid $color-primary;
	padding-top: 15px;
	padding-bottom: 15px;
	.constik-responsive-menu {
	  position: relative;

	}
	.constik-responsive-menu.mean-container {
	  .mean-nav {
			.navbar-nav{
				height: 300px;
				overflow-y: scroll;
			}
		ul {
		  font-size: 15px;
		  li {
			a.active {
			  color: $color-primary;
			}
			li {
			  a {
				font-size: 14.5px;
			  }
			}
		  }
		}
		.navbar-brand{
		  display: none;
		}
		.side-option{
		  display: none;
		}
		
	  }
	  .navbar-nav {
		overflow-y: scroll;
		box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.1);
	  }
	}
	.logo{
	  position: relative;
	  width: 60%;
	  z-index: 999;
	}
	.mean-container {
	  a.meanmenu-reveal {
		padding-top: 12px;
		color: $color-dark;
		span {
		  background: $color-dark;
		}
	  }
	}
  }
  .constik-nav {
	display: none;
  } 
  .side-option-responsive{
	display: flex;
	align-items: center;
	position: absolute;
    top: 50%;
    right: 45px;
    transform: translateY(-50%);
    z-index: 999;
	.item{
		position: relative;
		margin-right: 14px;
		.language{
			a{
				color: $color-dark;
				font-size: 16px;
				font-weight: 600;
				i{
					vertical-align: 2px;
				}
			}
			.menu{
				margin: 0;
				padding: 0;
				padding: 5px 0 5px 5px;
				border: none;
				top: 30px;
				left: -15px;
				z-index: 99;
				width: 120px;
				display: none;
				border-radius: 0;
				position: absolute;
				background: $color-white;
				transition: $transition;
				box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
				list-style-type: none;
				.menu-item{
					display: flex;
					align-items: center;
					.menu-link{
						font-size: 15px;
						font-weight: 500;
					}
				}
			}
		}
		.search{
				i{
				vertical-align: middle;
				}
			}
		}
	}
}

/* -----------------------------------------
  Banner CSS
----------------------------------------- */
.home-banner-area{
  padding-top: 160px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background-image: url(../img/banner/banner-bg-1.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  &::before{
	content: '';
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(26,26,26,0.4962359943977591);
  }
}

.banner-content{
  padding-top: 200px;
  padding-bottom: 200px;
  h1{
	font-size: 60px;
	color: $color-white;
	margin-bottom: 20px;
	margin-top: -15px;
	line-height: 1.2;
	span{
	  color: $color-primary;
	}
  }
  p{
	font-size: 18px;
	color: $color-white;
	margin-bottom: 35px;
  }
  .social-link{
	a{
		display: inline-block;
    color: $color-primary;
    margin-right: 4px;
    background: $bg-secondary;
    border-radius: 50%;
    font-size: 12px;
    padding: 0;
    width: 26px;
    height: 26px;
		line-height: 26px;
		border: 1px solid $bg-secondary;
	  &:last-child{
		margin-right: 0;
	  }
	  &:hover{
		color: $color-primary;
		background: transparent;
		border: 1px solid $color-primary;
	  }
	}
  }
  .cta-btn{
	margin-bottom: 40px;
  }
}
.banner-img{
  img{
	max-width: 576px;
  }
}

.banner-two{
	padding-top: 152px;
  background-image: url(../img/banner/banner-bg-2.jpg);
  &::before{
	content: '';
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 30, 76, 0.62);
  }
	.banner-content{
		text-align: center;
		.cta-btn{
			margin-bottom: 0;
		}
	}
}
.banner-three{
	background: unset;
	background: #fff;
  padding: unset;
  &.home-banner-area::before {
	background: unset;
	background: none;
  }
  .banner-content{
	.cta-btn{
	  margin: unset;
	}
  }
  .banner-slider{
	.owl-item{
	  &::before{
		content: '';
		position: absolute;
		z-index: -1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 30, 76, 0.62);
	  }
	  &:nth-child(1){
		background: url(../img/banner/banner-slider-1.jpg) no-repeat center;
		background-size: cover;
	  }
	  &:nth-child(2){
		background: url(../img/banner/banner-slider-2.jpg) no-repeat center;
		background-size: cover;
	  }
	  &:nth-child(3){
		background: url(../img/banner/banner-slider-3.jpg) no-repeat center;
		background-size: cover;
	  }
	}
  }
  .owl-item.active {
		h1 {
			animation: fadeInDown 2s both 1;
		}
		p {
			animation: fadeIn 2s both 1;
		}
		.cta-btn {
			animation: fadeInUp 2s both 1;
		}
	}
  .owl-carousel{
	.owl-dots {
	  text-align: center;
	  position: absolute;
	  left: 50%;
	  bottom: 50px;
	  display: flex;
	  align-items: center;
	  transform: translateX(-50%);
	  .owl-dot {
		display: inline-block;
		width: 6px;
		height: 24px;
		margin: 5px;
		border-radius: 30px;
		background: $color-white;
		transition: $transition;
	  }
	  .owl-dot.active {
		height: 45px;
		background: $color-primary;
	  }
	}
  }
}

/* -----------------------------------------
 About CSS
----------------------------------------- */
.about-section{
  .about-content{
	margin-bottom: 30px;
	h2{
	  margin-bottom: 18px;
	  line-height: 1.3;
	  span{
		color: $color-primary;
	  }
	}
	p{
		line-height: 1.5;
	  margin-bottom: 10px;
	}
	.about-item-list{
	  margin-bottom: 30px;
	  ul{
		padding: 0;
		margin: 0;
		list-style-type: none;
		li{
		  display: block;
		  font-weight: 500;
		  margin-bottom: 6px;
		  padding-left: 25px;
		  position: relative;
		  line-height: 1.8;
		  color: $color-medium;
		  &:last-child{
			margin-bottom: 0;
		  }
		  i{
			margin-left: -25px;
			margin-right: 5px;
			color: $color-primary;
			vertical-align: -2px;
		  }
		}
	  }
	}
  }
  .about-image{
	margin-bottom: 30px;
  }
  .left,
  .right{
	position: relative;
	&::before{
	  position: absolute;
	  content: '';
	  width: 0;
	  height: 0;
	  bottom: -15px;
	}
  }
  .left{
	&::before{
	  right: -15px;
	  border-bottom: 150px solid rgba(255, 188, 19, 0.8);
	  border-left: 150px solid transparent;
	}
  }
  .right{
	margin-top: -15px;
	&::before{
	  left: -15px;
	  border-bottom: 135px solid rgba(255, 188, 19, 0.8);
	  border-right: 135px solid transparent;
	}
  }
  .about-fact{
	display: flex;
	position: relative;
	padding: 35px 30px;
	margin-bottom: 30px;
	background: url(../img/about/about-fact-bg.jpg) no-repeat center;
	background-size: cover;
	z-index: 1;
	align-items: center;
	justify-content: center;
	&::after{
	  position: absolute;
	  content: '';
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  background: rgba(26, 26, 26, .8);
	  z-index: -1;
	}

	i{
	  width: 60px;
	  height: 60px;
	  line-height: 57px;
	  background: $color-white;
	  text-align: center;
	  display: inline-block;
	  img{
		width: 32px;
	  }
	}
	.content{
	  padding-left: 16px;
	  h4{
		color: $color-primary;
		margin-bottom: 0;
	  }
	  span{
		color: $color-white;
	  }
	}
  }
  .about-img-content{
	position: relative;
	overflow: hidden;
	.overlay-content{
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  margin-top: -15px;
	  padding: 25px 30px;
	  border: 4px solid $color-primary;
	  background: rgba(0, 30, 76, 0.9);
	  z-index: 1;
	  h3{
		line-height: 1.2;
		color: $color-primary;
	  }
	  span{
				color: $color-white;
	  	}
		}
  }
}

.about-section.about-style-two{
	.about-img-content{
		position: relative;
		overflow: hidden;
		margin-bottom: 30px;
		.about-image{
			margin-bottom: 15px;
			img{
				max-width: unset;
			}
		}
		.about-fact{
			display: block;
			overflow: hidden;
			margin-bottom: 0;
			background: $color-secondary;
			max-width: calc(100% - 55px);
			padding: 20px 0;
			&::before{
				position: absolute;
				content: '';
				right: 0;
				top: 0;
				border-top: 90px solid $color-primary;
				border-left: 60px solid transparent;
			}
			&::after{
				position: absolute;
				content: '';
				left: 0;
				top: 0;
				width: unset;
				height: unset;
				background: unset;
				border-bottom: 90px solid $color-primary;
				border-right: 60px solid transparent;
			}
			.content{
				padding-left: 16px;
				text-align: center;
				h4{
					color: $color-primary;
					margin-top: -5px;
					margin-bottom: 0;
				}
				span{
					color: $color-white;
				}
			}
		}
		.overlay-img{
			position: absolute;
			bottom: 35px;
			right: 0;
			height: calc(100% - 135px);
		}
	}
}
.about-section.about-style-three{
	.about-img-content{
		margin-bottom: 30px;
		[class*='col-']:first-child{
			padding-right: 5px;
		}
		[class*='col-']:last-child{
			padding-left: 5px;
		}
		.about-image{
			margin-bottom: 10px;
		}
	}
}
/* -----------------------------------------
  Service CSS
----------------------------------------- */
.strong-service-section {
  background: url(../img/service-bg-1.jpg) no-repeat center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  z-index: 1;
  &::after{
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(26, 26, 26, .7);
	z-index: -1;
  }
  .service-content{
	margin-bottom: 30px;
	padding: 43px 0;
	position: relative;
	z-index: 1;
	&::after{
	  position: absolute;
	  content: '';
	  left: -60px;
	  top: 0;
	  width: 40%;
	  height: 100%;
	  background: $color-primary;
	  z-index: -1;
	}
	h2{
	  color: $color-white;
	  line-height: 1.3;
	  margin-top: -10px;
	  margin-bottom: 15px;
	}
	p{
	  color: $color-white;
	  margin-bottom: 30px;
	}
	.primary-btn{
	  background: $color-white;
	}
  }
  .custom-owl-nav{
	position: absolute;
	bottom: 0;
	right: 0;
  }
}

.strong-service-slider{
  .slider-item{
	padding: 58px 30px;
	border: 2px solid rgba(255,255,255, .3);
	max-width: 350px;
	background: rgba(26, 26, 26, .8);
	transition: $transition;
	>i{
	  width: 60px;
	  height: 60px;
	  line-height: 57px;
	  margin-bottom: 18px;
	  background: $color-white;
	  text-align: center;
	  display: block;
	  img{
		display: inline-block;
		max-width: 32px;
	  }
	}
	h3{
	  margin-bottom: 10px;
	  a{
		color: $color-white;
		&:hover{
		  color: $color-primary;
		}
	  }
	}
	p{
	  margin-bottom: 20px;
	  color: $color-light;
	}
	.read-more-btn{
	  color: $color-white;
	  i{
		vertical-align: -2px;
		color: $color-primary;
	  }
	  &:hover{
		color: $color-primary;
	  }
	}
  }
  .owl-nav{
	position: absolute;
	left: -10%;
	bottom: 0;
  }
  .slider-item:hover{
	border: 2px solid rgba(255,255,255, .8);
  }
}

.best-service-section{
	background: url(../img/bg-map-1.png) no-repeat center;
	background-size: cover;
	.section-title{
		h2{
			margin-top: -10px;
		}
	}
	.service-item-single{
		position: relative;
		padding: 50px 30px;
		margin-bottom: 30px;
		border: 2px solid $color-secondary;
		overflow: hidden;
		background: transparent;
		transition: $transition;
		&::before{
			position: absolute;
			content: '';
			top: -50px;
			right: -50px;
			border-top: 100px solid $color-primary;
			border-left: 100px solid transparent;
			transition: $transition;
		}
	>i{
	  width: 60px;
	  height: 60px;
	  line-height: 57px;
	  margin-bottom: 18px;	
	  background: $color-primary;
	  text-align: center;
	  display: block;
	  img{
		display: inline-block;
		max-width: 32px;
	  }
	}
	h3{
	  a{
		color: $color-secondary;
	  }
	  margin-bottom: 5px;
	}
	p{
	  margin-bottom: 20px;
	  color: $color-dark;
	}
	.read-more-btn{
	  color: $color-dark;
	  i{
		vertical-align: -2px;
		color: $color-primary;
	  }
		}
		&:hover{
			background: $color-secondary;
			&::before{
				top: 15px;
				right: 15px;
			}
			>i{
				background: $color-white;
			}
			h3{
				a{
		  color: $color-white;
		  &:hover{
			color: $color-primary;
		  }
		}
			}
			p{
				color: $color-light;
	  }
	  .read-more-btn{
		color: $color-white;
		&:hover{
			color: $color-primary;
		}
			}
		}
	}
}
.best-service-section.service-two{
  .service-item-single{
	background: $bg-primary;
	text-align: center;
	&:hover {
	  background: $color-secondary;
	}
	> i{
	  margin-left: auto;
	  margin-right: auto;
	}
	}
}

.about-services-section{
	position: relative;
    z-index: 1;
	background: url(../img/service-bg-1.jpg) no-repeat center;
	background-size: cover;
	&::after {
		position: absolute;
		content: '';
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 30, 76, 0.7);
		z-index: -1;
	}
	.service-item-single{
		position: relative;
		padding: 50px 30px;
		margin-bottom: 30px;
		transition: $transition;
		text-align: center;
		background: $color-white;
		z-index: 1;
		&::before{
			position: absolute;
			content: '';
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
			opacity: .09;
			background: url(../img/service-bg-shape.png) no-repeat center;
			z-index: -1;
		}
		>i{
		width: 60px;
		height: 60px;
		line-height: 57px;
		margin-bottom: 15px;
		background: $color-primary;
		display: block;
		margin-left: auto;
    	margin-right: auto;
		img{
			display: inline-block;
			max-width: 32px;
			}
		}
	h3{
	  a{
		color: $color-secondary;
	  }
	  margin-bottom: 10px;
	}
	p{
	  color: $color-dark;
	}
	}
}

/* -----------------------------------------
  Works CSS
----------------------------------------- */
.our-works-section{
  position: relative;
  overflow: hidden;
  z-index: 1;
  &::after{
	position: absolute;
	content: '';
	right: 0;
	top: 0;
	width: 40%;
	height: 40%;
	background: $color-primary;
	z-index: -1;
  }
  .works-content{
	h2{
	  margin-bottom: 25px;
	  line-height: 1.3;
	  span{
		color: $color-primary;
	  }
	}
	p{
	  margin-bottom: 20px;
	}
	.works-item{
	  .works-item-single{
		display: flex;
		align-items: center;
		position: relative;
		padding: 35px 60px;
		margin-bottom: 15px;
		background: url(../img/item-bg-2.jpg) no-repeat center;
		background-size: cover;
		max-width: calc(100% - 60px);
		justify-content: center;
		&:first-child{
		  background: url(../img/item-bg-1.jpg) no-repeat center;
		  background-size: cover;
		}
		&:last-child{
		  background: url(../img/item-bg-3.jpg) no-repeat center;
		  background-size: cover;
		}
		&::after{
		  position: absolute;
		  content: '';
		  left: 0;
		  top: 0;
		  width: 100%;
		  height: 100%;
		  background: rgba(26, 26, 26, .8);
		}
		&::before{
		  position: absolute;
		  content: '';
		  left: 50%;
		  bottom: -30px;
		  transform: translateX(-50%);
		  border-left: 20px solid transparent;
		  border-right: 20px solid transparent;
		  border-top: 30px solid $color-primary;
		  z-index: 1;
		}
	
		i{
		  width: 60px;
		  height: 60px;
		  line-height: 57px;
		  background: $color-white;
		  text-align: center;
		  display: inline-block;
		  z-index: 1;
		  img{
			width: 32px;
		  }
		}
		.content{
		  padding-left: 16px;
		  z-index: 1;
		  h4{
			color: $color-white;
			margin-bottom: 0;
		  }
		}
		&:last-child{
		  margin-bottom: 0;
		  &::before{
			display: none;
		  }
		}
	  }
	}
  }
  .works-image{
	height: calc(100% - 15px);
	background: url('../img/video-img-1.jpg') no-repeat center;
	background-size: cover;
	position: relative;
	z-index: 1;
	&::after{
	  position: absolute;
	  content: '';
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  background: rgba(26, 26, 26, .5);
	  z-index: -2;
	}
	&::before{
		position: absolute;
		content: '';
		width: 0;
		height: 0;
		bottom: -15px;
		left: -15px;
		border-bottom: 170px solid rgba(255, 188, 19, 0.8);
		border-right: 170px solid transparent;
		z-index: -1;
	}
	img{
	  opacity: 0;
	}
	.video-btn {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  width: 90px;
	  height: 90px;
	  background-color: $color-primary;
	  border-radius: 50%;
	  position: absolute;
	  z-index: 1;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%);
	  i {
		color: $color-white;
	  }
	  &::after,
	  &::before {
		z-index: -1;
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		animation: ripple 3s linear infinite;
		opacity: 0;
		border-radius: 50%;
		background: $color-primary;
	  }
	  &::before {
		animation-delay: 1s;
	  }
	}
  }
}

/* -----------------------------------------
  Projects CSS
----------------------------------------- */
.finished-projects-section{
  position: relative;
	z-index: 1;
		.bg-image{
			overflow: hidden;
			img{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 413px;
				z-index: -1;
				object-fit: cover;
			}
			&::after {
				position: absolute;
				content: '';
				left: 0;
				top: -1px;
				width: 100%;
				height: 415px;
				background: rgba(255, 249, 233, 0.95);
				z-index: -1;
		}
		}
  .finished-projects-slider{
	margin-bottom: 40px;
	.slider-item{
	  overflow: hidden;
	  .overlay-content{
		position: absolute;
		overflow: hidden;
		width: calc(100% - 30px);
		height: calc(100% - 30px);
		top: 15px;
		left: 15px;
		opacity: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		text-transform: capitalize;
		transition: $transition;
		background: rgba(26, 26, 26, 0.7);
		&::before{
		  position: absolute;
		  content: '';
		  top: -50px;
		  right: -50px;
		  border-top: 100px solid  rgba(255, 188, 19, 0.8);
		  border-left: 100px solid transparent;
		  transition: $transition;
		}
		h3{
		  a{
			color: $color-white;
			&:hover{
			  color: $color-primary;
			}
		  }
		}
	  }
	  .image img{
		transition: $transition;
	  }
	  &:hover{
		img{
		  transform: scale(1.1);
		}
		.overlay-content{
		  opacity: 1;
		  &::before{
			top: 10px;
			right: 10px;
		  }
		}
	  }
	}
	.owl-nav{
	  position: absolute;
	  right: 0;
	  top: -60px;
	  margin-top: -40px;
	}
  }
}

.finished-projects-section.style-two{
		.bg-image{
			&::after {
				background: rgba(0, 30, 76, 0.78);
			}
		}
	.section-title{
		h2{
			color: $color-white;
		}
	}
	.slider-item{
		.overlay-content{
			background: rgba(0, 30, 76, 0.7);
			&::after{
				position: absolute;
				content: '';
				bottom: -50px;
				left: -50px;
				border-bottom: 100px solid $color-primary;
				border-right: 100px solid transparent;
				transition: $transition;
			}
		}
		&:hover{
			.overlay-content{
				&::after{
					bottom: 10px;
					left: 10px;
				}
			}
		}
	}
}

.projects-section{
	.projects-item{
		position: relative;
		overflow: hidden;
		margin-bottom: 30px;
	  .overlay-content{
		position: absolute;
		overflow: hidden;
		width: calc(100% - 30px);
		height: calc(100% - 30px);
		top: 15px;
		left: 15px;
		opacity: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		text-transform: capitalize;
		text-align: center;
		transition: $transition;
		background: rgba(0, 30, 76, 0.7);
		&::after{
			position: absolute;
			content: '';
			bottom: -50px;
			left: -50px;
			border-bottom: 100px solid $color-primary;
			border-right: 100px solid transparent;
			transition: $transition;
		}
		&::before{
		  position: absolute;
		  content: '';
		  top: -50px;
		  right: -50px;
		  border-top: 100px solid  rgba(255, 188, 19, 0.8);
		  border-left: 100px solid transparent;
		  transition: $transition;
		}
		h3{
		  a{
			color: $color-white;
			&:hover{
			  color: $color-primary;
			}
		  }
		}
		p{
			color: $color-light;
		}
	  }
	  .image img{
		transition: $transition;
	  }
	  &:hover{
		img{
		  transform: scale(1.1);
		}
		.overlay-content{
		  opacity: 1;
		  &::before{
			top: 10px;
			right: 10px;
			}
			&::after{
				bottom: 10px;
				left: 10px;
			}
		}
	  }
	}
}
/* -----------------------------------------
  Team CSS
----------------------------------------- */
.team-section {
  position: relative;
  overflow: hidden;
  z-index: 1;
  .team-content{
	margin-bottom: 30px;
	padding: 98px 0;
	position: relative;
	z-index: 1;
	&::after{
	  position: absolute;
	  content: '';
	  left: -60px;
	  top: 0;
	  width: 40%;
	  height: 100%;
	  background: $color-primary;
	  z-index: -1;
	}
	h2{
	  line-height: 1.3;
	  margin-top: -10px;
	  margin-bottom: 15px;
	}
	p{
	  margin-bottom: 30px;
	}
	.primary-btn{
	  color: $color-white;
	  background: $color-dark;
	  &:hover {
		color: $color-dark;
		&::before,
		&::after {
		  background: $color-white;
		  height: 100%;
		}
	  }
	}
  }
}

.team-slider{
  .slider-item{
	overflow: hidden;
	max-width: 350px;
	.image{
	  margin: 0 10px 0;
	  overflow: hidden;
	  img{
		transition: $transition;
	  }
	}
	.content{
	  position: relative;
	  overflow: hidden;
	  padding: 16px;
	  text-align: center;
	  background: $color-dark;
	  h3{
			margin-bottom: 0;
		a{
		  color: $color-white;
		  &:hover{
			color: $color-primary;
		  }
		}
	  }
	  span{
		color: $color-light;
	  }
	}
	.overlay-content{
	  position: absolute;
	  top: 0;
	  left: 0;width: 100%;
	  opacity: 0;
	  padding: 25px;
	  transition: $transition;
	  &::before{
		position: absolute;
		content: '';
		top: -100px;
		right: 0;
		border-top: 100px solid rgba(255, 188, 19, 0.8);
		border-left: 100px solid transparent;
		transition: $transition;
	  }
	  .social-link{
		display: inline-block;
		a{
		  display: block;
		  line-height: 0;
		  text-align: center;
		  background: $color-dark;
		  color: $color-primary;
		  padding: 12px;
		  font-size: 12px;
		  margin-bottom: 8px;
		  margin-right: unset;
		  transform: rotateY(90deg);
		  &:hover{
			background: $color-primary;
			color: $color-dark;
		  }
		}
	  }
	}
	&:hover{
	  .image{
		img{
		  transform: scale(1.1);
		}
	  }
	  .overlay-content{
		opacity: 1;
		&::before{
		  top: -10px;
		}
		a{
		  transform: rotateY(0);
		}
	  }
	}
	}
	.owl-nav{
		position: absolute;
		left: -10%;
		bottom: 0;
	}
}

.team-section.team-two{
  background: unset;
  @extend .team-section;
  .content {
	text-align: center;
	background: $color-secondary;
  }
  .overlay-content{
	height: 70%;
	left: 30px;
	top: 30px;
	width: calc(100% - 60px);
	background: rgba(255,255,255, .8);
	display: flex;
	align-items: center;
	justify-content: center;
	&::before{
	  content: unset;
	}
	.social-link{
	  a{
		margin: unset;
		margin-right: 8px;
		display: inline-block;
		background: $color-secondary;
	  }
	}
  }
  .cta-btn{
	.primary-btn {
	  color: $color-white;
	  background: $color-secondary;
	  &::before,
	  &::after {
		background-color: $color-primary;
	  }
	  &:hover {
		color: $color-white;
	  }
	}
  }
}

.team-members-section{
	.team-item{
		position: relative;
		overflow: hidden;
		margin-bottom: 30px;
		.image{
			margin: 10px 10px 0;
			overflow: hidden;
			img{
			transition: $transition;
			}
		}
		.content{
			position: relative;
			overflow: hidden;
			padding: 16px;
			text-align: center;
			background: $color-secondary;
			&::before{
			position: absolute;
			content: '';
			right: 0;
			top: 0;
			border-bottom: 100px solid $color-primary;
			border-left: 100px solid transparent;
			}
			&::after{
			position: absolute;
			content: '';
			left: 0;
			top: 0;
			border-top: 100px solid $color-primary;
			border-right: 100px solid transparent;
			}
			h3{
			a{
				color: $color-white;
				&:hover{
				color: $color-primary;
				}
			}
			}
			span{
			color: $color-light;
			}
		}
		.overlay-content{
			position: absolute; 
			top: 0;
			left: 0;width: 100%;
			opacity: 0;
			padding: 25px;
			transition: $transition;
			&::before{
			position: absolute;
			content: '';
			top: -100px;
			right: 0;
			border-top: 100px solid rgba(255, 188, 19, 0.8);
			border-left: 100px solid transparent;
			transition: $transition;
			}
			.social-link{
				display: inline-block;
			a{
				display: block;
				line-height: 0;
				text-align: center;
				background: $color-secondary;
				color: $color-primary;
				padding: 12px;
				font-size: 12px;
				margin-bottom: 8px;
				margin-right: unset;
				transform: rotateY(90deg);
				&:hover{
				background: $color-primary;
				color: $color-dark;
				}
			}
			}
		}
		&:hover{
			.image{
			img{
				transform: scale(1.1);
			}
			}
			.overlay-content{
			opacity: 1;
			&::before{
				top: -10px;
			}
			a{
				transform: rotateY(0);
			}
			}
		}
	}
}
/* -----------------------------------------
  Testimonials CSS
----------------------------------------- */
.testimonial-section{
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: url(../img/testimonial-bg.jpg) no-repeat top;
  &::after{
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	max-height: 413px;
	background: rgba(26, 26, 26, 0.7);
	z-index: -1;
  }
  .testimonial-image{
	position: absolute;
	width: 100%;
	padding-right: 30px;
	img{
		width: 100%;
		height: unset;
	}
  }
  .team-content{
	h2{
	  margin-bottom: 25px;
	  color: $color-white;
	}
  }
  .testimonial-slider{
	background: $bg-fff3cf;
	.slider-item{
		display: flex;
		flex:1;
		display: -ms-block;
	  align-items: center;
	  justify-content: center;
	  flex-direction: column;
	  text-align: center;
	  padding: 50px 70px;
	  i{
		font-size: 50px;
	  }
	  p{
		font-size: 25px;
		color: $color-dark;
		font-weight: 600;
		margin-top: 20px;
		margin-bottom: 20px;
		line-height: 1.6;
	  }
	  .client-img{
		position: relative;
		margin-bottom: 20px;
		&::after{
		  position: absolute;
		  content: '';
		  right: -5px;
		  bottom: -5px;
		  border-bottom: 40px solid $color-primary;
		  border-left: 40px solid transparent;
		  z-index: -1;
		}
	  }
	  .client-info{
		h6{
		  margin: 0;
		  font-size: 18px;
		}
	  }
	}
	.owl-nav{
	  position: absolute;
	  right: -15%;
	  top: 30%;
	}
  }
}
.testimonial-section.testimonial-two{
  &::after{
	background: rgba(0, 30, 76, 0.7);
  }
  .testimonial-slider{
	&::before {
	  position: absolute;
	  content: '';
	  bottom: 10px;
	  right: 10px;
	  border-bottom: 100px solid $color-primary;
	  border-left: 100px solid transparent;
		transition: $transition;
		z-index: 1;
	}
	&::after {
	  position: absolute;
	  content: '';
	  top: 10px;
	  left: 10px;
	  border-top: 100px solid $color-primary;
	  border-right: 100px solid transparent;
	  transition: $transition;
	  z-index: 1;
	}
  }
  .section-title{
	h2{
	  color: $color-white;
	}
  }
  .owl-nav{
	position: unset;
	right: unset;
	top: unset;
	button{
	  top: 50%;
	  transform: translateY(-50%);
	  position: absolute;
	}
	.owl-prev{
	  left: -50px;
	}
	.owl-next{
	  right: -50px;
	}
  }
}

.testimonial-section.testimonial-three{
	background: $bg-primary;
	background: unset;
	.section-title{
		h2{
			margin-top: -10px;
		}
	}
  &::after{
		content: none;
	content: unset;
  }
  @extend .testimonial-two;
}

/* -----------------------------------------
  Blog CSS
----------------------------------------- */
.blog-section{
  .owl-nav {
	position: absolute;
	right: 0;
	top: -60px;
	margin-top: -40px;
  }
}
.blog-item-single{
	margin-bottom: 30px;
	background: $color-white;
  .blog-item-img{
	overflow: hidden;
	position: relative;
	margin-bottom: 20px;
	.overlay-content{
	  position: absolute;
	  overflow: hidden;
	  width: calc(100% - 20px);
	  height: calc(100% - 20px);
	  top: 10px;
	  left: 10px;
	  opacity: 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  text-transform: capitalize;
	  transition: $transition;
		background: rgba(26, 26, 26, 0.7);
	  &::before{
		position: absolute;
		content: '';
		top: -50px;
		right: -50px;
		border-top: 100px solid rgba(255, 188, 19, 0.8);
		border-left: 100px solid transparent;
		transition: $transition;
	  }
	  &::after{
		position: absolute;
		content: '';
		bottom: -50px;
		left: -50px;
		border-bottom: 100px solid rgba(255, 188, 19, 0.8);
		border-right: 100px solid transparent;
		transition: $transition;
	  }
	  a{
		font-size: 32px;
		color: $color-white;
		&:hover{
		  color: $color-primary;
		}
	  }
	}
	.image img{
	  transition: $transition;
	}
	&:hover{
	  .overlay-content{
		opacity: 1;
		&::before{
		  top: 10px;
		  right: 10px;
		}
		&::after{
		  bottom: 10px;
		  left: 10px;
		}
	  }
	}
  }
  .blog-item-img{
	.tag{
	  position: absolute;
	  top: 10px;
	  left: 10px;
	  padding: 6px 6px 8px;
	  text-align: center;
	  background: $color-dark;
	  span{
		font-size: 18px;
		font-weight: 500;
		display: block;
		&:first-child{
		  border-bottom: 2px solid $color-medium;
		  color: $color-white;
		}
		&:last-child{
		  color: $color-primary;
		}
	  }
	}
	}
	.blog-item-content{
		padding: 0 15px 20px 15px;
	}
  .read-more-btn{
	font-weight: 600;
	i {
	  vertical-align: -2px;
	  color: $color-primary;
	}
  } 
}

.blog-grid{
	@extend .blog-section;
	.blog-item-img{
		.overlay-content{
			background: rgba(0, 30, 76, 0.7);
		}
	}
}
/* -----------------------------------------
  Partner CSS
----------------------------------------- */
.partner-area {
	.partner-slider{
	.slider-item {
	  position: relative;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  img {
		cursor: pointer;
		width: auto;
		transition: $transition;
		&:last-child {
		  position: absolute;
		  top: 0;
		  left: 50%;
		  transform: translateX(-50%);
		  opacity: 0;
		}
	  }
	  &:hover {
		img {
		  &:first-child {
			opacity: 0;
		  }
		  &:last-child {
			opacity: 1;
		  }
		}
	  }
	}
  }
}
.partner-two{
  @extend .partner-area;
  padding: 15px 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: url(../img/service-bg-1.jpg) no-repeat center;
  background-size: cover;
  &::after{
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: .9;
	background: $bg-secondary;
	z-index: -1;
  }
  .partner-slider{
	.slider-item{
	  transition: $transition;
	  padding: 40px 20px;
	  &:hover{
		background: $color-secondary;
	  }
	  img {
		&:last-child {
		  top: 50%;
		  transform: translate(-50%, -50%);
		}
	  }
	}
  }
}

/* -----------------------------------------
  Newsletter CSS
----------------------------------------- */
.newsletter-section{
  position: relative;
  background: url(../img/newsletter-bg-1.jpg) no-repeat center;
  background-size: cover;
  background-position: top;
  z-index: 1;
  &::after{
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(26, 26, 26, 0.5);
	z-index: -1;
  }
  &::before{
	position: absolute;
	content: '';
	right: 0;
	top: 0;
	width: 50%;
	height: 100%;
	background: rgba(26, 26, 26, 0.9);
	z-index: -1;
  }
  .newsletter-content{
	padding-left: 30px;
	h2{
	  color: $color-white;
	  line-height: 1.3;
	  margin-top: -10px;
	  margin-bottom: 15px;
	}
	p{
	  color: $color-light;
	  margin-bottom: 30px;
	}
	.newsletter-form{
	  .form-control{
		color: $color-light;
		height: auto;
		background: transparent;
		border-radius: 0;
		border: 1px solid $color-primary;
	  }
	}
  }
}
.validation-danger,
.validation-success{
  position: relative;
  padding: 10px;
  width: 50%;
  margin-top: 15px;
  text-align: center;
}
.validation-danger{
  color: $color-white;
  background: var(--danger);
  &::after{
	position: absolute;
	content: '';
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 30px solid var( --danger);
  }
}
.validation-success{
  color: $color-white;
  background: var(--success);
}

.help-block ul li {
  position: relative;
  padding: 5px;
  width: 50%;
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: $color-white;
  background: var(--danger);
  &::after{
	position: absolute;
	content: '';
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 16px solid var(--danger);
  }
}
#msgSubmit{
  font-size: 20px;
  margin-top: 8px;
}

.newsletter-section.newsletter-two{
  background: unset;
  &::before{
	content: unset;
  }
  &::after{
	content: unset;
  }
  .content-container{
	position: relative;
	z-index: 1;
	background: url(../img/newsletter-bg-2.jpg) no-repeat center;
	position: relative;
	background-size: cover;
	&::after{
	  position: absolute;
	  content: '';
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  z-index: -1;
	  background: -moz-linear-gradient(left,  rgba(26,26,26,0.9) 0%, rgba(26,26,26,0.3) 100%);
	  background: -webkit-linear-gradient(left,  rgba(26,26,26,0.9) 0%,rgba(26,26,26,0.3) 100%);
	  background: linear-gradient(to right,  rgba(26,26,26,0.9) 0%,rgba(26,26,26,0.3) 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e61a1a1a', endColorstr='#4d1a1a1a',GradientType=1 );
	}
  }
  .newsletter-content{
	h2{
	  margin-bottom: 20px;
	}
  }
}

.newsletter-section.newsletter-three{
  @extend .newsletter-section;
  background: url(../img/newsletter-bg-1.jpg) no-repeat center;
  background-size: cover;
  background-position: top;
  &::after{
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: -moz-linear-gradient(left,  rgba(0,30,76,0.9) 0%, rgba(0,30,76,0.3) 100%);
	background: -webkit-linear-gradient(left,  rgba(0,30,76,0.9) 0%,rgba(0,30,76,0.3) 100%);
	background: linear-gradient(to right,  rgba(0,30,76,0.9) 0%,rgba(0,30,76,0.3) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6001e4c', endColorstr='#4d001e4c',GradientType=1 );
	z-index: -1;
  }
  &::before{
	content: unset;
  }
  .newsletter-content{
	h2{
	  margin-bottom: 20px;
	}
	}
	.newsletter-content{
		padding-left: 0;
	}
}
/* -----------------------------------------
  Instrument CSS
----------------------------------------- */
.instrument-section{
  position: relative;
  overflow: hidden;
  .instrument-content{
	max-width: 420px;
	margin-bottom: 30px;
	padding-right: 15px;
	h2{
	  margin-bottom: 25px;
	  line-height: 1.3;
	  span{
		color: $color-primary;
	  }
	}
	p{
	  margin-bottom: 20px;
	  &:last-child{
		  margin-bottom: 0;
	  }
	}
  }
  .video-content{
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100%;
	margin-bottom: 30px;
	.video-btn {
	  position: relative;
	  display: block;
	  text-align: center;
	  width: 90px;
	  height: 90px;
	  line-height: 90px;
	  background-color: $color-primary;
	  border-radius: 50%;
	  z-index: 1;
	  margin-left: auto;
	  margin-right: auto;
	  i {
		color: $color-white;
	  }
	  &::after,
	  &::before {
		z-index: -1;
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		animation: ripple 2s infinite;
		opacity: 0;
		border-radius: 50%;
		background: $color-primary;
	  }
	  &::after {
		animation-delay: .4s;
	  }
	  &::before {
		animation-delay: .9s;
	  }
	}
	.video-image{
		position: absolute;
		width: 100%;
	  &::after{
		position: absolute;
		content: '';
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(26, 26, 26, .5);
		}
		img{
			width: 100%;
			max-width: unset;
		}
	}
  }
  .instrument-slider{
	.slider-item{
	  overflow: hidden;
	  .overlay-content{
		position: absolute;
		overflow: hidden;
		width: calc(100% - 30px);
		height: calc(100% - 30px);
		top: 15px;
		left: 15px;
		opacity: 0;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
		text-transform: capitalize;
		transition: $transition;
		background: rgba(0, 30, 76, 0.7);
		&::before{
		  position: absolute;
		  content: '';
		  top: -50px;
		  right: -50px;
		  border-top: 100px solid $color-primary;
		  border-left: 100px solid transparent;
		  transition: $transition;
		}
		&::after{
		  position: absolute;
		  content: '';
		  bottom: -50px;
		  left: -50px;
		  border-bottom: 100px solid $color-primary;
		  border-right: 100px solid transparent;
		  transition: $transition;
		}
		h3{
		  a{
			color: $color-white;
			&:hover{
			  color: $color-primary;
			}
		  }
		}
	  }
	  .image img{
		transition: $transition;
	  }
	  &:hover{
		img{
		  transform: scale(1.1);
		}
		.overlay-content{
		  opacity: 1;
		  &::before{
			top: 10px;
			right: 10px;
		  }
		  &::after{
			bottom: 10px;
			left: 10px;
		  }
		}
	  }
	}
	.owl-nav{
		margin-top: 30px;
		text-align: center;
	}
  }
}

/* -----------------------------------------
  Map CSS
----------------------------------------- */
.map-section{
	overflow: hidden;
  .map-content{
		position: relative;
	.map-pin{
	  position: absolute;
	  cursor: pointer;
	  width: 52px;
	  transition: $transition;
	  .pin-content{
		position: absolute;
		top: -50px;
		right: -170px;
		padding: 16px 16px;
		border-radius: 5px;
		opacity: 0;
		visibility: hidden;
		color: $color-white;
		background: $color-pink;
		transform: rotateY(90deg);
		transition: $transition;
		z-index: 1;
	  }
	  &:hover{
		width: 62px;
		.pin-content{
		  opacity: 1;
		  visibility: visible;
		  transform: unset;
		}
	  }
	}
	.active{
	  .pin-content{
		opacity: 1;
		visibility: visible;
		transform: unset;
	  }
	}
	.pin-1{
	  left: 20%;
	}
	.pin-2{
	  right: 20%;
	}
	.pin-3{
	  top: 35%;
	}
	.pin-4{
	  top: 30%;
	  left: 50%;
	}
	.pin-5{
	  bottom: 0;
	  left: 30%;
	}
	.pin-6{
	  right: 0;
	  bottom: 0;
	  .pin-content{
		left: -170px;
		right: unset;
	  }
	}
  }
}

/* -----------------------------------------
  Amazing Projects CSS
----------------------------------------- */
.amazing-projects-section {
  position: relative;
  overflow: hidden;
  .projects-content{
	margin-bottom: 30px;
	padding: 83px 0;
	position: relative;
	z-index: 1;
	&::after{
	  position: absolute;
	  content: '';
	  left: -60px;
	  top: 0;
	  width: 40%;
	  height: 100%;
	  background: $color-primary;
	  z-index: -1;
	}
	h2{
	  color: $color-secondary;
	  line-height: 1.3;
	  margin-top: -10px;
	  margin-bottom: 15px;
	}
	p{
	  margin-bottom: 30px;
	}
	.primary-btn{
	  color: $color-white;
	  background: $color-secondary;
	}
  }
}

.amazing-projects-slider{
  margin-bottom: 30px;
  .slider-item{
	overflow: hidden;
	.overlay-content{
	  position: absolute;
	  overflow: hidden;
	  width: calc(100% - 30px);
	  height: calc(100% - 30px);
	  top: 15px;
	  left: 15px;
	  opacity: 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  text-transform: capitalize;
	  transition: $transition;
	  background: rgba(26, 26, 26, 0.7);
	  &::before{
		position: absolute;
		content: '';
		top: -50px;
		right: -50px;
		border-top: 100px solid  rgba(255, 188, 19, 0.8);
		border-left: 100px solid transparent;
		transition: $transition;
	  }
	  h3{
		a{
		  color: $color-white;
		  &:hover{
			color: $color-primary;
		  }
		}
	  }
	}
	.image img{
	  transition: $transition;
	}
	&:hover{
	  img{
		transform: scale(1.1);
	  }
	  .overlay-content{
		opacity: 1;
		&::before{
		  top: 10px;
		  right: 10px;
		}
	  }
	}
  }
  .owl-nav{
	position: absolute;
    left: -10%;
    bottom: 0;
  }
}

/* -----------------------------------------
  Build CSS
----------------------------------------- */
.renovate-section{
  position: relative;
  z-index: 1;
  &::after{
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 40%;
	height: 60%;
	background: $color-primary;
	z-index: -1;
  }
  .content{
	margin-bottom: 30px;
	h2{
	  margin-bottom: 25px;
	  margin-top: -10px;
	  line-height: 1.3;
	  span{
		color: $color-primary;
	  }
	}
	p{
	  &:nth-child(3){
		margin-bottom: 25px;
	  }
	  &:nth-child(5){
		margin-bottom: 30px;
	  }
	}
	.item-list{
	  margin-bottom: 25px;
	  ul{
		padding: 0;
		margin: 0;
		list-style-type: none;
		li{
		  display: block;
		  font-weight: 500;
		  margin-bottom: 6px;
		  padding-left: 25px;
		  position: relative;
		  line-height: 1.8;
		  color: $color-dark;
		  &:last-child{
			margin-bottom: 0;
		  }
		  i{
			margin-left: -25px;
			margin-right: 5px;
			color: $color-primary;
			vertical-align: -2px;
		  }
		}
	  }
	}
	.cta-btn{
	  .primary-btn {
		color: $color-white;
		background: $color-secondary;
		&::before,
		&::after {
		  background-color: $color-primary;
		}
		&:hover {
		  color: $color-white;
		}
	  }
	}
  }
  .image-content{
	margin-bottom: 30px;
	position: relative;
	&::before{
	  position: absolute;
	  content: '';
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%);
	  border-left: 20px solid transparent;
	  border-right: 20px solid transparent;
	  border-top: 30px solid $color-secondary;
	  z-index: 1;
	}
  }
}
.build-section{
  @extend .renovate-section;
  &::after{
		position: absolute;
		content: '';
		left: none !important;
		left: unset;
		right: 0 !important;
		top: 0;
		width: 40%;
		height: 60%;
		background: $color-primary;
		z-index: -1;
		}
}

/* -----------------------------------------
  Quote CSS
----------------------------------------- */
.quote-section{
  position: relative;
  z-index: 1;
  background: url(../img/testimonial-bg.jpg) no-repeat top;
  &::after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	max-height: 413px;
	background: rgba(0, 30, 76, 0.7);
	z-index: -1;
  }
  .contact-form{
	position: relative;
	padding: 45px;
	background: $bg-fff3cf;
	margin-bottom: 30px;
	&::after {
	  position: absolute;
	  content: '';
	  top: 10px;
	  left: 10px;
	  border-top: 100px solid $color-primary;
	  border-right: 100px solid transparent;
	  transition: $transition;
	  z-index: 1;
	}
	h2{
	  text-align: center;
	  margin-bottom: 25px;
	  margin-top: -10px;
	  line-height: 1.3;
	  span {
		color: $color-primary;
	  }
	}
	.primary-btn{
	  width: 100%;
	}
	.nice-select {
	  float: unset;
	  line-height: 58px;
	  color: $color-light2;
	  text-transform: capitalize;
	  padding-top: 0;
	  padding-bottom: 0;
	  .list {
		background-color: #ffffff;
		box-shadow: 0px 0px 29px 0px rgba(102, 102, 102, 0.1);
		border-radius: 0;
		margin-top: -1px;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
		.option {
		  transition: .6s;
		  color: $color-light2;
		  font-size: 14px;
		  line-height: 25px;
		  padding-top: 10px;
		  padding-bottom: 10px;
		  padding-left: 20px;
		  padding-right: 10px;
		}
		.option.selected {
		  background-color: transparent;
		  font-weight: 500;
		  color: $color-medium;
		}
	  }
	  &::after{
		border: none;
		transform: rotate(0deg);
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-top: 8px solid $color-primary;
	  }
	}
	.open:after {
	  border-top: none;
	  border-bottom: 8px solid $color-primary;
	}
  }
  .image{
	margin-bottom: 30px;
  }
 

}
.form-check {
	padding-left: 0;
}

/* -----------------------------------------
  Faq CSS
----------------------------------------- */
.faq-section{
	background-color: #dcd7ca !important;
  background: url(../img/faq-bg.png) no-repeat center;
  background-size: cover;
  .panel-group {
	margin-bottom: 15px;
		.panel {
			border-radius: 0;
			margin-bottom: 15px;
			overflow: hidden;
			.panel-heading {
				padding: 0;
				background: $color-white;
				position: relative;
			}
		}
		.panel-title {
			margin: 0;
			a {
				display: block;
		padding: 25px 20px;
		font-size: 16px;
		font-weight: 600;
		color: $color-dark;
		&:before {
		  content: "";
		  position: absolute;
		  top: 50%;
		  right: 20px;
		  border-top: none;
		  border-bottom: 8px solid $color-primary;
		  border-left: 7px solid transparent;
		  border-right: 7px solid transparent;
		  transform: translateY(-50%);
		}
	  }
	  a.collapsed{
		&:before {
		  content: "";
		  position: absolute;
		  top: 50%;
		  right: 20px;
		  border-bottom: none;
		  border-left: 7px solid transparent;
		  border-right: 7px solid transparent;
		  border-top: 8px solid $color-primary;
		  transform: translateY(-50%);
		}
		&::after {
		  content: "";
		  position: absolute;
		  top: 5px;
		  height: calc(100% - 10px);
		  left: 6px;
		  width: 2px;
		  background: $color-primary;
		}
	  }
	}
	.panel-body {
	  padding: 25px 20px;
	  border: 0;
	  background: $color-white;
	  position: relative;
	  margin-top: 2px;
	  &::after {
		content: "";
		position: absolute;
		top: 5px;
		height: calc(100% - 10px);
		left: 6px;
		width: 2px;
		background: $color-primary;
	  }
	  p {
		color: $color-dark;
		margin: 0;
	  }
	}
	}
}
/* -----------------------------------------
  Count CSS
----------------------------------------- */
.count-section{
  position: relative;
  overflow: hidden;
  background: url(../img/count-bg.png) no-repeat center;
  background-size: cover;
  &:after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background:$bg-secondary;
	z-index: -1;
  }
  .content{
	position: relative;
	overflow: hidden;
	padding: 80px 20px;
	text-align: center;
	z-index: 1;
	margin-bottom: 30px;
	&:after {
	  position: absolute;
	  content: '';
	  left: 10px;
	  top: 10px;
	  border-top: 100px solid $color-primary;
	  border-right: 100px solid transparent;
	}
	&::before {
	  position: absolute;
	  content: '';
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  background: rgba(0, 30, 76, 0.9);
	  z-index: -1;
	}
	h2{
	  line-height: 1.3;
	  margin: 0;
	  margin-top: -5px;
	  color: $color-primary;
	  span{
		color: $color-primary;
	  }
	}
	span{
	  color: $color-white;
	}
  }
  [class*=col-]:nth-child(1) .content{
	background: url(../img/item-bg-1.jpg) no-repeat center;
	background-size: cover;
  }
  [class*=col-]:nth-child(2) .content{
	background: url(../img/item-bg-2.jpg) no-repeat center;
	background-size: cover;
  }
  [class*=col-]:nth-child(3) .content{
	background: url(../img/item-bg-3.jpg) no-repeat center;
	background-size: cover;
  }
  [class*=col-]:nth-child(4) .content{
	background: url(../img/project-bg-1.jpg) no-repeat center;
	background-size: cover;
  }
}

/* -----------------------------------------
  Blog Details CSS
----------------------------------------- */
.blog-details-area {
	overflow: hidden;
  .blog-details-desc {
	padding-left: 40px;
	margin-bottom: 30px;
	.image{
	  margin-bottom: 25px;
	}
	.content{
	  margin-bottom: 25px;
	  h2 {
		font-size: 40px;
		line-height: 1.3;
		margin-top: -5px;
		color: $color-secondary;
		margin-bottom: 20px;
		text-transform: capitalize;
	  }
	  p {
		color: $color-medium;
	  }
	}

	.post-meta {
	  padding: 0;
	  margin: 0;
	  margin-bottom: 25px;
	  li {
		color: $color-secondary;
		display: inline-block;
		font-weight: 500;
		font-size: 14px;
		margin-right: 10px;
		padding: 8px 10px;
		background: $color-primary;
		&:last-child {
		  margin-right: 0px;
		}
		&:hover{
			a{
				color: $color-white;
			}
		}
	  }
	}

	.blog-details-slider{
	  margin-bottom: 25px;
	  position: relative;
	  .owl-nav{
		position: absolute;
		right: 20px;
		bottom: 20px;
	  }
	}

	.article-share {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  flex-direction: row;
	  margin-bottom: 25px;
	  span {
		color: $color-dark;
		text-transform: capitalize;
		margin-right: 5px;
		font-weight: 600;
	  }
	}

	.social-link{
	  a{
		font-size: 14px;
		padding: 8px 12px;
		margin-right: 5px;
		&:last-child {
		  margin-right: 0;
	  }
	  }
	}

	hr{
	  margin-top: 0;
	  margin-bottom: 25px;
	}

	.comment-reply {
	  #commentForm{
		.form-control{
		  background: $bg-secondary;
		  border: 1px solid $color-primary;
		}
		.primary-btn {
		  width: 100%;
		  color: $color-white;
		  background: $color-secondary;
		  &::before,
		  &::after {
			background-color: $color-primary;
		  }
		  &:hover {
			color: $color-white;
		  }
		}
	  }
	}
	.comments-area {
	  margin-bottom: 25px;
	  .comment-list {
		padding: 0;
		margin: 0;
		list-style-type: none;
		.comment{
		  margin-bottom: 15px;
		  &:last-child{
			margin-bottom: 0;
		  }
		}
	  }
	  .comment-body {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-direction: row;
		background: $bg-secondary;
		padding: 20px 15px;
		.comment-author {
		  overflow: hidden;
		  .avatar {
			width: 90px;
		  }
		}

		.comment-content {
		  padding-left: 16px;

		  .comment-metadata {
			.name {
			  color: $color-medium;
			  font-size: 16px;
			  font-weight: bold;
			  margin: 0;
			}

			.time {
			  color: $color-medium;
			  font-size: 12px;
			}

			.reply {
			  float: right;
			  margin-top: -20px;
			  .primary-btn {
				padding: 0 20px;
				color: $color-white;
			  }
			}
		  }

		  p {
			margin-top: 5px;
			font-size: 15px;
		  }
		}
	  }
	}
  }

  .tags {
	a {
	  display: inline-block;
	  text-align: center;
	  background: $bg-secondary;
	  color: $color-dark;
	  border: 1px solid $color-primary;
	  padding: 8px 12px;
	  font-size: 14px;
	  margin-right: 5px;
	  &:hover {
		color: $color-dark;
	  }
	  &:last-child {
		margin-right: 0px;
	  }
	}
  }

  .widget-area {
	margin-bottom: 30px;
	.widget {
	  margin-bottom: 25px;
	}
	.widget-gallery{
		margin-bottom: 10px;
	}
	.gallery-item{
		img{
			margin-bottom: 20px;
		}
	}
	.widget-search {
	  .search-form {
		position: relative;
		background-color: $color-white;
		.search-field {
		  color: $color-medium;
		  display: block;
		  width: 100%;
		  height: 68px;
		  padding: 0 0 0 15px;
		  border: none;
		  font-weight: 600;
		  transition: $transition;
		  background: $bg-secondary;
		  border: 1px solid $color-primary;
		  box-shadow: 0 0 20px -2px rgba(106, 99, 119, 0.1);
		}
		button {
		  border: none;
		  color: $color-secondary;
		  position: absolute;
		  right: 20px;
		  top: 50%;
		  font-size: 18px;
		  transform: translateY(-50%);
		  transition: $transition;
		}
	  }
	}

	.widget-article {
	  .article-item {
		margin-bottom: 16px;
		display: flex;
		align-items: center;
		flex-direction: row;

		.info {
		  padding-left: 16px;
		}
		.title {
		  margin-top: 5px;
		  font-size: 18px;
		}

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

	.widget-categories {
	  .category-list {
		padding: 0;
		margin: 0;
		list-style-type: none;
		li {
		  position: relative;
		  padding: 12px 14px;
		  background: $bg-secondary;
		  margin-bottom: 16px;
		  &:last-child{
			margin-bottom: 0;
		  }
		  a {
			font-weight: 600;
			text-transform: capitalize;
			color: $color-secondary;
		  }
		  i{
				vertical-align: middle;
			margin-right: 8px;
			color: $color-primary;
		  }
		}
	  }
	}
	.tags {
	  a {
		margin-bottom: 10px;
	  }
	}

	.contact-form{
	  position: relative;
	  padding: 25px 25px;
	  background: $bg-fff3cf;
	  .primary-btn {
		width: 100%;
		color: $color-white;
		background: $color-secondary;
		&::before,
		&::after {
		  background-color: $color-primary;
		}
		&:hover {
		  color: $color-white;
		}
	  }
	}
  }

  h3.sub-title{
	line-height: 1;
	margin-bottom: 20px;
	text-transform: capitalize;
	color: $color-secondary;
  }
}

/* -----------------------------------------
  Page Title CSS
----------------------------------------- */
.page-title-area {
	position: relative;
	overflow: hidden;
	z-index: 1;
	&::before {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: "";
		background: -webkit-gradient(linear, left top, right top, from(rgba(0, 30, 76, 0.9)), to(rgba(0, 30, 76, 0.3)));
		background: linear-gradient(to right, rgba(0, 30, 76, 0.9) 0%, rgba(0, 30, 76, 0.3) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6001e4c', endColorstr='#4d001e4c',GradientType=1 );
		z-index: -1;
	}
	.bg-image{
		img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -2;
		object-fit: cover;
		}
	}

	.page-title-content {
		text-transform: capitalize;

		h1 {
		color: $color-white;
		margin-bottom: 20px;
		margin-top: -10px;
		line-height: 1.2;
		}

		ul {
		padding: 0;
		margin: 0;

		li {
			margin-right: 10px;
			padding-left: 15px;
			display: inline-block;

			&:first-child {
			padding-left: 0;
			}

			i{
			font-size: 14px;
			margin-left: -20px;
			margin-right: 10px;
			color: $color-primary;
			vertical-align: -1px;
			}

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

/* -----------------------------------------
  Authentication CSS
----------------------------------------- */
.authentication-section{
	.authentication-tabs{
    display: flex;
    align-items: center;
		justify-content: center;
		margin-bottom: 30px;
		overflow: hidden;
		.tab-item {
			color: $color-dark;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 15px 60px;
			border-bottom: 2px solid $color-light;
			cursor: pointer;
	}
		.tab-item.active{
				color: $color-primary;
				border-bottom: 2px solid $color-primary;
			}
		}
	.authentication-tabs-content{
		.tab-panel{
			display: none;
		}
		.tab-panel.active{
			display: block;
			animation: flipInY 1s 1 linear;
		}
	}
	.authentication-form{
		background: #ffffff;
		box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
		padding: 40px;
		border-radius: 5px;
		max-width: 600px;
		margin: auto;
		.checkbox{
			label {
				position: relative;
				padding-left: 28px;
				cursor: pointer;
				line-height: 20px;
				font-weight: 500;
				font-size: 14px;
				display: inline-block;
				margin-bottom: 0;
				color: $color-dark;
				a{
					color: $color-primary;
				}
			}
			[type="checkbox"]:checked,
			[type="checkbox"]:not(:checked){
				display: none;
			}
			[type="checkbox"]:checked + label:after,
			[type="checkbox"]:not(:checked) + label:after{
				content: '';
				width: 8px;
				height: 8px;
				background: $color-primary;
				position: absolute;
				top: 5.5px;
				left: 6px;
				transition: $transition;
			}
			[type="checkbox"]:checked + label::before,
			[type="checkbox"]:not(:checked) + label::before{
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 19px;
				height: 19px;
				border: 1px solid $bg-fff3cf;
				background: $bg-fff3cf;
				transition: $transition;
			}
			[type="checkbox"]:checked + label::before{
				border: 1px solid $color-primary;
				background: unset;
			}
			[type="checkbox"]:not(:checked) + label:after{
				display: none;
			}
		}
		.link{
			text-align: right;
			a{
				display: inline-block;
				font-weight: 500;
				font-size: 14px;
				line-height: 1.3;
			}
		}
	}
	.content{
		margin-bottom: 30px;
		text-align: center;
		.logo{
			margin-bottom: 20px;
		}
		h3{
			font-size: 30px;
			margin-top: -7px;
			margin-bottom: 0;
			color: $color-secondary;
		}
	}
	.form-group{
		margin-bottom: 25px;
	}
	.form-control{
		background: $bg-secondary;
		border: 1px solid $color-primary;
	}
	.cta-btn{
		margin-top: 25px;
		.primary-btn{
			padding: 14.5px 30px;
			width: 100%;
		}
	}
}
.authentication-form{
	background: #ffffff;
	box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
	padding: 40px;
	border-radius: 5px;
	max-width: 600px;
	margin: auto;
	.checkbox{
		label {
			position: relative;
			padding-left: 28px;
			cursor: pointer;
			line-height: 20px;
			font-weight: 500;
			font-size: 14px;
			display: inline-block;
			margin-bottom: 0;
			color: $color-dark;
			a{
				color: $color-primary;
			}
		}
		[type="checkbox"]:checked,
		[type="checkbox"]:not(:checked){
			display: none;
		}
		[type="checkbox"]:checked + label:after,
		[type="checkbox"]:not(:checked) + label:after{
			content: '';
			width: 8px;
			height: 8px;
			background: $color-primary;
			position: absolute;
			top: 5.5px;
			left: 6px;
			transition: $transition;
		}
		[type="checkbox"]:checked + label::before,
		[type="checkbox"]:not(:checked) + label::before{
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 19px;
			height: 19px;
			border: 1px solid $bg-fff3cf;
			background: $bg-fff3cf;
			transition: $transition;
		}
		[type="checkbox"]:checked + label::before{
			border: 1px solid $color-primary;
			background: unset;
		}
		[type="checkbox"]:not(:checked) + label:after{
			display: none;
		}
	}
	.link{
		text-align: right;
		a{
			display: inline-block;
			font-weight: 500;
			font-size: 14px;
			line-height: 1.3;
		}
	}
	.content{
		margin-bottom: 30px;
		text-align: center;
		.logo{
			margin-bottom: 20px;
		}
		h3{
			font-size: 30px;
			margin-top: -7px;
			margin-bottom: 0;
			color: $color-secondary;
		}
	}
	.form-group{
		margin-bottom: 25px;
	}
	.form-control{
		background: $bg-secondary;
		border: 1px solid $color-primary;
	}
	.cta-btn{
		margin-top: 25px;
		.primary-btn{
			padding: 14.5px 30px;
			width: 100%;
		}
	}
}
.mfp-iframe-holder .mfp-close, 
.mfp-image-holder .mfp-close {
	color: $color-white;
	right: 0;
	text-align: center;
	padding: unset;
	width: 100%;
	height: 40px;
	width: 40px;
	opacity: 1;
	background: $color-primary;
}
.mfp-iframe-holder .mfp-close{
  	top: -60px;
}
/* -----------------------------------------
  Member Details CSS
----------------------------------------- */
.member-details-section{
	.image{
		height: 100%;
		background: url(../img/team/team-img-3.jpg) no-repeat center;
		background-size: cover;
		@media screen and (min-width: 767px){
			img{
				opacity: 0;
			}
		}
		@media screen and (max-width: 767px){
			background: unset;
		}
	}
	.content{
		position: relative;
		padding: 40px 30px;
		background: $bg-secondary;
		&::after {
			position: absolute;
			content: '';
			top: 10px;
			right: 10px;
			border-top: 100px solid $color-primary;
			border-left: 100px solid transparent;
			-webkit-transition: $transition;
			transition: $transition;
			z-index: 1;
		}
		.member-info{
			h3{
				font-size: 30px;
				line-height: 1;
				text-transform: capitalize;
				color: $color-secondary;
			}
			span{
				display: inline-block;
				color: $color-secondary;
				margin-bottom: 10px;;
			}
		}
		.member-list{
			margin: 15px 0;
			.list-content{
				margin-bottom: 10px;
				i{
					margin-right: 8px;
					color: $color-primary;
					vertical-align: middle;
				}
				.title{
					color: $color-secondary;
					font-weight: 600;
				}
				.info{
					margin-left: auto;
				}
			}
		}
	}
}
.bio-area{
	.section-title{
		margin-bottom: 0;
		h2{
			padding-left: 60px;
		}
		&::before {
			left: 0;
		}
	}
}

/* -----------------------------------------
  Service Details CSS
----------------------------------------- */
.service-details-area{
	padding-bottom: 60px;
	.image{
		margin-bottom: 40px;
	}
	.project-info{
		position: relative;
		padding: 30px 25px;
		background: $color-primary;
		text-align: center;
		margin-bottom: 40px;
		h3{
			line-height: 1;
			margin-bottom: 15px;
			text-transform: capitalize;
			color: $color-white;
		}
		p{
			color: $color-white;
			line-height: 1.5;
			&:last-child{
				margin-bottom: 20px;
			}
		}
		.info-list{
			padding: 0;
			margin: 0;
			list-style-type: none;
			text-align: left;
			li {
				position: relative;
				padding: 12px 14px;
				background: $bg-secondary;
				margin-bottom: 16px;
				display: flex;
				i {
					vertical-align: -2px;
					margin-right: 8px;
					color: $color-secondary;
				}
				a {
					font-weight: 600;
					text-transform: capitalize;
					color: $color-secondary;
					display: inline-block;
					flex: 0 0 50%;
					max-width: 50%;
				}
				span{
					display: inline-block;
					flex: 0 0 50%;
					max-width: 50%;
				}
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
	.content{
		margin-bottom: 40px;
		h2.title {
			font-size: 45px;
			line-height: 1.3;
			margin-top: -10px;
			color: $color-secondary;
			margin-bottom: 20px;
			text-transform: capitalize;
			span{
				color: $color-primary;
			}
		}
		p {
			color: $color-medium;
		}
	}
	.projects-area{
		.content{
			margin-bottom: 40px;
			h2{
				margin-bottom: 25px;
				line-height: 1.3;
				margin-top: -10px;
				color: $color-secondary;
			}
		}
		.item-list{
			ul{
				padding: 0;
				margin: 0;
				list-style-type: none;
				li {
					display: block;
					font-weight: 500;
					margin-bottom: 6px;
					padding-left: 25px;
					position: relative;
					line-height: 1.8;
					color: $color-medium;
					i {
						margin-left: -25px;
						margin-right: 5px;
						color: $color-primary;
						vertical-align: -2px;
					}
				}
			}
		}
	}
}

/* -----------------------------------------
  service Details CSS
----------------------------------------- */
.service-details-area {
	.service-details-desc {
		padding-left: 40px;
		margin-bottom: 30px;
		.image {
			margin-bottom: 25px;
		}
		.content {
			margin-bottom: 25px;
			h2 {
				font-size: 40px;
				line-height: 1.3;
				margin-top: -5px;
				color: $color-secondary;
				margin-bottom: 20px;
				text-transform: capitalize;
				span{
					color: $color-primary;
				}
			}
			p {
				color: $color-medium;
			}
		}

		.services-area{
			.content{
				h2{
					margin-bottom: 25px;
					line-height: 1.3;
					color: $color-secondary;
				}
			}
			.item-list{
				margin-bottom: 25px;
				ul{
					padding: 0;
					margin: 0;
					list-style-type: none;
					li {
						display: block;
						font-weight: 500;
						margin-bottom: 6px;
						padding-left: 25px;
						position: relative;
						line-height: 1.8;
						color: $color-medium;
						i {
							margin-left: -25px;
							margin-right: 5px;
							color: $color-primary;
							vertical-align: -2px;
						}
						&:last-child{
							margin-bottom: 0;
						}
					}
				}
			}
		}

		.service-details-slider {
			margin-bottom: 25px;
			position: relative;
			.owl-nav {
				position: absolute;
				right: 20px;
				bottom: 20px;
			}
		}
	}

	.widget-area {
		margin-bottom: 30px;
		.widget {
			margin-bottom: 25px;
		}

		.nav-list {
			padding: 0;
			margin: 0;
			list-style-type: none;
			li {
				position: relative;
				padding: 14px 16px;
				background: $bg-secondary;
				margin-bottom: 15px;
				&:last-child {
					margin-bottom: 0;
				}
				a {
					font-weight: 600;
					text-transform: capitalize;
					color: $color-secondary;
				}
				i {
					float: right;
					margin-right: 8px;
					margin-top: 4px;
					color: $color-secondary;
					transform: rotateZ(-180deg);
				}
				&::after {
					content: "";
					position: absolute;
					top: 5px;
					height: calc(100% - 10px);
					left: 6px;
					width: 2px;
					background: $color-primary;
				}
			}
			li.active {
				background: $color-primary;
				&::after {
					background: $color-white;
				}
				i {
					transform: unset;
					color: $color-white;
				}
				a {
					color: $color-white;
				}
			}
		}

		.contact-form {
			position: relative;
			padding: 25px 25px;
			background: $bg-fff3cf;
			.primary-btn {
				width: 100%;
				color: $color-white;
				background: $color-secondary;
				&::before,
				&::after {
					background-color: $color-primary;
				}
				&:hover {
					color: $color-white;
				}
			}
		}

		.download-item {
			.download-item-single {
				display: flex;
				position: relative;
				padding: 25px 60px;
				margin-bottom: 25px;
				background: url(../img/item-bg-2.jpg) no-repeat center;
				background-size: cover;
				align-items: center;
				justify-content: center;
				&:first-child {
					background: url(../img/item-bg-1.jpg) no-repeat center;
					background-size: cover;
				}
				&:last-child {
					background: url(../img/item-bg-3.jpg) no-repeat center;
					background-size: cover;
				}
				&::after {
					position: absolute;
					content: "";
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					background: rgba(0, 30, 76, 0.8);
				}

				i {
					width: 60px;
					height: 60px;
					line-height: 57px;
					background: $color-white;
					text-align: center;
					display: inline-block;
					z-index: 1;
					font-size: 28px;
				}
				.item-content {
					padding-left: 16px;
					z-index: 1;
					h4 {
						color: $color-white;
						margin-top: -5px;
						margin-bottom: 0;
					}
				}
			}
		}
	}

	h3.sub-title {
		line-height: 1;
		margin-bottom: 20px;
		text-transform: capitalize;
		color: $color-secondary;
	}
}
/* -----------------------------------------
  Terms CSS
----------------------------------------- */
.terms-area{
	@extend .service-details-area;
	.details-desc{
		padding-left: 40px;
		margin-bottom: 30px;
		.content {
			margin-bottom: 25px;
			h2 {
				font-size: 30px;
				line-height: 1.3;
				margin-top: -5px;
				color: $color-secondary;
				margin-bottom: 15px;
				text-transform: capitalize;
				span{
					color: $color-primary;
				}
			}
			p {
				color: $color-medium;
			}
		}

		.service-details-slider {
			margin-bottom: 25px;
			position: relative;
			.owl-nav {
				position: absolute;
				right: 20px;
				bottom: 20px;
			}
		}
		.content:last-child {
			margin-bottom: 0;
	}
	}
}
/* -----------------------------------------
  Terms CSS
----------------------------------------- */
.privacy-area{
	@extend .terms-area;
}
/* -----------------------------------------
  Error CSS
----------------------------------------- */
.error-area{
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url(../img/banner/banner-bg-2.jpg);
	position: relative;
	overflow: hidden;
	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 30, 76, 0.62);
	}
	.error-box {
		background: #ffffff;
		box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
		padding: 40px 20px 53px;
		border-radius: 5px;
		max-width: 760px;
		margin: auto;
		position: relative;
		&::after {
			position: absolute;
			content: '';
			top: 10px;
			left: 10px;
			border-top: 100px solid $color-primary;
			border-right: 100px solid transparent;
			transition: $transition;
		}

		.cta-btn {
			text-align: center;

			.primary-btn{
				padding: 15px 30px;
			}
		}
		.content{
			margin-bottom: 30px;
			text-align: center;
			.logo{
				margin-bottom: 20px;
			}
			h3{
				font-size: 70px;
				margin-top: -7px;
				line-height: 1.3;
				margin-bottom: 0;
				color: $color-secondary;
			}
		}
	}
}
/* -----------------------------------------
  Pricing CSS
----------------------------------------- */
.pricing-section{
	.pricing-item-single {
		position: relative;
		background: $bg-secondary;
		border: 2px solid $color-primary;
		margin-bottom: 30px;

		.pricing-item-content {
			position: relative;
			text-align: center;
			text-transform: capitalize;
			background: url(../img/item-bg-2.jpg) no-repeat center;
			background-size: cover;
			z-index: 1;
			&::before {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				content: "";
				background: rgba(0, 30, 76, 0.8);
				
				z-index: -1;
			}
			.content-text {
				padding: 35px 0;
				h2 {
					color: $color-primary;
					margin-bottom: 0;
				}

				p {
					color: $color-primary;
					font-size: 14px;
				}

				span.label {
					position: absolute;
					display: block;
					left: 10px;
					top: 10px;
					padding: 5px;
					font-weight: 500;
					text-align: left;
					color: $color-secondary;
					&::after {
						position: absolute;
						content: '';
						top: 0;
						left: 0;
						border-top: 120px solid $color-primary;
						border-right: 120px solid transparent;
						transition: $transition;
						z-index: -1;
					}
				}
			}
		}

		.pricing-item-list {
			text-align: center;
			padding: 25px 20px;
				ul {
				list-style-type: none;
				margin: 0;
				margin-bottom: 25px;
				text-align: left;
				padding: 0 20px;
				li {
					margin-bottom: 14px;
					font-size: 15px;
					color: $color-dark;
					font-weight: 500;
					i {
						font-size: 12px;
						font-weight: normal;
						margin-right: 10px;
						color: $color-primary;
					}
					&:last-child{
						margin-bottom: 0;
					}
				}
				.disabled{
					opacity: .6;
				}
			}
		}
		.cta-btn{
			.primary-btn {
				width: 100%;
				color: $color-white;
				background: $color-secondary;
				&::before,
				&::after {
				background-color: $color-primary;
				}
				&:hover {
				color: $color-white;
				}
			}
		}
		
	}
	.pricing-item-single.active{
		.pricing-item-content {
			&::before {
				background: rgba(255,188,19,.8);
			}
			.content-text {
				padding: 50px 0;
				h2 {
					color: $color-white;
				}
				p {
					color: $color-white;
				}
				span.label {
					&::after {
						border-top: 120px solid $color-white;
					}
				}
			}
		}
		.cta-btn{
			.primary-btn {
				width: 100%;
				color: $color-dark;
				background: $color-primary;
				&::before,
				&::after {
					background-color: $color-primary;
				}
				&:hover {
					color: $color-white;
					&::before,
					&::after {
						background-color: $color-secondary;
					}
				}
			}
		}
	}
	.mt-30{
		margin-top: 30px;
	}
}

.cost-section{
	.content-inner{
		padding-left: 60px;
		padding-right: 60px;
	}
	.section-title h2{
		margin-top: -10px;
	}
	.cost-form{
		.form-group{
			margin-bottom: 20px;
			label{
				font-weight: 500;
				color: $color-secondary;
				margin-right: 8px;
			}
			.range-slider {
				-webkit-appearance: none;
				appearance: none;
				width: 100%;
				background: $color-primary;
				outline: none;
				height: 5px;
				border-radius: 30px;
			}
			.range-slider::-webkit-slider-thumb {
				-webkit-appearance: none;
				appearance: none;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				border: 2px solid $color-white;
				background: $color-primary;
				cursor: pointer;
			}
			  
			.range-slider::-moz-range-thumb {
				position: relative;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				border: 2px solid $color-white;
				background: $color-primary;
				cursor: pointer;
			}
			.slider-value{
				position: absolute;
				top: -20px;
				font-weight: 500;
				color: $color-secondary;
			}
			.input-btn{
				display: inline-block;
				text-align: center;
				background: $bg-secondary;
				color: $color-dark;
				border: 1px solid $color-primary;
				padding: 8px 12px;
				font-size: 14px;
				margin-right: 5px;
			}
			.input-btn.active{
				background: $color-primary;
			}
			.plus-minus-input {
				display: flex;
				justify-content: center;
				flex-direction: row;
				align-items: center;
				.input-group-field {
					background: $bg-secondary;
					color: $color-dark;
					border: 1px solid $color-primary;
					padding: 8px 12px;
					width: 50px;
					text-align: center;
					&::-webkit-inner-spin-button,
					::-webkit-outer-spin-button {
						appearance: none;
					}
				}
				.input-btn{
					margin: 0 8px;
					background: $color-primary;
				}
			}
			.form-control{
				height: unset;
			}
			.nice-select {
				float: unset;
				background: $bg-secondary;
				color: $color-dark;
				border: 1px solid $color-primary;
				padding-left: 10px;
				padding-right: 20px;
				margin-right: 8px;
				display: inline-flex;
				.list {
					background: $bg-secondary;
					color: $color-dark;
					border: 1px solid $color-primary;
					padding: 8px 12px;
					font-size: 14px;
					border-radius: 0;
					.option {
						transition: .6s;
						color: $color-light2;
						font-size: 14px;
						line-height: 25px;
						padding-top: 10px;
						padding-bottom: 10px;
						padding-left: 0;
						padding-right: 10px;
					}
					.option.selected {
						background-color: transparent;
						font-weight: 500;
						color: $color-medium;
					}
				}
				&::after{
					right: 5px;
					border: none;
					transform: rotate(0deg);
					border-left: 5px solid transparent;
					border-right: 5px solid transparent;
					border-top: 6px solid $color-primary;
				}
			}
			.open:after {
				border-top: none;
				border-bottom: 6px solid $color-primary;
			}
		}
		.cta-btn{
			margin-top: 30px;
			.submit-btn{
				width: 100%;
				text-align: center;
				display: inline-block;
				-webkit-transition: $transition;
				transition: $transition;
				border-radius: 0;
				border: none;
				padding: 15px 30px;
				z-index: 1;
				color: $color-dark;
				background-color: $color-primary;
				font-size: 30px;
				font-weight: 600;
				font-family: $font-family;
				line-height: 1.8;
				text-transform: capitalize;
				span{
					color: $color-white;
					font-size: 16px;
					vertical-align: middle;
					margin-right: 10px;
				}
			}
		}
	}
}

/* -----------------------------------------
   Comingsoon CSS
----------------------------------------- */
.comingsoon-section {
  position: relative;
  height: 100vh;
  background: #a8aaf1;
  background: url(../img/bg-map-1.png) no-repeat center;
	background-size: cover;
  display: -ms-grid;
  display: grid;
  place-items: center;
  .comingsoon-box {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: 45px 40px 35px;
    background-color: #fff;
		box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
		position: relative;
		&::after {
			position: absolute;
			content: '';
			top: -15px;
			left: -15px;
			border-top: 100px solid $color-primary;
			border-right: 100px solid transparent;
			-webkit-transition: $transition;
			transition: $transition;
			z-index: -1;
		}
		&::before {
			position: absolute;
			content: '';
			right: -15px;
			bottom: -15px;
			border-bottom: 100px solid $color-primary;
			border-left: 100px solid transparent;
			-webkit-transition: $transition;
			transition: $transition;
			z-index: -1;
		}

    .logo {
      	img{
			margin: 0 auto 20px;
			display: block;
		}
    }

    .title-box {
		text-transform: capitalize;
		position: relative;
		text-align: center;
		h2{
			color: $color-secondary;
		}

      .text {
        position: relative;
        margin-top: 12px;
      }
    }

    .newsletter-form {
      margin-bottom: 30px;

      .input-group {
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 20px rgba(106, 99, 119, 0.1);
        border: none;
				width: 100%;
				margin-left: auto;
				margin-right: auto;
				border: 1px solid $color-primary;
      }
    }

    .cta-btn {
      text-align: center;

      .primary-btn{
			padding: 15px 30px;
		}
    }

    #timer {
      padding: 30px 0;

      div {
		color: $color-primary;
		width: 100px;
		height: 105px;
		border-radius: 5px;
		font-size: 40px;
		font-weight: 800;
		margin-left: 10px;
		margin-right: 10px;

        span {
			display: block;
			margin-top: -2px;
			font-size: 17px;
			font-weight: 600;
			color: $color-secondary;
        }
      }
    }
  }
}
	
/* -----------------------------------------
  Contact CSS
----------------------------------------- */
.contact-area{
	.contact-info{
		margin-bottom: 30px;
		.info-item{
			display: flex;
			position: relative;
			padding: 50px 16px;
			margin-bottom: 20px;
			background: url(../img/item-bg-2.jpg) no-repeat center;
			background-size: cover;
			align-items: center;
    	justify-content: center;
			z-index: 1;
			&:first-child {
				background: url(../img/item-bg-1.jpg) no-repeat center;
				background-size: cover;
			}
			&:last-child {
				background: url(../img/item-bg-3.jpg) no-repeat center;
				background-size: cover;
			}
			&::after {
				position: absolute;
				content: "";
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 30, 76, 0.8);
				z-index: -1;
				transition: $transition;
			}
			i{
				color: $color-white;
				text-align: center;
				font-size: 40px;
				display: inline-block;
				margin-top: -2px;
			}
			.info-content {
				position: relative;
				padding-left: 20px;
				display: inline-block;
				p{
					text-transform: capitalize;
					color: $color-primary;
					line-height:1.4;
					margin: 0;
				}
				a{
					font-weight: 500;
					font-size: 20px;
					color: $color-white;
				}
			}
			&:hover{
				&::after {
					background: rgba(255, 188, 19, 0.9);
				}
				i{
					color: $color-secondary;
				}
				.info-content {
					p{
						color: $color-white;
					}
					a{
						color: $color-secondary;
					}
				}
			}
		}
		&:last-child{
			margin-bottom: 0;
		}
	}
	.contact-form{
		background: $bg-fff3cf;
		padding: 40px;
		margin-bottom: 30px;
		.content{
			margin-bottom: 30px;
			text-align: left;
			h3{
				font-size: 30px;
				margin-top: -7px;
				margin-bottom: 0;
				color: $color-secondary;
			}
		}
		.form-group{
			margin-bottom: 25px;
		}
		.form-control{
			width: 100%;
			background: $color-white;
			border: none;
		}
		.cta-btn{
			margin-top: 25px;
			.primary-btn {
				width: 100%;
				padding: 14.5px 30px;
				color: $color-white;
				background: $color-secondary;
				&::before,
				&::after {
					background-color: $color-primary;
				}
				&:hover {
					color: $color-white;
				}
			}
		}
		.checkbox{
			label {
				position: relative;
				padding-left: 28px;
				cursor: pointer;
				line-height: 20px;
				font-weight: 500;
				font-size: 14px;
				display: inline-block;
				margin-bottom: 0;
				color: $color-dark;
				a{
					color: $color-primary;
				}
			}
			[type="checkbox"]:checked,
			[type="checkbox"]:not(:checked){
				display: none;
			}
			[type="checkbox"]:checked + label:after,
			[type="checkbox"]:not(:checked) + label:after{
				content: '';
				width: 8px;
				height: 8px;
				background: $color-primary;
				position: absolute;
				top: 5.5px;
				left: 6px;
				transition: $transition;
			}
			[type="checkbox"]:checked + label::before,
			[type="checkbox"]:not(:checked) + label::before{
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 19px;
				height: 19px;
				border: 1px solid $color-white;
				background: $color-white;
				transition: $transition;
			}
			[type="checkbox"]:checked + label::before{
				border: 1px solid $color-primary;
				background: unset;
			}
			[type="checkbox"]:not(:checked) + label:after{
				display: none;
			}
		}
	}
	.contact-map {
		overflow: hidden;
		padding-bottom: 50%;
		position: relative;
		height: 0;
		border: none;
		margin: 30px 0;
		iframe {
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
			position: absolute;
			border: 0;
		}
	}
}
/* -----------------------------------------
  Pagination CSS
----------------------------------------- */
.pagination {
	display: block;
	margin-top: 35px;
	margin-left: auto;
	margin-right: auto;
	.page-numbers {
		width: 40px;
		height: 40px;
		background-color: $color-white;
		box-shadow: 0 0 30px -2px rgba(44, 44, 44, .1);
		color: $color-dark;
		text-align: center;
		display: inline-block;
		border-radius: 0;
		line-height: 42px;
		position: relative;
		margin-left: 3px;
		margin-right: 3px;
		font-weight: 500;
		font-size: 18px;
		&:hover {
			color: $color-white;
			background-color: $color-primary;
		}
		i {
			position: relative;
			top: 1.5px;
		}
	}
	.page-numbers.current {
		color: $color-white;
		background-color: $color-primary;
	}
}

/* -----------------------------------------
  Go Top CSS
----------------------------------------- */
.go-top {
	position: fixed;
	top: 50%;
	right: 3%;
	opacity: 0;
	cursor: pointer;
	text-decoration: none;
	color: $color-white;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	background: $color-primary;
	padding: 10px 20px;
	z-index: 100;
	transition: all 500ms ease-in-out;
}
.go-top.active {
	top: 95%;
	-webkit-transform: translateY(-95%);
	transform: translateY(-95%);
	opacity: 1;
	visibility: visible;
}

/* -----------------------------------------
  Preloader CSS
----------------------------------------- */
.preloader-main {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 99999;
	background: $color-white;
	display: -ms-grid;
	display: grid;
	display: -ms-none;
	place-items: center;
	.loader {
		width: 175px;
		height: 80px;
		position: relative;

		&::before {
			content: "";
			left: 60px;
			bottom: 18px;
			position: absolute;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background-color: $color-primary;
			background-image: radial-gradient(
					circle 8px at 18px 18px,
					$color-white 100%,
					transparent 0
				),
				radial-gradient(
					circle 4px at 18px 0px,
					$color-white 100%,
					transparent 0
				),
				radial-gradient(
					circle 4px at 0px 18px,
					$color-white 100%,
					transparent 0
				),
				radial-gradient(
					circle 4px at 36px 18px,
					$color-white 100%,
					transparent 0
				),
				radial-gradient(
					circle 4px at 18px 36px,
					$color-white 100%,
					transparent 0
				),
				radial-gradient(
					circle 4px at 30px 5px,
					$color-white 100%,
					transparent 0
				),
				radial-gradient(
					circle 4px at 30px 5px,
					$color-white 100%,
					transparent 0
				),
				radial-gradient(
					circle 4px at 30px 30px,
					$color-white 100%,
					transparent 0
				),
				radial-gradient(
					circle 4px at 5px 30px,
					$color-white 100%,
					transparent 0
				),
				radial-gradient(
					circle 4px at 5px 5px,
					$color-white 100%,
					transparent 0
				);
			background-repeat: no-repeat;
			animation: rotationBack 3s linear infinite;
		}
		&::after {
			content: "";
			left: 94px;
			bottom: 15px;
			position: absolute;
			width: 24px;
			height: 24px;
			border-radius: 50%;
			background-color: $color-primary;
			background-image: radial-gradient(
					circle 5px at 12px 12px,
					$color-white 100%,
					transparent 0
				),
				radial-gradient(
					circle 2.5px at 12px 0px,
					$color-white 100%,
					transparent 0
				),
				radial-gradient(
					circle 2.5px at 0px 12px,
					$color-white 100%,
					transparent 0
				),
				radial-gradient(
					circle 2.5px at 24px 12px,
					$color-white 100%,
					transparent 0
				),
				radial-gradient(
					circle 2.5px at 12px 24px,
					$color-white 100%,
					transparent 0
				),
				radial-gradient(
					circle 2.5px at 20px 3px,
					$color-white 100%,
					transparent 0
				),
				radial-gradient(
					circle 2.5px at 20px 3px,
					$color-white 100%,
					transparent 0
				),
				radial-gradient(
					circle 2.5px at 20px 20px,
					$color-white 100%,
					transparent 0
				),
				radial-gradient(
					circle 2.5px at 3px 20px,
					$color-white 100%,
					transparent 0
				),
				radial-gradient(
					circle 2.5px at 3px 3px,
					$color-white 100%,
					transparent 0
				);
			background-repeat: no-repeat;
			animation: rotationBack 4s linear infinite reverse;
		}
	}
	@keyframes rotationBack {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(-360deg);
		}
	}
}

/* -----------------------------------------
  Footer CSS
----------------------------------------- */
.footer-area {
	background: url(../img/bg-map-1.png) no-repeat center;
	background-size: cover;
	.footer-widget {
	  margin-bottom: 30px;
		.navbar-brand {
			.footer-logo2 {
				display: none;
			}
		}
	}
	ul{
	  padding: 0;
	  margin: 0;
	  list-style-type: none;
	  li{
		position: relative;
		margin-bottom: 15px;
	  }
	}
	.navbar-brand {
	  margin-bottom:15px;
	  padding: 0;
	}
  
	h5 {
	  text-transform: capitalize;
	  margin-bottom: 25px;
	  margin-top: 13px;
	}
  
	.footer-links {
	  li {
		transition: $transition;
		i{
		  font-size: 12px;
		  color: $color-primary;
		}
		&:hover {
		  transform: translateX(5px);
  
		  a {
			color: $color-primary;
		  }
  
		  &::before {
			color: $color-primary;
		  }
		}
	  }
	}
	.footer-news{
	  .content{
		position: relative;
		display: flex;
		align-items: flex-end;
		.img{
			  display: inline-table;
			  margin-right: 10px;
			  img{
				  max-width: 41px;
			  }
		}
	  }
	}
	.contact-info {
	  .content{
		position: relative;
	  display: flex;
		.tag{
	  display: inline-table;
	  text-align: center;
	  background: $color-primary;
	  color: $color-dark;
	  padding: 5px 12px;
	  font-size: 16px;
	  font-weight: 600;
		  margin-right: 10px;
		  margin-top: 5px;
		}
		span{
		  &:last-child{
			display: block;
		  }
		  a{
			  display: block;
		  }
		}
	  }
	}
}
  
/* -----------------------------------------
Copy Right CSS
----------------------------------------- */
.copy-right-area {
	background: $color-dark;
	padding: 1.9em 0;
	text-align: center;
	border-top: 1px solid rgba(25, 25, 25, 0.15);
  
	.copy-right-content {
	  p {
		color: $color-white;
		margin-bottom: 0;
	  }
  
	  a {
		color: $color-primary;
	  }
	}
}
  
.owl-carousel{
  .owl-nav{
	button[class*=owl-]{
		width: 40px;
		height: 40px;
		background: $color-primary;
		margin-right: 7px;
		transition: $transition;
		color: $color-dark;
		text-align: center;
		font-size: 26px;
		border: none;
		line-height: 39px;
		i{
			line-height: 1.3;
		}
	  &:last-child{
		margin-right: 0;
	  }
	  &:hover{
		background: $color-dark;
		color: $color-primary;
	  }
	}
  }
}
.custom-owl-nav{
  button{
	width: 40px;
	height: 40px;
	background: $color-primary;
	margin-right: 7px;
	transition: $transition;
	color: $color-dark;
	text-align: center;
	font-size: 26px;
	border: none;
	line-height: 39px;
	&:last-child{
	  margin-right: 0;
	}
	&:hover{
	  background: $color-dark;
	  color: $color-primary;
	}
	i{
		line-height: 1.3;
	}
  }
}

@-webkit-keyframes ripple {
  0% {
	  -webkit-transform: scale(1);
	  transform: scale(1);
  }
  75% {
	  -webkit-transform: scale(1.75);
	  transform: scale(1.75);
	  opacity: .5;
  }
  100% {
	  -webkit-transform: scale(2);
	  transform: scale(2);
	  opacity: 0;
  }
}
@keyframes ripple {
  0% {
	  -webkit-transform: scale(1);
	  transform: scale(1);
  }
  75% {
	  -webkit-transform: scale(1.75);
	  transform: scale(1.75);
	  opacity: .5;
  }
  100% {
	  -webkit-transform: scale(2);
	  transform: scale(2);
	  opacity: 0;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.preloader-main{
		display: none !important;
	}
}

/*----- Buy Now Btn CSS -----*/
.buy-now-btn {
    img {
        top: 50%;
        left: 20px;
        width: 15px;
        position: absolute;
        transform: translateY(-50%);
    }
    right: 20px;
    z-index: 99;
    top: 50%;
    position: fixed;
    transform: translateY(-50%);
    border-radius: 30px;
    display: inline-block;
    color: #ffffff;
    background-color: #82b440;
    padding: 10px 20px 10px 42px;
    box-shadow: 0 1px 20px 1px #82b440;
    font-size: 13px;
    font-weight: 600;
    &:hover {
        color: #ffffff;
        background-color: #94be5d;
    }
}