
/* HERO 1 */

.left-shape {
	clip-path: url(#svgPath);
	width: 500px;
	height: 350px;
	transform: rotate(180deg);
	left: 0;
	position: absolute;
	top: 0;
}

.header-area {
	z-index: 2;
}

.domain-name {
	font-size: 60px;
}

.domain-offer {
	@extend .secondary-color;
	@extend .light-bg;
	padding: 2px 10px;
	display: inline-block;
}

.feature-list {
	padding-left: 20px;
	margin-bottom: 25px;
	li {
		margin-bottom: 5px;
		@extend .secondary-color;
		font-weight: 700;
	}
}

.hero-btn-wrapper {
	margin-bottom: 30px;
	display: flex;
}

.hero-btn-wrapper .btn {
	margin-right: 10px;
}
.contact-info{
	margin-bottom: 20px;
}
.contact-info h3{
	margin-bottom:20px;
}
.contact-info p{
margin-bottom: 5px;
}
.social-links {
	margin: 0;
	padding: 0;
	list-style: none;
	li {
		display: inline;
	}
	a {
		display: inline-block;
		width: 45px;
		height: 45px;
		line-height: 45px;
		text-align: center;
		border-width: 1px;
		border-style: solid;
		@extend .gray-border-2;
		@extend .gray-color;
		margin-right: 5px;
		&:hover {
			@extend .secondary-bg;
			@extend .light-color;
		}
	}
}
.gray-bg-2 .social-links a{
	@extend .secondary-border;
}
.shape {
	fill: $primary;
}

.text-bg {
	@extend .dark-color;
	opacity: 0.1;
	font-size: 90px;
	position: absolute;
	right: 0;
	top: 280px;
	transform: rotate(15deg);
}

.shadow-1 {
	box-shadow: -4px 49px 79px 0px rgba(0, 0, 0, 0.15);
}

.email-success,
.email-failed,
.email-loading,
.success-msg,
.error-msg {
	padding: 10px;
	display: none;
}

.email-loading img {
	width: 20px;
	margin: 0 auto;
}

.offer-form-wrap input,
.offer-form-wrap textarea,
.contact-form-wrap input,
.contact-form-wrap textarea {
	width: 100%;
	border: none;
	padding: 10px;
	margin-bottom: 15px;
	border-width: 1px;
	border-style: solid;
	@extend .gray-border-2;
}
.light-text .offer-form form *{
	@extend .dark-color;
}
.light-text .offer-form form .btn-filled{
	@extend .light-color;
}

.light-text .offer-form form .btn-filled:hover{
	@extend .dark-color;
}
.domain-feature {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
	li {
		display: inline-block;
		margin-left: 10px;
		margin-right: 10px;
		@extend .dark-color;
	}
}


/* HEARO 2 */

.bg-area {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
}

.left-bg-area {
	@extend .primary-gredient;
	left: 0;
}

.right-bg-area {
	right: 0;
}


/* HERO VERSION 3 */

.full-height {
	min-height: 100vh;
}

.hero-area h2 {
	font-size: 48px;
}

.single-h-feature {
	position: relative;
	padding-left: 60px;
	margin-bottom: 25px;
	h3 {
		font-size: 18px;
		@include transition(.4s);
	}
	p {
		font-size: 14px;
	}
	i {
		position: absolute;
		font-size: 38px;
		left: 0;
		top: 0;
		@include transition(.4s);
	}
	&:hover i,
	&:hover h3 {
		@extend .dark-color;
	}
}

.v4-hero .single-h-feature {
	&:hover {
		i {
			@extend .secondary-color;
		}
		h3 {
			@extend .secondary-color;
		}
	}
}

.hero-search-form {
	box-shadow: 0px 50px 72px 0px rgba(0, 0, 0, 0.035);
}

.hero-search-form p {
	font-size: 18px;
	margin-bottom: 0px;
}

.search-form {
	margin-top: 25px;
	margin-bottom: 25px;
	display: flex;
	border-width: 1px;
	border-style: solid;
	@extend .light-border;
	border-radius: 5px;
}

.search-form input {
	height: 58px;
	@extend .transparent-bg;
	border: none;
}

.search-form input:focus {
	@extend .transparent-bg;
	box-shadow: none;
	color: #ffffff;
}

.search-form button {
	padding-left: 30px;
	padding-right: 30px;
	@extend .light-bg;
	@extend .dark-color;
	border-radius: 0px;
	border: none;
	text-transform: uppercase;
	cursor: pointer;
}

.search-form button:focus {
	border: none;
	box-shadow: none;
}

.search-form button:hover {
	@extend .secondary-bg;
	@extend .light-color;
}

.hero-right ul {
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0;
	li {
		display: inline-block;
		a {
			font-size: 18px;
			padding-left: 12px;
			padding-right: 12px;
			border-right: 1px solid #000;
			font-weight: 700;
			@extend .light-color;
		}
		&:last-child a {
			border: none;
			padding-right: 0px;
		}
		&:first-child a {
			padding-left: 0px;
		}
	}
}

.hero-right .hero-search-form ul {
	li {
		a {
			font-size: 14px;
			border-right: 1px solid #fff;
			&:hover {
				@extend .secondary-color;
			}
		}
		&:last-child a {
			border: none;
			padding-right: 0px;
		}
		&:first-child a {
			padding-left: 0px;
		}
	}
}


/* FEATURES V3 */

.single-feature {
	@extend .gray-bg-2;
	margin-top: 15px;
	margin-bottom: 15px;
	border-radius: 5px;
	@include transition(.4s);
	i {
		margin-bottom: 20px;
		font-size: 48px;
		@extend .secondary-color;
		display: inline-block;
	}
	h3 {
		margin-bottom: 20px;
		font-size: 18px;
	}
	&:hover {
		@extend .transparent-bg;
		box-shadow: -4px 49px 79px 0px rgba(0, 0, 0, 0.15);
		i {
			@extend .primary-color;
		}
		h3 {
			@extend .primary-color;
		}
	}
}

.feature-bottom {
	h2 {
		font-size: 36px;
	}
}

.sea {
	width: 220px;
	height: 220px;
	position: relative;
	margin: 0 auto;
}

.sea .title {
	color: white;
	position: absolute;
	z-index: 999;
	width: 100%;
	text-align: center;
	margin: 0;
	i {
		display: block;
		font-size: 38px;
		margin-top: 50px;
	}
	span {
		display: block;
	}
	h4 {
		font-size: 36px;
		margin-bottom: 0px;
	}
}

.sea .wave {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 220px;
	height: 220px;
	padding: 15px;
	@extend .primary-gredient;
	border-radius: 25%;
	animation: drift linear infinite;
	transform-origin: 50% 48%;
}

.sea .wave:nth-of-type(1) {
	animation-duration: 5s;
}

.sea .wave:nth-of-type(2) {
	animation-duration: 7s;
}

.sea .wave:nth-of-type(3) {
	animation-duration: 9s;
	@extend .secondary-bg;
	filter: opacity(0.1);
}

@keyframes drift {
	from {
		transform: rotate(360deg);
	}
}

.piricing-offer {
	margin-top: 30px;
	margin-bottom: 30px;
}

.single-pricing-offer {
	padding: 20px;
	margin-top: 15px;
	margin-bottom: 15px;
	@extend .primary-bg;
	text-align: center;
	h4 {
		font-size: 18px;
		font-weight: 400;
	}
	p {
		margin-bottom: 0px;
	}
}


/* SERVICES */

.single-service {
	@extend .gray-bg-2;
	border-radius: 5px;
	@include transition(.4s);
	i {
		font-size: 50px;
		margin-bottom: 20px;
		@extend .secondary-color;
		display: inline-block;
	}
	h2 {
		font-size: 18px;
		margin-bottom: 15px;
	}
	&:hover {
		@extend .secondary-bg;
		i,
		h2,
		p {
			@extend .light-color;
		}
	}
}

.single-service.service-description {
	@extend .transparent-bg;
	padding-left: 0px;
	h2 {
		font-size: 24px;
	}
	&:hover {
		@extend .transparent-bg;
		i,
		h2,
		p {
			@extend .dark-color;
		}
	}
}


/* Contact section */

.contact-form-wrap {
	margin-top:18px;
	@extend .light-bg;
	h3 {
		@extend .secondary-bg;
		@extend .light-color;
		display: inline-block;
		padding: 10px 15px;
		font-size: 18px;
		top: 0;
		position: absolute;
		font-weight: 600;
		border-radius: 5px;
	}
}
/* subscribe */
#subscribe .search-form{
	margin-bottom: 0px;
}

/* FOOTER TOP */

#footer-top {
	background: #0a0a0a;
	h3 {
		font-size: 18px;
	}
	ul {
		li {
			a {
				display: inline-block;
				margin-bottom: 5px;
			}
		}
	}
}

#footer-bottom {
	background: #070707;
	a {
		font-weight: 700;
	}
	span {
		margin-right: 15px;
		display: inline-block;
	}
	i {
		margin-left: 5px;
		font-size: 22px;
	}
}

/* DOMAIN PRICING */

.domain-pricing {
	border-radius: 5px;
	@extend .light-bg;
	margin-top: -80px;
	position: relative;
}

.domain-pricing ul {
	text-align: center;
	width: 100%;
	text-decoration: none;
	margin: 0;
	padding: 0;
}

.domain-pricing ul li {
	display: inline;
	&:last-child a {
		border: 0px;
	}
}

.domain-pricing ul li a {
	@extend .primary-color;
	display: inline-block;
	@extend .dark-color;
	font-size: 20px;
	padding-left: 15px;
	padding-right: 15px;
	border-right: 1px solid;
	@extend .dark-border;
	font-weight: 700;
	&:hover {
		@extend .secondary-color;
	}
}


/* PRICING TABLE */

#pricing-table {
	@extend .gray-bg-2;
}
.table{
	margin-bottom:0px;
}
.domina-pricing {
	border-width: 1px;
	border-style: solid;
	@extend .gray-border-2;
}

.domina-pricing thead {
	@extend .secondary-bg;
	@extend .light-color;
	font-size: 18px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.domina-pricing tbody tr td:first-child {
	@extend .dark-color;
}

.domina-pricing td {
	vertical-align: middle;
	padding-top: 15px;
	padding-bottom: 15px;
}
.table td, .table th{
	border-top:none;
	border-bottom:1px solid #dee2e6;
}
.domain-pricing-v2 {
	@extend .gray-bg-2;
	box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.15);
	border-radius: 0px;
	margin-top: 0px;
}
