/*!
Theme Name: Crave
Theme URI: http://underscores.me/
Author: TaraDigitalSolution
Author URI: http://taradigitalsolution.com
Description: Crave Advertisemet
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: crave
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Crave is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

*, html, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-family: 'Titillium Web', sans-serif;
	font-weight: bold;
}

p,a {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
}

section {
	padding: 50px 0;
}

img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

input:focus {
	outline: none;
}

#page {
	width: 100%;
}

.section-title {
	margin-bottom: 60px;
}

.section-title h3 {
	text-align: center;
	font-weight: bold;
	color: #FFCB05;
}

.odd {
	background: #fafafa;
}

.admin-bar header {
	margin-top: 32px;
}

/*=================== Header CSS Start ======================*/

header.header {
	background-color: #fff;
}

.secondary {
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.7);
	transition: all .4s ease;
}

header .container nav {
	display: flex !important;
	justify-content: space-between;
}

header .logo-wrapper {
	display: flex;
	align-items: center;
}

header .logo-wrapper p {
	margin-bottom: 0px;
	color: #00a4ba;
}

header .logo-wrapper p:hover {
	color: #FFCB05;
}

header .logo-wrapper a img {
	height: 100px;
	width: auto;
	object-fit: contain;
}

header .menu-section {
	display: flex;
	align-items: center;
}

header .container nav ul {
	display: flex;
	justify-content: center;
	margin-bottom: 0;
}

header .container nav ul li {
	list-style: none;
	height: 100%;
}

header .container nav ul li a {
	height: 100%;
	display: block;
	line-height: 100px;
	padding: 0 10px;
	color: #00a4ba;
	font-size: 18px;
}

header .container nav ul li.current-menu-item a {
	color: #FFCB05;
}

header .container nav ul li a:hover {
	color: #FFCB05;
}

.mean-container .mean-bar {
	display: flex;
	align-items: center;
}

.mean-container .mean-bar a {
	top: 33px;
	padding-top: 0;
	padding-bottom: 0;
}

.mean-container .mean-nav {
	margin-top: 0;
}

.search-icon {
	margin-left: 10px;
}

.search-icon .icon-cover {
	padding: 8px 10px;
	cursor: pointer;
}

.search-icon .icon-cover svg {
	color: #00a4ba;
}

.search-icon .icon-cover:hover svg {
	color: #FFCB05;
}

.search-section {
	display: flex;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 0;
	opacity: 0;
	visibility: hidden;
	transition: 1s ease-in-out all;
	background: #fff;
}

.search-section .search-cover {
	margin: 30px 0;
	display: flex;
}

.search-section .search-cover .search-form {
	width: 100%;
}

.search-section .search-cover form div {
	border: 1px solid #00a4ba;
}

.search .search-cover input::placeholder {
	color: #00a4ba;
	text-transform: capitalize;
}

.search-section .search-cover input {
	border: none;
	padding: 5px 10px;
	width: calc(100% - 42px);
	background: transparent;
	color: #00a4ba;
}

.search-section .search-cover button {
	background: transparent;
	border: none;
	color: #00a4ba;
	padding: 5px 10px;
}

.search-section .search-cover .search-close {
	margin-left: 10px;
}

.search-section .search-cover .search-close svg {
	display: block;
	color: #00a4ba;
	font-size: 22px;
	cursor: pointer;
}


/*==========Mobile Menu=============*/

.mean-container .mean-bar,
.mean-container .mean-nav {
	background: #fff;
}

.mean-container a.meanmenu-reveal {
	color: #00aeef;
}

.mean-container a.meanmenu-reveal span {
	background: #00aeef;
}

.mean-container .mean-nav ul li a {
	color: #00aeef;
}


/*====================== Header CSS END ===================*/



/*====================== Banner CSS ===================*/

#banner,
#page-banner {
	padding-top: 130px;
	position: relative;
}

#banner:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 168, 186, 0.4);
}

#banner img {
	height: 150px;
	width: 180px;
	object-fit: contain;
	margin: 0 auto;
	margin-bottom: 30px;
	padding: 20px;
	opacity: 0.7;
}

#banner #banner-slider .item {
	border: 3px solid #FFCB05;
	margin: 20px;
	margin-bottom: 50px;
}

/*====================== Banner CSS END ===================*/



/*====================== About CSS  ===================*/

.about-text {
	padding: 50px 0;
}

.about-text p {
	line-height: 35px;
	text-align: justify;
}

.about-image {
	height: 450px;
	position: relative;
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
}

.about-image:before {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	border: 4px solid #00aeef;
	bottom: 20px;
	left: 20px;
	z-index: -1;
}


/*====================== About CSS END ===================*/



/*====================== Why Choose Us CSS ===================*/

.why-cover {
	text-align: center;
	padding: 0 20px;
}

.why-cover .icon {
	height: 100px;
	width: 100px;
	margin: 0 auto;
	background: #00aeef;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	overflow: hidden;
}

.why-cover .icon i {
	text-shadow: #00a4ba 1px 1px, 
				 #00a4ba 2px 2px, 
				 #00a4ba 3px 3px, 
				 #00a4ba 4px 4px, 
				 #00a4ba 5px 5px, 
				 #00a4ba 6px 6px, 
				 #00a4ba 7px 7px, 
				 #00a4ba 8px 8px, 
				 #00a4ba 9px 9px, 
				 #00a4ba 10px 10px, 
				 #00a4ba 11px 11px, 
				 #00a4ba 12px 12px, 
				 #00a4ba 13px 13px, 
				 #00a4ba 14px 14px, 
				 #00a4ba 15px 15px, 
				 #00a4ba 16px 16px, 
				 #00a4ba 17px 17px, 
				 #00a4ba 18px 18px, 
				 #00a4ba 19px 19px, 
				 #00a4ba 20px 20px, 
				 #00a4ba 21px 21px, 
				 #00a4ba 22px 22px, 
				 #00a4ba 23px 23px, 
				 #00a4ba 24px 24px, 
				 #00a4ba 25px 25px, 
				 #00a4ba 26px 26px, 
				 #00a4ba 27px 27px, 
				 #00a4ba 28px 28px, 
				 #00a4ba 29px 29px, 
				 #00a4ba 30px 30px, 
				 #00a4ba 31px 31px, 
				 #00a4ba 32px 32px, 
				 #00a4ba 33px 33px, 
				 #00a4ba 34px 34px, 
				 #00a4ba 35px 35px, 
				 #00a4ba 36px 36px, 
				 #00a4ba 37px 37px, 
				 #00a4ba 38px 38px, 
				 #00a4ba 39px 39px, 
				 #00a4ba 40px 40px;
}

.why-cover .icon i:before {
	font-size: 60px;
	color: #fff;
	margin: 0;
}

.why-cover .title {
	margin: 20px 0;
}

.why-cover .desc p {
	text-align: justify;
}


/*====================== Why Choose Us CSS END ===================*/



/*====================== Product CSS ===================*/

.more {
	margin-top: 50px;
	text-align: center;
}

.more a {
	padding: 10px 20px;
	border: 1px solid #FFCB05;
	color: #FFCB05;
	transition: .5s ease all;
	font-size: 18px;
}

.more a:hover {
	background-color: #FFCB05;
	color: #fff;
	transition: .5s ease all;
}

/*====================== Product CSS End ===================*/



/*====================== Newsletter CSS ===================*/

#newsletter {
	background-color: rgba(255,255,255,0.8);
}

#newsletter .section-title p {
	width: 50%;
	margin: 0 auto;
	text-align: center;
	margin-top: 20px;
}

#newsletter .newsletter-form {
	width: 50%;
	margin: 0 auto;
	position: relative;
}

#newsletter .newsletter-form input {
	width: 100%;
	border: none;
	height: 50px;
	padding: 0 30px;
	font-size: 12px;
	box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15) , -6px -6px 10px -1px rgba(255,255,255,0.7);
}

#newsletter .newsletter-form input:focus,
#newsletter .newsletter-form input[type="submit"]:hover {
	box-shadow: inset 6px 6px 10px -1px rgba(0,0,0,0.15) , inset -6px -6px 10px -1px rgba(255,255,255,0.7);
}

#newsletter .newsletter-form input[type="submit"] {
	background-color: #00a4ba;
	color: #fff;
}

#newsletter .newsletter-form a {
	padding: 6px 10px;
	background-color: #00aeef;
	color: #fff;
	height: 100%;
	width: 100%;
	display: block;
	transition: transform .5s;
}

#newsletter .newsletter-form .newsletter-submit {
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
}

#newsletter .newsletter-form .newsletter-submit a {
	display: flex;
	justify-content: center;
	align-items: center;
}

#newsletter .newsletter-form a svg {
	font-size: 22px;
}

#newsletter .newsletter-cover .section-title p a {
		color: #00aeef;
}

#newsletter .newsletter-cover .section-title p a:hover {
		color: #FFCB05;
}


/*====================== Newsletter CSS END ===================*/


/*====================== Testimonial CSS ===================*/

.testimonial-cover {
	text-align: center;
	width: 70%;
	margin: 0 auto;
}

.avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 40px auto;
}

.quote .quote-text {
	position: relative;
}

.quote .quote-text svg {
	font-size: 10px;
	position: absolute;
	color: #FFCB05;
}

.quote .quote-text svg.left-quote {
	top: 0;
	left: -10px;
}

.quote .quote-text svg.right-quote {
	bottom: 12px;
	margin-left: 10px;
}

.author svg {
	color: #FFCB05;
	margin-right: 10px;
}

.author .author-name {
	font-weight: bold;
	color: #FFCB05;
}

.owl-theme .owl-dots .owl-dot.active span {
	background: #FFCB05; 
}

/*====================== Testimonial CSS END ===================*/



/*====================== Contact CSS ===================*/

.contact-cover {
	text-align: center;
}

.contact-cover .contact-icon {
	border-radius: 50%;
	perspective: 100px;
	height: 100px;
	width: 100px;
	margin: 0 auto;
	margin-bottom: 30px;
}

.contact-cover .contact-icon span {
	border: 2px solid transparent;
	height: 100%;
	border-radius: 50%;
	width: 100%;
	background-color: #00aeef;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 1s ease;
}


.contact-cover .contact-icon span:before {
	font-size: 52px;
	margin: 0;
}

.contact-cover:hover .contact-icon span {
	transform: rotateY(180deg);
	transform-origin: center;
	transition: transform 1s ease;
}

.contact-cover .contact-detail p,
.contact-cover .contact-detail p a {
	color: #00aeef;
}

/*====================== Contact CSS END ===================*/



/*====================== Footer CSS ===================*/

.top-footer {
	background-color: #fff;
}

.top-footer section {
	padding: 0;
}

.top-footer section h4.widget-title {
	text-align: center;
	color: #FFCB05;
	margin-bottom: 30px;
}

.top-footer .first-widget {
	margin-bottom: 20px;
	text-align: center;
}

.top-footer .first-widget img {
	margin: 0 auto;
	height: auto;
	width: auto;
}

.top-footer .footer-desc {
	color: #00aeef;
}

.top-footer .footer-desc p a {
	line-height: 30px;
	text-align: justify;
	color: #00aeef;
}

.top-footer .footer-desc p a:hover {
	color: #FFCB05;
}

.top-footer #menu-footer-menu li {
	list-style: none;
	text-align: center;
	line-height: 40px;
}

.top-footer #menu-footer-menu li a {
	color: #00aeef;
}

.top-footer #menu-footer-menu li a:hover {
	color: #FFCB05;
}

.top-footer #menu-footer-menu li a svg {
	margin-right: 10px;
	transition: .4s ease;
}

.top-footer #menu-footer-menu ul li a:hover svg {
	transition: .4s ease;
	margin-right: 20px;
	color: #FFCB05;
}

.top-footer .footer-social-title h4.social-title {
	margin-bottom: 30px;
	color: #FFCB05;
}

.top-footer .footer-social {
	text-align: center;
}

.top-footer .footer-social a {
	margin-right: 20px;
	display: inline-block;
}

.top-footer .footer-social a:last-child{
	margin-right: 0;
}

.top-footer .footer-social a svg {
	font-size: 22px;
	color: #00aeef;
	transition: .4s ease;
	transform: translateY(0);
}

.top-footer .footer-social a:hover svg {
	transition: .4s ease;
	transform: translateY(-10px);
	color: #FFCB05;
}

.bottom-footer {
	background-color: #333;
}

.bottom-footer p {
	line-height: 50px;
	text-align: center;
	color: #fff;
	margin: 0;
}

.bottom-footer p a {
	color: #00aeef;
}

.bottom-footer p a:hover {
	color: #FFCB05;
}


/*====================== Footer CSS End ===================*/






/*
========================== Other pages  
==========================
*/



/*===================== Page Banner ====================*/

.page-title {
	position: relative;
}

.page-title h2 {
	text-align: center;
	color: #00aeef;
}

#page-banner:before {
	background-color: rgba(0,0,0,0.7);
}

/*==================  Product page css ==========================*/

section#products-section {
	padding-top: 150px;
}

#product .mix {
	display: none;
}

.product-filter {
	margin-bottom: 50px;
	display: none;
}

.controls .active {
	color: #fff;
	border-color: #FFCB05;
	background: #FFCB05;
}

.controls .btn {
	border-color: #FFCB05;
	text-transform: capitalize;
	margin: 2px;
	border-radius: 0;
	transition: .5s ease all;
}

.controls a.btn:hover,
.controls a.active:hover {
	background: #FFCB05;
	color: #fff;
	transition: .5s ease all;
}

.product-wrapper {
	padding: 20px;
	background-color: #eaeaea;
	border-radius: 20px;
	text-align: center;
	position: relative;
	height: 400px;
	overflow: hidden;
	margin-bottom: 30px;
}

.product-wrapper:before {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	background-color: #00aeef;
	left: 0;
	clip-path: circle(150px at 80% 20%);
	transition: 0.5s ease-in-out;
}

.product-wrapper:hover:before {
	clip-path: circle(300px at 80% -20%);
}

.product-wrapper .product-image {
	height: 230px;
	position: absolute;
	z-index: 999;
	width: 100%;
	top: 20%;
	left: 0;
	transition: 0.5s ease-in-out;
}

.product-wrapper .product-image img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	object-fit: contain;
}

.product-wrapper:hover .product-image {
	top: 0%;
	transform: translateY(0%);
}

.product-wrapper .product-name {
	margin: 20px 0;
	position: absolute;
	height: 30px;
	bottom: 0;
	left: 0;
	width: 100%;
	transition: .5s ease-in-out;
	opacity: 0;
	visibility: hidden;
}

.product-wrapper:hover .product-name {
	height: 100px;
	opacity: 1;
	visibility: visible;
}

.product-wrapper .product-name p{
	font-size: 22px;
}

.pagination {
	margin: 0 15px;
}

.pagination .nav-links {
	display: flex;
}

.pagination .nav-links span,
.pagination .nav-links a {
	font-family: 'Josefin Sans', sans-serif;
	height: 30px;
	width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #00a4ba;
	margin-right: 10px;
}

.pagination .nav-links a {
	color: #00a4ba;
}

.pagination .nav-links a:hover,
.pagination .nav-links span {
	background: #00a4ba;
	color: #fff;
}


/*==================  Product page CSS END ==========================*/


/*==================  Contact page CSS ==========================*/

#contact {
	padding-top: 150px;
}

#contact-form {
	background-color: #eaeaea;
}

.form form textarea {
	padding: 15px 30px;
}

.form form input[type="text"],
.form form input[type="email"],
.form form input[type="tel"] {
	padding: 0 30px;
	height: 50px;
}

.form form textarea,
.form form input[type="text"],
.form form input[type="email"],
.form form input[type="tel"] {
	width: 100%;
}

.form form textarea,
.form form input[type="text"],
.form form input[type="email"],
.form form input[type="submit"],
.form form input[type="tel"] {
	background-color: #eaeaea;
	font-size: 12px;
	margin-bottom: 20px;
	font-weight: 600;
	border: none;
	border-radius: 20px;
	box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
	transition: all .5s ease;
}

.form form textarea:focus,
.form form input:focus {
	transition: all .5s ease;
	outline: none;
	box-shadow: inset 6px 6px 10px -1px rgba(0,0,0,0.15), inset -6px -6px 10px -1px rgba(255, 255, 255, 0.7);

}

.form form textarea::placeholder,
.form form input::placeholder {
	font-weight: 600;
}

.form form .send {
	margin-top: 20px;
}

.form form input[type="submit"] {
	padding: 15px 30px;
	color: #666;
}

.form form input[type="submit"]:hover {
	box-shadow: inset 6px 6px 10px -1px rgba(0,0,0,0.15), inset -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}

/*==================  Contact page CSS END ==========================*/





/*==================  Search page CSS ==========================*/

#search-page {
	padding-top: 150px;
}

header.page-header h1.page-title {
	color: #00a4ba;
	font-family: 'Josefin Sans', sans-serif;
	margin-bottom: 30px;
}

article {
	box-shadow: 0px 8px 7px -5px rgba(0,0,0,0.3);
}

article a,
nav.posts-navigation .nav-links a {
	color: #00a4ba;
}

article a:hover,
nav.posts-navigation .nav-links a:hover {
	color: #FFCB05;
}

article {
	margin-bottom: 50px;
}

article a.post-thumbnail,
article .entry-header h2.entry-title,
article .entry-summary {
	padding: 30px;
}

article a.post-thumbnail {
	display: block;
}

article a.post-thumbnail img {
	width: 400px;
	height: 300px;
	object-fit: contain;
}

article .entry-header h2.entry-title {
	margin-bottom: 30px;
}

article .entry-header h2.entry-title a {
	border-bottom: 1px solid #00a4ba;
}

/*==================  Search page CSS END ==========================*/