/* =====================================
Template Name: Modern Clare - eCommerce
Author Name: Webby Crown
Author URI:
Description: Modern Clare - eCommerce HTML5 Template.
Version:1.0
========================================*/
/*======================================
[ CSS Table of contents ]
|
|___ Home one style
| |
| |___ 1440 Laptop Screen
| |___ 01. Hero banner section CSS
| |
| |___ 1199 Tablet Screen
| |___ 01. Hero banner section CSS
| |___ 02. banner adds section CSS
| |___ 03. Newsletter section CSS
| |___ 10. footer style 1 CSS
| |
| |___ 992 min Tablet Screen
| |___ mega menu style
| |
| |___ 991 Tablet Screen
| |___ 01. Header style 1 CSS
| |___ 02. Hero banner section CSS
| |___ 03. Icon box section CSS
| |___ 04. banner adds section CSS
| |___ 05. Popular Categories section CSS
| |___ 06. offer banner section CSS
| |
| |___ 767 Mobile Screen
| |___ 01. Header style 1 CSS
| |___ 02. Hero banner section CSS
| |___ 03. Icon box section CSS
| |___ 04. banner adds section CSS
| |___ 05. Popular Categories section CSS
| |___ 06. offer banner section CSS
| |___ 07. Newsletter section CSS
| |___ 08. footer style 1 CSS
| |___ 09. Newsletter popup CSS
| |___ 10. Cookie popup CSS
| |___ 11. Mini Cart Dropdown
| |___ 12. Mobile menu style CSS
| |
|___ Home two style
| |
| |___ 991 Tablet Screen
| |___ 01. Header style 2 CSS
| |___ 02. Hero banner section style 2 CSS
| |___ 03. image with text section CSS
| |___ 04. Testimonial section CSS
| |___ 05. Icon box section style 2 CSS
| |___ 06. footer style 2 CSS
| |
| |___ 767 Mobile Screen
| |___ 01. Header style 2 CSS
| |___ 02. Hero banner section style 2 CSS
| |___ 03. Best Sellers section CSS
| |___ 04. image with text section CSS
| |___ 05. Testimonial section CSS
| |___ 06. Icon box section style 2 CSS
| |___ 07. footer style 2 CSS
| |
|___ Home Three style
| |
| |___ 1199 Tablet Screen
| |___ 01. Hero grid banner section style 3 CSS
| |___ 02. Top collection section style 3 CSS
| |___ 03. offer banner section style 3 CSS
| |
| |___ 991 Tablet Screen
| |___ 01. Hero grid banner section style 3 CSS
| |___ 02. Popular Categories section style 3 CSS
| |___ 03. Top collection section style 3 CSS
| |___ 04. offer banner section style 3 CSS
| |___ 05. Latest bloog & news section style 3 CSS
| |___ 06. Shop Social section style 3 CSS
| |
| |___ 767 Mobile Screen
| |___ 01. Header style 3 CSS
| |___ 02. Hero grid banner section style 3 CSS
| |___ 03. Popular Categories section style 3 CSS
| |___ 04. Top collection section style 3 CSS
| |___ 05. offer banner section style 3 CSS
| |___ 06. New arrival section CSS style 3 CSS
| |___ 07. Shop Social section style 3 CSS
| |___ 08. Instagram section style 3 CSS
| |___ 09. footer style 3 CSS
| |
|___ Shop page style
| |
| |___ 1199 Tablet Screen
| |___ 03. Product Quick view Popup CSS
| |
| |___ 767 Mobile Screen
| |___ 01. Shop sidebar style CSS
| |___ 02. filter shop loop style CSS
| |___ 03. Product Quick view Popup CSS
| |
| |___ 640 Mobile Screen
| |___ 01. filter shop loop style CSS
| |
|___ Shop list page style
| |
| |___ 991 Tablet Screen
| |___ 01. product list style CSS
| |
| |___ 640 Mobile Screen
| |___ 01. product list style CSS
| |
|___ Wishlist page style
| |
| |___ 767 Mobile Screen
| |___ 01. Wishlist grid style CSS
| |
|___ About us page style
| |
| |___ 991 Tablet Screen
| |___ 01. About content section style CSS
| |___ 02. About video section style CSS
| |___ 03. Our Team section style CSS
| |
|___ Blog page style
| |
| |___ 991 Tablet Screen
| |___ 01. blog grid style 3
| |___ 02. Blog sidebar style CSS
| |
|___ My Account pagee style
| |
| |___ 767 Mobile Screen
| |___ 01. Account form style CSS
| |
|___ CMS page style
| |
| |___ 767 Mobile Screen
| |___ 01. CMS content style CSS
| |
|___ 404 page style
| |
| |___ 01. Not found content style CSS
| |
|___ Contact page style
| |
| |___ 991 Tablet Screen
| |___ 01. Contact Information style CSS
| |___ 02. Contact form style CSS
| |
| |___ 767 Mobile Screen
| |___ 01. Contact Information style CSS
| |___ 02. Contact form style CSS
| |
|___ Blog single page style
| |
| |___ 767 Mobile Screen
| |___ 01. Blog posts style CSS
| |___ 02. Blog posts comments style CSS
| |
|___ Cart page style
| |
| |___ 991 Tablet Screen
| |___ 01. Cart sidebar style CSS
| |
| |___ 767 Mobile Screen
| |___ 01. Cart product table style CSS
| |___ 02. Cart sidebar style CSS
| |
|___ Empty page style
| |
| |___ 767 Mobile Screen
| |___ 01. Empty Cart content style CSS
| |
|___ My Account page
| |
| |___ 767 Mobile Screen
| |___ 01. My Account admin style CSS
| |___ 02. My Account left menu style CSS
| |___ 03. My Account Dashboard style CSS
| |
|___ Site map page
| |
| |___ 767 Mobile Screen
| |___ 01. Site map list style CSS
| |
|___ FAQ page
| |
| |___ 767 Mobile Screen
| |___ 01. accordion style CSS
| |
|___ Thank you
| |
| |___ 767 Mobile Screen
| |___ 01. Thank you order style CSS
| |
|___ Product detail style 1 page
| |
| |___ 991 Tablet Screen
| |___ 01. Product gallery column style 1 CSS
| |
| |___ 767 Mobile Screen
| |___ 01. Product gallery column style 1 CSS
| |___ 02. Product tabs style 1 CSS
| |
| |___ 640 Mobile Screen
| |___ 01. Product info style 1 CSS
| |
|___ Product detail style 2 page
| |
| |___ 767 Mobile Screen
| |___ 01. Product gallery column style 2 CSS
| |___ 02. Product info style 2 CSS
| |___ 03. Product tabs style 2 CSS
| |
|___ Product detail style 3 page
| |
| |___ 767 Mobile Screen
| |___ 01. Product info style 3 CSS
| |
|___ Compare page style
| |
| |___ 767 Mobile Screen
| |___ 01. Compare Product list CSS
| |
|___ Presantation page style
| |
| |___ 1199 Tablet Screen
| |___ 01. Presantation header CSS
| |___ 02. Presantation banner section CSS
| |___ 03. features service section CSS
| |___ 04. Beautiful Pre-built Inner Pages section CSS
| |___ 05. Professional Footer style 4 CSS
| |
| |___ 991 Tablet Screen
| |___ 01. Presantation header CSS
| |___ 02. Presantation banner section CSS
| |___ 03. features service section CSS
| |___ 04. More features in Clare section CSS
| |___ 05. Stunning home pages section CSS
| |___ 06. Beautiful Pre-built Inner Pages section CSS
| |___ 07. Professional store section CSS
| |___ 08. Professional Footer style 4 CSS
| |
| |___ 767 Mobile Screen
| |___ 01. Presantation header CSS
| |___ 02. Presantation banner section CSS
| |___ 03. features service section CSS
| |___ 04. More features in Clare section CSS
| |___ 05. Stunning home pages section CSS
| |___ 06. Beautiful Pre-built Inner Pages section CSS
| |___ 07. Professional store section CSS
| |___ 08. Professional Footer style 4 CSS

========================================*/
@media screen and (min-width: 48rem) {

	/* .banner .banner-content {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		padding-left: 2.875rem;
		padding-right: 2.875rem;
		max-width: 60%;
	} */

	.banner .banner-image {
		position: relative;
	}
}

/* 1440 Laptop Screen */
@media only screen and (max-width: 1440px) {

	/*01. Hero banner section CSS*/
	.hero-banner-section .hero-banner-body {
		max-width: 1160px;
	}
}

/* 1199 Tablet Screen */
@media only screen and (max-width: 1199px) {

	/*01. Hero banner section CSS*/
	.hero-banner-section .hero-banner-body {
		padding-left: 295px;
	}

	.hero-banner-section .hero-banner-body {
		max-width: 1020px;
	}

	/*02. banner adds section CSS*/
	.banner.banner-small:first-child {
		margin-bottom: 26px;
	}

	.banner .banner-content {
		max-width: 75%;
	}

	/*03. Newsletter section CSS*/
	.newsletter-left-img,
	.newsletter-right-img {
		max-width: 40%;
		height: 100%;
		display: flex;
		align-items: flex-end;
	}

	/*===========================
	Home Three style
	=============================*/
	/*01. Hero grid banner section style 3 CSS*/
	.hero-grid-banner-section .hero-banner-content .entry-subtitle {
		margin-bottom: 10px;
	}

	.hero-grid-banner-section .hero-banner-content h1 {
		font-size: var(--h2);
		line-height: var(--h2-lineHeight);
		margin-bottom: 20px;
	}

	/*02. Top collection section style 3 CSS*/
	.top-collection-section .banner {
		height: calc(100% - 80px);
	}

	.top-collection-section .banner .banner-content {
		max-width: 80%;
	}

	/*03. offer banner section style 3 CSS*/
	.offer-banner-section.style-3 .offer-banner-content {
		padding: 50px;
		left: 0;
	}

	/*===========================
	Shop page style
	=============================*/

	/*03. Product Quick view Popup CSS*/
	.product-quick-body .quick-view-content {
		padding: 60px 25px;
	}

	.product-quick-body .product-info-style-2 .variation-quantity {
		gap: 0px;
	}

	.product-quick-body .single-add-to-cart .btn {
		padding: 15px 20px;
		font-size: var(--font-size-b2);
	}

	.product-quick-body .variation-add-to-cart {
		flex-wrap: wrap;
	}

	/*===========================
	Presantation page style
	=============================*/
	/*01. Presantation header CSS*/
	.presantation-header .site-nav.primary-nav .menu>.menu-item {
		margin-left: 1rem;
	}

	/*02. Presantation banner section CSS*/
	.Presantation-banner-section .hero-banner-content h1 {
		font-size: var(--h2);
		line-height: var(--h2-lineHeight);
	}

	.Presantation-banner-section .hero-banner-img .icon {
		width: 80px;
		height: 80px;
	}

	.Presantation-banner-section .hero-banner-img .icon-html {
		right: -15px;
	}

	/*03. features service section CSS*/
	.features-service-list ul li {
		font-size: var(--font-size-b3);
	}

	/*04. Beautiful Pre-built Inner Pages section CSS*/
	.inner-page-grid .stunning-features-box {
		padding: 0 10px;
		margin: 0 0px 25px;
	}

	/*05. Professional Footer style 4 CSS*/
	.footer-style-4 .box-item.box-item-1 {
		top: 55px;
		left: 5vw;
	}

	.footer-style-4 .box-item.box-item-3 {
		top: 75px;
	}

	.footer-style-4 .box-item.box-item-4 {
		bottom: 30px;
		left: -4vw;
	}

	.footer-style-4 .box-item.box-item-2 {
		bottom: 70px;
		right: 3vw;
	}

	.product-info-product-list .cart-product .cart-thumb {
		margin-right: 0px;
	}

	.product-info-style-2 .variation-quantity {
		gap: 5px;
	}

	.variation-quantity .quantity {
		width: 130px;
	}


}

/* Tablet Screen */
@media only screen and (max-width: 1024px) {}

@media only screen and (min-width: 768px) and (max-width: 991px) {}

/* 992 min Tablet Screen */
@media only screen and (min-width: 768px) {
	.menu .menu-item {
		position: relative;
	}

	.menu-item>.sub-menu {
		position: absolute;
		min-width: 15rem;
		top: 100%;
		left: -1rem;
		margin: 0;
		padding: 1rem 2rem;
		list-style: none;
		background-color: #fff;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		-webkit-transition: all 0.2s cubic-bezier(.28, .12, .22, 1);
		transition: all 0.2s cubic-bezier(.28, .12, .22, 1);
		border-radius: 0px 0px 4px 4px;
	}

	.menu-item:hover>.sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.menu-item:hover>.sub-menu>li>a {
		color: var(--color-body);
		font-size: var(--font-size-b2);
		line-height: 32px;
		font-weight: var(--regular);
	}

	.menu-item:hover>.sub-menu>li>a:hover {
		color: var(--color-primary);
	}

	.menu .menu-item.mega-menu {
		position: static;
	}


	.menu-item>.sub-menu.menu-megamenu {
		width: 100%;
		z-index: 9999;
		padding: 0;
		max-width: 100%;
		left: 0;
		background: transparent;
	}

	.menu-item>.sub-menu.menu-megamenu .sub-mega-menu {
		padding: 25px 30px;
		box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
		background: #fff;
		border: 0;
		border-radius: 0px 0px 4px 4px;
	}

	.menu-item>.sub-menu.menu-megamenu-large {
		background: var(--color-white);
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
	}

	.menu-item>.menu-megamenu-large .sub-mega-menu {
		padding: 25px 0px !important;
		border-top: 1px solid #efefef !important;
		box-shadow: none !important;
		border-radius: 0 !important;
	}

	.sub-mega-menu {
		width: 100%;
		padding: 25px 0px;
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
	}

	/*.menu li:hover .sub-mega-menu{
		display: -webkit-inline-box;
	  display: -ms-inline-flexbox;
	  display: inline-flex;
	}*/
	.sub-mega-menu li {
		list-style-type: none;
	}

	.sub-mega-menu li ul {
		padding: 0;
		margin: 0;
	}

	.sub-mega-menu>li {
		width: 70%;
	}

	.sub-mega-menu>li:last-child {
		width: 30%;
	}

	.sub-mega-menu li .sub-menu {
		display: flex;
	}

	.sub-mega-menu li .sub-menu>li {
		width: 33.33%;
		padding: 0 10px;
	}

	.image-sub-menu>a,
	.sub-mega-menu li .sub-menu li>a {
		font-size: var(--font-size-b2);
		font-weight: var(--semi-bold);
		color: var(--color-dark);
	}

	.sub-mega-menu li .sub-menu>li ul {
		margin: 13px 0;
	}

	.sub-mega-menu li .sub-menu>li ul li a {
		color: var(--color-body);
		font-size: var(--font-size-b2);
		line-height: 32px;
		font-weight: var(--regular);
	}

	.sub-mega-menu li .sub-menu>li ul li.active a,
	.sub-mega-menu li .sub-menu>li ul li a:hover {
		color: var(--color-primary);
	}

	.sub-mega-menu .image-sub-menu ul {
		margin: 13px 0;
		padding: 0;
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		flex-wrap: wrap;
		gap: 20px;
	}

	.sub-mega-menu .image-sub-menu ul li {
		width: calc(50% - 20px);
	}

}

/* 991 Tablet Screen */
@media only screen and (max-width: 991px) {

	/*01. Header style 1 CSS*/
	.header-navbar .all-categories {
		max-width: 70px;
	}

	.header-navbar .all-categories .dropdown-toggle .departments-text {
		display: none;
	}

	.departments-menu.dropdown-menu {
		width: 250px;
		display: none;
	}

	.header-navbar .all-categories .dropdown-toggle {
		padding: 17px 15px;
	}

	.site-header .site-nav.primary-nav .menu>.menu-item {
		margin-left: 1rem;
	}

	.site-header .site-nav.primary-nav .menu>.menu-item>a {
		font-size: 14px;
	}

	.header-button-right .header-button {
		margin-left: 0rem;
		margin-right: 5px;
	}

	/*02. Hero banner section CSS*/
	.hero-banner-section .hero-banner-body {
		padding-left: 0;
	}

	.hero-banner-section {
		min-height: inherit;
	}

	h1 {
		font-size: var(--h2);
		line-height: var(--h2-lineHeight);
	}

	/*03. Icon box section CSS*/
	.iconbox-icon {
		flex: 0 0 40px;
		max-width: 40px;
	}

	/*04. banner adds section CSS*/
	.banner .banner-content {
		max-width: 90%;
		padding: 20px 20px;
	}

	.banner .banner-content .entry-title {
		font-size: var(--h3);
		line-height: normal;
	}

	/*05. Popular Categories section CSS*/
	.popular-categories-grid .popular-categories {
		padding: 20px;
	}

	.popular-categories-wrap .module-header {
		padding: 23px 20px;
		margin: 0;
	}

	/*06. offer banner section CSS*/
	.offer-banner-content {
		padding: 30px;
		background-size: 46%;
	}

	/*Product style*/
	.feature-products-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/*===========================
	Home two style
	=============================*/
	/*01. Header style 2 CSS*/
	.header-type2 .site-brand {
		margin-right: 20px;
		max-width: 110px;
	}

	/*02. Hero banner section style 2 CSS*/
	.hero-slider-section .hero-banner-content h1 {
		font-size: 46px;
		line-height: 50px;
		margin-bottom: 15px;
		font-weight: var(--semi-bold);
	}

	.hero-slider-section .hero-banner-content .entry-subtitle {
		margin-bottom: 15px;
	}

	/*03. image with text section CSS*/
	.image-with-text-section .image-with-text-des {
		padding: 30px 15px;
		padding-left: 0;
	}

	.image-with-text-des p {
		font-size: var(--font-size-b2);
		margin-bottom: 20px;
	}

	.image-with-text-des .entry-title {
		font-size: var(--h3);
		margin-bottom: 15px;
	}

	/*04. Testimonial section CSS*/
	.testimonial-slider .mySwiper2 {
		padding: 40px 0px 40px 0;
	}

	.testimonial-content {
		padding: 0px 0px 30px 0;
	}

	.testimonial-content p {
		font-size: var(--font-size-b1);
		line-height: 30px;
		margin-bottom: 30px;
	}

	/*05. Icon box section style 2 CSS*/
	.icon-box-section.style-2 {
		padding-bottom: 10px;
	}

	.icon-box-section.style-2 .icon-box {
		margin-bottom: 20px;
	}

	/*06. footer style 2 CSS*/
	.footer-style-2 .newsletter-form .btn {
		width: 150px;
		padding: 12px;
		font-size: var(--font-size-b3);
	}

	/*===========================
	Home Three style
	=============================*/
	/*01. Hero grid banner section style 3 CSS*/
	.hero-grid-banner-section .hero-banner-content {
		padding: 15px;
	}

	.hero-grid-banner-section .hero-banner-content h1 {
		margin-bottom: 10px;
	}

	.hero-grid-banner-section .btn-style-2 {
		padding: 15px 30px;
		font-size: var(--font-size-b2);
	}

	.hero-grid-banner-section .hero-banner-content p {
		margin-bottom: 15px;
	}

	/*02. Popular Categories section style 3 CSS*/
	.popular-categories-section.style-3 .popular-categories-grid {
		grid-template-columns: repeat(4, 1fr);
		justify-content: center;
	}

	/*03. Top collection section style 3 CSS*/
	.top-collection-section .banner {
		height: auto;
		margin-bottom: 30px;
	}

	.top-collection-section .banner .banner-content {
		max-width: 80%;
	}

	/*04. offer banner section style 3 CSS*/
	.offer-banner-section.style-3 .offer-banner-img {
		max-width: 75%;
		margin: 0 0 0 auto;
	}

	.offer-banner-section.style-3 .offer-banner-content {
		max-width: 380px;
		padding: 40px;
	}

	/*05. Latest bloog & news section style 3 CSS*/
	.blog-grid-style-2 .blog-grid-image:before {
		padding-top: 90%;
	}

	/*06. Shop Social section style 3 CSS*/
	.shop-social-section .shop-social-left,
	.get-the-latest-deals {
		padding: 20px 0;
	}

	.shop-social-section .entry-title {
		font-size: var(--h3);
		line-height: var(--h3-lineHeight);
	}

	.shop-social-icon ul {
		margin: 0;
		gap: 10px;
	}

	.shop-social-icon ul li a {
		width: 40px;
		height: 40px;
	}

	.get-the-latest-deals .newsletter-form .btn {
		width: 120px;
	}

	.get-the-latest-deals .newsletter-form .form-control {
		padding: 13px 125px 13px 23px;
	}

	/*===========================
	Shop list page style
	=============================*/
	/*01. product list style CSS*/
	.product-list-grid .product-thumbnail {
		margin-right: 1rem;
	}

	/*===========================
		About us page style
	=============================*/
	/*01. About content section style CSS*/
	.about-content {
		margin-top: 0;
	}

	.about-service-list {
		padding-left: 0px;
	}

	.about-service-list ul li {
		column-gap: 20px;
		padding: 10px 0;
	}

	.about-service-list ul li .icon {
		width: 45px;
	}

	/*02. About video section style CSS*/
	.full-video .video-play-icon {
		max-width: 80px;
	}

	/*===========================
		Blog page style
	=============================*/
	/*01. blog grid style 3*/
	.blog-grid-style-3 .blog-grid-content h6 {
		font-size: var(--font-size-b4);
	}

	.blog-grid-style-3 .blog-grid-content .entry-title {
		font-size: var(--h5);
		line-height: var(--h5-lineHeight);
	}

	/*===========================
		Contact page style
	=============================*/
	/*01. Contact form style CSS*/
	.contact-form {
		margin-top: 30px;
		height: auto;
	}

	/*===========================
		Blog single page style
	=============================*/
	.blog-single-page .blog-sidebar {
		margin-top: 30px;
	}

	.blog-single-page .blog-sidebar .sidebar-inner {
		max-width: 100%;
	}

	/*===========================
		Cart page style
	=============================*/
	/*01. Cart sidebar style CSS*/
	.cart-sidebar {
		max-width: 100%;
		margin: 15px 0 0;
	}

	/*===========================
		Product detail style 1 page
	=============================*/
	/*01. Product gallery column style 1 CSS*/
	.product-gallery-column {
		margin-bottom: 30px;
	}

	/*===========================
		Presantation page style
	=============================*/
	/*01. Presantation header CSS*/
	.presantation-header .site-nav.primary-nav .menu>.menu-item>a {
		font-size: var(--font-size-b3);
		line-height: var(--line-height-b3);
	}

	.presantation-header .site-nav.primary-nav .menu>.menu-item {
		margin-left: 0.8rem;
	}

	.presantation-header .header-button-right .btn {
		padding: 10px 10px;
		font-size: var(--font-size-b4);
	}

	.presantation-header .header-navbar {
		display: block;
		padding: 15px 0;
	}

	/*02. Presantation banner section CSS*/
	.Presantation-banner-section .hero-banner-content h1 {
		font-size: var(--h3);
		line-height: var(--h3-lineHeight);
		margin-bottom: 25px;
	}

	.Presantation-banner-section .hero-banner-img .icon-figma {
		left: -20px;
	}

	/*03. features service section CSS*/
	.features-service-list ul {
		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	/*05. Stunning home pages section CSS*/
	.Stunning-home-pages-section .stunning-features-box {
		margin-bottom: 20px;
	}

	/*06. Beautiful Pre-built Inner Pages section CSS*/
	.inner-page-grid .stunning-features-box {
		max-width: 25%;
	}

	/*07. Professional store section CSS*/
	.professional-store-section .professional-store-box {
		padding: 20px 20px 20px 20px;
	}

	.professional-store-box .module-header h2 {
		margin-bottom: 20px;
		font-size: var(--h3);
		line-height: var(--h3-lineHeight);
	}

	.stunning-features-box.small-features {
		max-width: 180px;
		margin: -120px -50px 0 auto;
	}

	/*08. Professional Footer style 4 CSS*/
	.footer-style-4 .footer-content h2 {
		margin-bottom: 20px;
		font-size: var(--h2);
		line-height: var(--h2-lineHeight);
	}

	.footer-style-4 .box-item.box-item-4 {
		bottom: 10px;
		left: 1vw;
		max-width: 250px;
	}

	.footer-style-4 {
		padding: 140px 0 170px;
	}

	.header-search-form {
		max-width: 440px;
	}

	.product-info-product-list .quantity .quantity-button {
		height: auto;
	}

}

@media (min-width: 768px) and (max-width: 1024px) {

	/*12. Mobile menu style CSS*/
	.sub-mega-menu {
		padding: 25px 15px;
	}

	.presantation-header .toggle-menu img {
		width: 22px;
	}

	body.menu-open .presantation-header.site-header:before {
		content: '';
		position: fixed;
		right: 0;
		top: 0;
		z-index: 3;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		transition: all 0.3s ease;
	}

	.presantation-header .mobile-menu {
		position: fixed;
		right: -150%;
		top: 0;
		max-width: 100%;
		background: var(--color-white);
		padding: 0px 0 0;
		height: 100%;
		width: 100%;
		z-index: 9999;
		transition: all 0.3s ease;
		display: block;
	}

	.presantation-header .mobile-menu.open {
		right: 0;
	}

	.presantation-header .mobile-menu-close {
		margin: 0 -15px 0 auto;
		background: var(--color-white);
		width: 50px;
		height: 40px;

	}

	.presantation-header .mobile-menu-close a {
		width: 100%;
		height: 100%;
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: center;
		color: var(--color-dark);
		font-size: var(--font-size-b1);
	}

	.presantation-header .mobile-menu .site-nav {
		height: 100%;
	}

	.site-header.presantation-header .mobile-menu .menu {
		height: 100%;
		overflow-y: auto;
		display: block;
		border-top: 1px solid var(--color-extra04);
	}

	.site-header.presantation-header .mobile-menu .menu li {
		display: block;
		margin: 0 !important;
		border-bottom: 1px solid var(--color-extra04);
		position: relative;
	}

	.site-header.presantation-header .mobile-menu .menu li .caret-arrow {
		position: absolute;
		right: 0;
		top: 0;
		width: 50px;
		height: 51px;
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: center;
		cursor: pointer;
	}

	.site-header.presantation-header .mobile-menu .menu li .caret-arrow:before {
		content: "\e64b";
		font-family: 'themify';
		color: var(--color-dark);
		font-size: var(--font-size-b2);
	}

	.site-header.presantation-header .mobile-menu .menu li .caret-arrow.active:before {
		transform: rotate(182deg);
	}

	.site-header.presantation-header .site-nav.primary-nav .menu>.menu-item>a {
		padding: 15px 25px;
		display: block;
		height: auto;
	}

	.site-header.presantation-header .site-nav.primary-nav .menu>.menu-item>a:hover,
	.site-header.presantation-header .site-nav.primary-nav .menu>.menu-item.active>a,
	.site-header.presantation-header .site-nav.primary-nav .menu .menu-item ul li.active>a {
		color: var(--color-primary);
	}

	.presantation-header .site-nav.horizontal>.menu>.menu-item-has-children>a::after {
		display: none;
	}

	.site-header.presantation-header .mobile-menu .menu li ul {
		padding: 0 0 0 10px;
		margin: 0;
		border-top: 1px solid var(--color-extra04);
	}

	.site-header.presantation-header .mobile-menu .menu li ul li ul {
		padding-left: 10px;
	}

	.site-header.presantation-header .mobile-menu .menu li ul li:last-child {
		border-bottom: 0;
	}

	.site-header.presantation-header .mobile-menu .menu li ul li a {
		padding: 10px 25px;
		display: block;
		height: auto;
	}

	.site-header.presantation-header .mobile-menu .menu li ul.sub-mega-menu>li>.sub-menu>li>a {
		color: var(--color-dark);
	}

	.site-header.presantation-header .mobile-menu .menu li .sub-mega-menu .image-sub-menu ul {
		margin: 13px 0;
		padding: 0;
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		flex-wrap: wrap;
		gap: 10px;
	}

}



@media only screen and (min-width: 768px) {
	.compare-product-list .table .hidden-td {
		display: none;
	}

	.mobile-menu {
		display: none;
	}

	.site-header.header-type1 {
		transition: all 0.3s ease;
	}

	.site-header.header-type1.sticky {
		/*top: -36px;*/
	}
}
@media only screen and (max-width: 992px) {

.header-navbar {
    display: none;
}
}

/* 767 Mobile Screen */
@media only screen and (max-width: 767px) {
	
	.site-header.header-type1.sticky {
		
		background: var(--color-primary);
		-webkit-box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.1);
		box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.1);
	}

	.site-header .site-nav.primary-nav .menu>.menu-item:hover>a,
	.site-header .site-nav.primary-nav .menu>.menu-item>a:hover {
		color: var(--color-primary);
	}

	.section-all {
		padding: 15px 0;
		position: relative;
	}

	.module-header h2 {
		font-size: var(--h3);
	}

	.search-bar {
		padding: 0px 50px 0 15px;
	}

	.search-bar .form-group input {
		height: 40px;
	}

	/*01. Header style 1 CSS*/
	.header-type1 .header-wrapper {
		display: block !important;
		text-align: center;
		padding: 8px 0 0;
	}

	.topbar .site-nav .menu-top-right {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.header-navbar {
		display: none;
	}

	/*02. Hero banner section CSS*/
	.hero-banner-section {
		overflow: hidden;
	}

	.hero-banner-content {
		padding: 45px 0 0;
	}

	.hero-banner-content h1 {
		margin-bottom: 12px;
		font-size: 30px;
	}

	.hero-banner-content p {
		margin-bottom: 12px;
	}

	.hero-banner-img {
		text-align: right;
		max-width: 80%;
		margin: -30px -70px 0 auto;
	}

	/*03. Icon box section CSS*/
	.icon-box-section {
		padding-bottom: 10px;
		margin-bottom: 20px;
	}

	.icon-box {
		margin-bottom: 25px;
	}

	.iconbox-icon {
		flex: 0 0 70px;
		max-width: 70px;
	}

	/*04. banner adds section CSS*/
	.banner-adds-section {
		padding-bottom: 0;
	}

	.banner {
		margin-bottom: 30px;
	}

	.banner .banner-content {
		max-width: 75%;
		padding: 30px 30px;
		min-height: 250px;
		display: grid;
		align-content: center;
	}

	.banner .banner-image {
		overflow: hidden;
	}

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

	.banner .banner-content .entry-title {
		font-size: var(--h5);
	}

	.banner .btn.link {
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: start;
	}

	/*05. Popular Categories section CSS*/
	.popular-categories-grid .popular-categories {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	.popular-categories-grid .popular-categories:nth-of-type(2),
.popular-categories-grid .popular-categories:nth-of-type(4),
.popular-categories-grid .popular-categories:nth-of-type(6){
    border-left: 0;
}
.popular-categories-grid .popular-categories:nth-of-type(3),
.popular-categories-grid .popular-categories:nth-of-type(5){
border-left: 1px solid var(--color-extra01);
}

	/*06. offer banner section CSS*/
	.offer-banner-content {
		padding: 25px 15px 145px 15px;
		background-size: 100%;
	}

	.offer-banner-content h2 {
		font-size: var(--h4);
	}

	/*07. Newsletter section CSS*/
	.newsletter-section {
		padding: 70px 0 70px;
	}

	.newsletter-content h2 {
		font-size: var(--h4);
		margin-bottom: 8px;
	}

	.newsletter-content p {
		margin-bottom: 12px;
	}

	.newsletter-form .form-control {
		padding: 14px 145px 14px 12px;
	}

	.newsletter-form .btn {
		width: 140px;
		padding: 10px;
	}

	.newsletter-left-img,
	.newsletter-right-img {
		max-width: 100%;
		display: none;
	}

	/*Product style*/
	.feature-products-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/*08. footer style 1 CSS*/
	.footer-style-1 .site-brand {
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.footer-column {
		margin-bottom: 30px;
	}

	.site-copyright {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		width: 100%;
		margin-bottom: 10px;
	}

	.site-copyright p {
		font-size: var(--font-size-b2);
	}

	.payments-icon {
		text-align: center;
	}

	/*09. Newsletter popup CSS*/
	.newsletter-popup-block {
		height: auto;
	}

	.newsletter-body {
		padding: 40px 20px;
		background-image: none !important;
	}

	.newsletter-popup-content h6 {
		margin-bottom: 20px;
	}

	.newsletter-popup-content p {
		margin-bottom: 20px;
	}

	/*10. Cookie popup CSS*/
	.cookie-popup {
		max-width: calc(100% - 40px);
		right: 20px;
		padding: 20px;
	}

	.cookie-popup .cookie-button {
		gap: 10px;
	}

	.cookie-popup .cookie-button .btn {
		font-size: var(--font-size-b3);
		padding: 12px 20px;
	}

	/*11. Mini Cart Dropdown*/
	.cart-dropdown-wrapper .summary-product-list .cart-product .cart-thumb {
		width: 80px;
		height: 80px;
	}

	/*12. Mobile menu style CSS*/
	.toggle-menu img {
		width: 22px;
	}

	body.menu-open .site-header:before {
		content: '';
		position: fixed;
		right: 0;
		top: 0;
		z-index: 3;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		transition: all 0.3s ease;
	}

	.mobile-menu {
		position: fixed;
		right: -150%;
		top: 0;
		max-width: 100%;
		background: var(--color-white);
		padding: 0px 0 0;
		height: 100%;
		width: 100%;
		z-index: 9999;
		transition: all 0.3s ease;
	}

	.mobile-menu.open {
		right: 0;
	}

	.mobile-menu-close {
		margin: 0 -15px 0 auto;
		background: var(--color-white);
		width: 50px;
		height: 40px;

	}

	.mobile-menu-close a {
		width: 100%;
		height: 100%;
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: center;
		color: var(--color-dark);
		font-size: var(--font-size-b1);
	}

	.site-header .mobile-menu .menu {
		height: 100%;
		overflow-y: auto;
		display: block;
		border-top: 1px solid var(--color-extra04);
	}

	.site-header .mobile-menu .menu li {
		display: block;
		margin: 0 !important;
		border-bottom: 1px solid var(--color-extra04);
		position: relative;
	}

	.site-header .mobile-menu .menu li .caret-arrow {
		position: absolute;
		right: 0;
		top: 0;
		width: 50px;
		height: 51px;
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: center;
		cursor: pointer;
	}

	.site-header .mobile-menu .menu li .caret-arrow:before {
		content: "\e64b";
		font-family: 'themify';
		color: var(--color-dark);
		font-size: var(--font-size-b2);
	}

	.site-header .mobile-menu .menu li .caret-arrow.active:before {
		transform: rotate(182deg);
	}

	.site-header .site-nav.primary-nav .menu>.menu-item>a {
		padding: 15px 25px;
		display: block;
		height: auto;
		font-size: 16px;
	}

	.site-header .site-nav.primary-nav .menu>.menu-item>a:hover,
	.site-header .site-nav.primary-nav .menu>.menu-item.active>a,
	.site-header .site-nav.primary-nav .menu .menu-item ul li.active>a {
		color: var(--color-primary);
	}

	.site-nav.horizontal>.menu>.menu-item-has-children>a::after {
		display: none;
	}

	.site-header .mobile-menu .menu li ul {
		padding: 0 0 0 10px;
		margin: 0;
		border-top: 1px solid var(--color-extra04);

	}

	.site-header .mobile-menu .menu li>.sub-menu {
		display: none;
	}

	.site-header .mobile-menu .menu li .sub-mega-menu li .sub-menu {
		display: block;
	}

	.site-header .mobile-menu .menu li .sub-mega-menu li .sub-menu li .sub-menu li {
		padding-left: 0;
	}

	.site-header .mobile-menu .menu li .sub-mega-menu li .sub-menu li .sub-menu li a {
		color: var(--color-dark);
	}

	.site-header .mobile-menu .menu li .sub-mega-menu li.image-sub-menu .caret-arrow {
		display: none;
	}

	.site-header .mobile-menu .menu li .sub-mega-menu li .sub-menu li .sub-menu {
		display: none;
	}

	.site-header .mobile-menu .menu li .sub-mega-menu li .sub-menu li .sub-menu.sub-menu-wrap {
		display: block;
		border-top: 0;
	}

	.site-header .mobile-menu .menu li .sub-mega-menu li .sub-menu li .sub-menu.sub-menu-wrap li a {
		padding: 10px 15px;
	}

	.site-header .mobile-menu .menu li ul li ul {
		padding-left: 10px;
	}

	.site-header .mobile-menu .menu li ul li:last-child {
		border-bottom: 0;
	}

	.site-header .mobile-menu .menu li ul li a {
		padding: 10px 25px;
		display: block;
		height: auto;
	}

	.site-header .mobile-menu .menu li ul.sub-mega-menu>li>.sub-menu>li>a {
		color: var(--color-dark);
	}

	.site-header .mobile-menu .menu li .sub-mega-menu .image-sub-menu ul {
		margin: 13px 0;
		padding: 0;
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.sub-mega-menu .image-sub-menu ul li {
		width: calc(50% - 10px);
	}

	.mobile-menu-wrap {
		height: calc(100vh - 56px);
		overflow-y: auto;
	}

	.menu-social {
		padding: 20px 25px;
	}

	.menu-social .btn {
		width: 100%;
		display: block;
		margin-bottom: 25px;
	}

	.menu-social p {
		font-size: 16px;
		margin-bottom: 10px;
	}

	.menu-social .social-icon {
		display: flex;
		align-items: center;
		column-gap: 15px;
	}

	.menu-social .social-icon li a {
		font-size: 18px;
	}

	/*===========================
	Home two style
	=============================*/
	.section-two {
		padding: 20px 0;
		position: relative;
	}

	.section-full-btn {
		margin-top: 10px;
	}

	/*01. Header style 2 CSS*/
	.header-type2 .header-navbar {
		display: block;
	}

	.header-type2 .header-navbar .left .primary-nav {
		display: none;
	}

	.header-type2 .site-brand {
		margin: 10px 0;
	}

	/*02. Hero banner section style 2 CSS*/
	.hero-slider-section .hero-banner-content {
		padding: 50px 0;
		text-align: center;
	}

	.hero-slider-section .hero-banner-content h1 {
		font-size: 35px;
		line-height: 40px;
	}

	.btn-style-2 {
		padding: 15px 20px;
		font-size: var(--font-size-b2);
	}

	.hero-slider-section .hero-banner-img {
		max-width: 100%;
		margin: 0;
	}

	/*03. Best Sellers section CSS*/
	.bestsellers-products-section .entry-header-right .menu li {
		margin-left: 10px;
	}

	.bestsellers-products-section .entry-header-right .menu li:first-child {
		margin-left: 0;
	}

	.bestsellers-products-section .entry-header-right .menu li a {
		font-size: var(--font-size-b3);
	}

	.product-style-3 {
		margin-bottom: 20px;
	}

	.new-arrival-slider .product-style-3 {
		margin-bottom: 0px;
	}

	/*04. image with text section CSS*/
	.image-with-text-section .image-with-text-des {
		padding: 30px 15px;
	}

	/*05. Testimonial section CSS*/
	.testimonial-content h2 {
		font-size: var(--h3);
		margin-bottom: 15px;
	}

	.testimonial-content p {
		font-size: var(--font-size-b2);
		line-height: 28px;
		margin-bottom: 20px;
	}

	.testimonial-slider:after {
		content: '';
		background: var(--color-extra03);
		width: 500%;
		position: absolute;
		top: 0;
		right: 0;
		margin-right: -500%;
		height: 100%;
	}

	.testimonial-slider .mySwiper2 {
		padding: 30px 0px;
	}

	/*06. Icon box section style 2 CSS*/
	.icon-box-section.style-2 .icon-box {
		display: block;
		text-align: center;
	}

	.icon-box-section.style-2 .icon-box .iconbox-icon {
		margin: 0 auto 15px;
		height: 60px;
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.icon-box-section.style-2 .icon-box .iconbox-icon img {
		max-height: 100%;
	}

	.icon-box-section.style-2 .icon-box .iconbox-detail h6 {
		font-size: var(--font-size-b2);
	}

	.blog-grid {
		margin-bottom: 20px;
		height: auto;
	}

	/*07. footer style 2 CSS*/
	.footer-style-2 {
		padding: 40px 0 0;
	}

	.footer-style-2 .newsletter-form {
		margin-bottom: 30px;
	}

	.footer-style-2 .newsletter-form .form-control {
		padding: 14px 12px;
	}

	.footer-style-2 .newsletter-form .btn {
		position: static;
		width: 170px;
		padding: 16px;
		margin-top: 20px;
	}

	.footer-style-2 .footer-bottom {
		margin-top: 20px;
		padding: 16px 0;
	}

	.footer-style-2 .social-icon {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	/*===========================
	Home Three style
	=============================*/

	.module-header.style-3 {
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.product-style-4 .product-thumbnail:before {
		padding-top: 100%;
	}

	.entry-header-right {
		margin-top: 10px;
	}

	/*01. Header style 3 CSS*/
	.header-type3 .header-navbar {
		display: block;
		padding: 15px 0;
	}

	.header-type3 .topbar .header-wrapper {
		-webkit-box-pack: end !important;
		-ms-flex-pack: end !important;
		justify-content: end !important;
	}

	.header-type3 .header-navbar .site-nav {
		display: none;
	}

	/*02. Hero grid banner section style 3 CSS */
	.hero-grid-banner-section {
		margin-bottom: 20px;
	}

	.hero-grid-banner-section .hero-banner-content {
		padding: 60px 15px;
	}

	.hero-grid-banner-section .hero-banner-img {
		margin: 0 0 20px;
		max-width: 100%;
	}

	/*03. Popular Categories section style 3 CSS*/
	.popular-categories-section.style-3 .popular-categories-grid {
		grid-template-columns: repeat(2, 1fr);
		justify-content: center;
	}

	.popular-categories-title h6,
	.popular-categories-title h6 a {
		font-size: var(--font-size-b3);
	}

	/*04. Top collection section style 3 CSS*/
	.top-collection-section .banner .banner-image {
		position: static;
	}

	.top-collection-section .banner .banner-content {
		padding: 20px;
	}

	.top-collection-section .banner .banner-content .entry-title {
		font-size: var(--h4);
		line-height: var(--h4-lineHeight);
		margin-bottom: 15px;
	}

	/*05. offer banner section style 3 CSS*/
	.offer-banner-section.style-3 .offer-banner-img {
		position: static;
		max-width: 100%;
	}

	.offer-banner-section.style-3 .offer-banner-content {
		padding: 30px;
		text-align: center;
		position: static;
	}

	.offer-banner-section.style-3 .offer-banner-content h2,
	.offer-banner-section.style-3 .offer-banner-content .entry-subtitle {
		margin-bottom: 10px;
	}

	.offer-banner-section.style-3 .offer-banner-content .btn {
		margin: 0 auto;
	}

	/*06. New arrival section CSS style 3 CSS*/
	.new-arrival-slider .swiper {
		padding-bottom: 50px;
	}

	.new-arrival-slider .swiper-button-prev,
	.new-arrival-slider .swiper-button-next {
		bottom: 10px;
		top: auto;
		margin-bottom: 0;
	}

	.new-arrival-slider .swiper-button-prev {
		left: calc(50% - 45px);
	}

	.new-arrival-slider .swiper-button-next {
		right: calc(50% - 45px);
	}

	.blog-grid-style-2 {
		margin-bottom: 20px;
	}

	/*07. Shop Social section style 3 CSS*/
	.shop-social-section .shop-social-left,
	.get-the-latest-deals {
		padding: 30px 0;
	}

	.shop-social-section .shop-social-left {
		border-right: 0;
		border-bottom: 1px solid var(--color-extra01);
	}

	/*08. Instagram section style 3 CSS*/
	.instagram-section {
		margin-top: 10px;
	}

	/*09. footer style 3 CSS*/
	.footer-style-3 .footer-top {
		padding: 30px 0;
		text-align: center;
	}

	.footer-style-3 .footer-top .site-brand {
		max-width: 100px;
		margin: 0 auto 30px;
	}

	.footer-style-3 .footer-menu .menu li {
		margin: 0 5px;
	}

	.footer-style-3 .footer-menu .menu li a {
		font-size: var(--font-size-b2);
		line-height: var(--line-height-b3);
	}

	.footer-style-3 .footer-cms-menu .menu li a {
		font-size: var(--font-size-b3);
		line-height: var(--line-height-b3);
	}

	.footer-style-3 .footer-cms-menu .menu li {
		padding: 0 10px;
	}

	/*===========================
	Shop page style
	=============================*/
	.shop-page-grid-section {
		padding-bottom: 40px;
	}

	.heading-banner-wrap h1 {
		font-size: var(--h2);
	}

	/*01. filter shop loop style CSS*/
	.filter-shop-loop {
		flex-wrap: wrap;
	}

	.shop-result-count {
		width: 100%;
	}

	.filter-shop-loop .sorting-products {
		margin: 0;
	}

	.product-views-buttons {
		margin-left: auto;
	}

	/*01. Shop sidebar style CSS*/
	.sidebar-inner {
		max-width: 300px;
		background: #fff;
		padding: 20px;
		height: 100vh;
		overflow-y: auto;
		position: relative;
	}

	.sidebar {
		position: fixed;
		top: 0;
		left: -100%;
		background: #0000007a;
		z-index: 999;
		width: 100%;
		transition: all 0.3s ease;
	}

	.sidebar.open {
		left: 0;
	}

	.filter-close {
		position: absolute;
		top: 20px;
		right: 20px;
		padding: 5px;
		font-size: 18px;
		line-height: 0;
	}

	.product-style-3 .product-thumbnail:before {
		padding-top: 100%;
	}

	/*02. Product Quick view Popup CSS*/
	.product-quick-body {
		display: block;
	}

	.product-quick-body .quick-view-left {
		display: none;
	}

	.product-quick-body .quick-view-content {
		padding: 60px 25px;
		width: 100%;
	}

	.product-quick-body .product-info-style-2 .variation-quantity {
		gap: 0px;
	}

	.product-quick-body .single-add-to-cart .btn {
		padding: 15px 20px;
		font-size: var(--font-size-b2);
	}

	.product-quick-body .variation-add-to-cart {
		flex-wrap: nowrap;
	}

	/*===========================
	Wishlist page style
	=============================*/

	/*01. Wishlist grid style CSS*/
	.wishlist-grid-section .product-list-grid .product-thumbnail {
		-ms-flex: 0 0 225px;
		flex: 0 0 225px;
		max-width: 225px;
	}

	.wishlist-grid-section .product-list-grid .product-thumbnail:before {
		padding-top: 100%;
	}

	.wishlist-bottom-btn {
		padding: 20px 0;
		margin-top: 15px;
	}

	/*===========================
		About us page style
	=============================*/
	/*01. About content section style CSS*/
	.about-content {
		margin-top: 0;
		padding-top: 0;
	}

	.about-content-wrap h2 {
		font-size: var(--h3);
	}

	.about-service-list {
		padding: 0;
		margin: 30px 0;
	}

	.about-service-list .about-service-info h5 {
		font-size: var(--h6);
	}

	/*02. About video section style CSS*/
	.about-video-section {
		padding-top: 0;
	}

	.full-video {
		height: 250px;
	}

	.full-video>img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.full-video .video-play-icon {
		max-width: 80px;
	}


	/*===========================
		Blog page style
	=============================*/

	/*01. Blog sidebar style CSS*/
	.blog-sidebar {
		display: block;
		margin-top: 30px;
	}

	.blog-sidebar .sidebar-inner {
		max-width: 100%;
		margin: 0;
	}

	.blog-sidebar .widget {
		margin-bottom: 30px;
	}

	.pagination {
		gap: 5px;
	}

	/*===========================
		My Account pagee style
	=============================*/

	/*01. Account form style CSS*/
	.my-account-page {
		padding: 30px 0 55px;
	}

	.account-form .module-header h1 {
		font-size: var(--h2);
		line-height: var(--h6-lineHeight);
	}

	.account-form .module-header {
		margin-bottom: 35px;
	}

	.account-form .module-header p {
		font-size: var(--font-size-b2);
	}

	.form-group-lable a,
	.form-group label {
		margin-bottom: 10px;
	}

	.form-control {
		height: 50px !important;
	}

	.form-group {
		margin-bottom: 25px;
	}


	/*===========================
		CMS page style
	=============================*/

	/*01. CMS content style CSS*/
	.cms-heading .heading-banner-wrap h1 {
		font-size: 30px;
	}

	/*===========================
		404 page style
	=============================*/

	/*01. Not found content style CSS*/
	.not-found-content {
		padding-bottom: 20px;
	}

	.not-found-content img {
		margin-bottom: 25px;
		max-width: 60px;
	}

	.not-found-content h2 {
		font-size: var(--h3);
	}

	.not-found-content p {
		margin-bottom: 25px;
	}

	/*===========================
		Contact page style
	=============================*/
	/*01. Contact Information style CSS*/
	.contact-information-box {
		padding: 25px 20px;
	}

	.contact-information-box h4 {
		font-size: var(--h5);
	}

	.contact-information-box .icon {
		width: 60px;
		height: 60px;
	}

	.contact-information-box .icon img {
		max-width: 30px;
	}

	.contact-us-page-section .module-header h2 {
		font-size: var(--h3);
		line-height: var(--h3-lineHeight);
	}

	/*02. Contact form style CSS*/
	.contact-form {
		padding: 30px 20px;
	}

	/*===========================
		Blog single page style
	=============================*/
	/*01. Blog posts style CSS*/
	.blog-entry-wrapper .entry-meta {
		font-size: var(--font-size-b4);
	}

	.blog-entry-wrapper .entry-meta .entry-date,
	.blog-entry-wrapper .entry-meta .entry-comments {
		padding-left: 15px;
		margin-left: 15px;
	}

	blockquote {
		padding: 20px;
		margin-top: 2rem;
		margin-bottom: 2rem;
	}

	.post-article blockquote p {
		font-size: var(--font-size-b2);
	}

	blockquote img {
		margin-right: 20px;
	}

	.post-article .blog-gallery-img {
		margin-bottom: 20px;
		height: auto;
	}

	.post-footer-tag {
		row-gap: 10px;
	}

	.post-article .entry-title {
		font-size: var(--h3);
	}

	/*02. Blog posts comments style CSS*/
	.comment-list li .comment-body {
		display: block;
	}

	.comment-list .comment-user-info {
		max-width: 100%;
		margin: 0 0 15px;
	}

	.post-comments-form .entry-title,
	.related-blogs .entry-title,
	.post-comments .entry-title {
		font-size: var(--title);
	}

	/*===========================
		Cart page style
	=============================*/
	/*01. Cart product table style CSS*/
	.cart-footer {
		display: block;
		border: 0;
		padding-top: 0;
	}

	.coupon-code-form {
		max-width: 100%;
	}

	.update-cart-btn {
		text-align: right;
		margin-top: 10px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: end;
	}

	/*02. Cart sidebar style CSS*/
	.cart-sidebar {
		max-width: 100%;
		margin: 15px 0 0;
	}

	.cart-product-table tbody tr {
		border: 1px solid #EFEEF3;
		border-bottom: 15px solid #fff;
		display: block;
	}

	.cart-product-table .cart-product .cart-thumb {
		display: none;
	}

	.cart-product-table thead {
		display: none;
	}

	.table tr td.product-name {
		padding-left: 10px;
		padding-right: 10px;
	}

	.cart-product-table tbody tr td {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		border-bottom: 1px solid #EFEEF3;
		font-size: var(--font-size-b3);
	}

	.cart-product-table tbody tr:nth-child(even) {
		background: #FBFBFB;
	}

	.cart-product-table tbody tr td:before {
		padding: 0;
		font-size: var(--font-size-b3);
		text-transform: uppercase;
		font-weight: var(--semi-bold);
		color: var(--color-dark);
		margin-right: 15px;
	}

	.cart-product-table tbody tr td.product-name:before {
		content: 'Product';
	}

	.cart-product-table tbody tr td.price:before {
		content: 'Price';
	}

	.cart-product-table tbody tr td.quantity-td:before {
		content: 'Quantity';
	}

	.cart-product-table tbody tr td.total-price:before {
		content: 'TOTAL';
	}

	.cart-product-table tbody tr td.remove:before {
		content: '';
	}

	.cart-product .cart-product-title {
		font-size: var(--font-size-b2);
		max-width: inherit;
		text-align: right;
	}

	.cart-product-table .quantity {
		margin: 0;
	}

	/*===========================
		Empty page style
	=============================*/
	/*01. Empty Cart content style CSS*/
	.empty-cart-content h3 {
		margin-bottom: 25px;
		font-size: var(--h4);
	}

	.empty-cart-content h3:after {
		margin-top: 20px;
	}

	.empty-cart-content p {
		margin: 0 auto 30px;
		font-size: var(--font-size-b2);
	}

	/*===========================
		My Account page
	=============================*/
	/*01. My Account admin style CSS*/
	.account-admin .vcard {
		width: 80px;
		height: 80px;
		margin-bottom: 15px;
	}

	.account-admin {
		margin-bottom: 35px;
	}

	.account-left-menu ul li a {
		padding: 12px 15px;
	}

	/*02. My Account left menu style CSS*/
	.account-left-menu {
		max-width: 100%;
		margin-bottom: 25px;
	}

	/*03. My Account Dashboard style CSS*/

	.account-right-wrap p {
		font-size: var(--font-size-b2);
	}

	.account-address-form .account-title {
		padding-bottom: 15px;
		margin-bottom: 20px;
	}

	/*04. Account order detail style CSS*/
	.order-detail-table tr th,
	.order-detail-table tr td {
		padding: 10px 15px;
	}

	/*===========================
		Site map page
	=============================*/
	/*01. Site map list style CSS*/
	.site-map-list {
		padding: 0 10px;
	}

	.site-map-list ul li {
		font-size: var(--font-size-b2);
	}

	/*===========================
		FAQ page
	=============================*/
	/*01. accordion style CSS*/
	.faq-list h3 {
		margin-bottom: 25px;
		font-size: var(--h5);
	}

	.accordion .accordion-list .accordion-title {
		font-size: var(--font-size-b2);
		padding: 15px 15px 15px 0;
	}

	/*===========================
		Thank you
	=============================*/
	/*01. Thank you order style CSS*/
	.thank-you-msg {
		padding: 10px 15px;
	}

	.thank-you-msg p {
		font-size: var(--font-size-b2);
	}

	.thank-you-order {
		padding: 30px 0;
	}

	.order-payment-method {
		margin-bottom: 20px;
	}

	.order-payment-method h6 {
		font-size: var(--font-size-b2);
		margin-bottom: 10px;
	}

	.order-payment-method h5 {
		font-size: var(--font-size-b2);
	}

	.payment-order-table .table tr td,
	.payment-order-table .table tr th {
		padding: 10px 15px;
	}

	.payment-order-table .table .cart-product {
		display: block;
	}

	.payment-order-table .table .cart-product .cart-thumb {
		margin: 0 0 15px;
	}

	.payment-order-table .table tr td p,
	.payment-order-table .table tr td span,
	.payment-order-table .cart-product .cart-product-title p,
	.payment-order-table .cart-product .cart-product-title h6 {
		font-size: var(--font-size-b2);

	}

	.payment-order-table .table tfoot tr td {
		font-size: var(--font-size-b2);
		font-weight: var(--semi-bold);
	}

	/*===========================
		Product detail style 1 page
	=============================*/
	/*01. Product gallery column style 1 CSS*/
	.product-gallery-column {
		margin-bottom: 30px;
	}

	.product-gallery-column {
		padding: 0;
	}

	.product-gallery-vertical {
		padding: 0;
	}

	.product-gallery-vertical .thumbs-gallery {
		display: none;
	}

	.product-gallery-column .swiper-button-next,
	.product-gallery-column .swiper-button-prev {
		display: flex;
	}

	/*02. Product tabs style 1 CSS*/
	.wc-tabs-wrapper {
		padding: 40px 0 30px;
	}

	.wc-tabs-wrapper .wc-tabs {
		gap: 15px;
		overflow-x: auto;
	}

	.wc-tabs-wrapper .wc-tabs li {
		font-size: var(--font-size-b2);
		padding-bottom: 10px;
		white-space: nowrap;
	}

	.wc-tabs-wrapper .tabs-entry-content {
		padding-top: 20px;
	}

	/*===========================
		Product detail style 2 page
	=============================*/
	/*01. Product info style 2 CSS*/
	.product-info-style-2 .variation-quantity {
		gap: 0;
		padding: 0 5px 0 10px;
	}

	.product-info-style-2 .variation-add-to-cart {
		gap: 10px;
	}

	.product-info-style-2 .variation-quantity .quantity {
		width: 100px;
	}

	.product-info-style-2 .variation-quantity .quantity .quantity-button {
		width: 30px;
	}

	.product-info-style-2 .single-add-to-cart .btn {
		padding: 15px 20px;
		font-size: var(--font-size-b3);
	}

	/*03. Product tabs style 2 CSS*/
	.wc-tabs-vertical {
		display: block;
	}

	.wc-tabs-vertical .wc-tabs {
		overflow: inherit;
		max-width: 100%;
		margin-bottom: 20px;
	}

	.wc-tabs-vertical .wc-tabs li {
		padding: 14px 14px;
	}

	.wc-tabs-vertical .vertical-tabs-content {
		padding-left: 0px;
	}

	.client-review .comment-item-wrap .comment-item .comment-author-wrap .comment-author-info .reply-btn {
		top: 0;
	}

	/*===========================
		Product detail style 3 page
	=============================*/
	/*01. Product info style 3 CSS*/
	.product-info-product-list {
		overflow-x: auto;
	}

	/*===========================
		Compare page style
	=============================*/
	/*01. Compare Product list CSS*/
	.compare-product-list .table .mobile-inline {
		display: block;
		width: 100%;
	}

	/*===========================
		Presantation page style
	=============================*/
	/*02. Presantation banner section CSS*/
	.Presantation-banner-section {
		padding: 20px 0 40px;
	}

	.Presantation-banner-section .hero-banner-content {
		padding: 0;
		text-align: center;
		margin-bottom: 30px;
	}

	.Presantation-banner-section .hero-banner-content h1 span {
		margin: 0 auto;
	}

	.Presantation-banner-section .hero-banner-content p {
		margin-bottom: 20px;
	}

	.Presantation-banner-section .hero-banner-content h1 {
		font-size: var(--h3);
		line-height: var(--h3-lineHeight);
		margin-bottom: 25px;
	}

	.Presantation-banner-section .hero-banner-img {
		margin: 0 auto;
		max-width: 90%;
	}

	.Presantation-banner-section .hero-banner-img .icon {
		width: 50px;
		height: 50px;
	}

	.Presantation-banner-section .hero-banner-img .icon img {
		max-width: 60%;
	}

	.Presantation-banner-section .hero-banner-img .icon-html {
		top: -25px;
	}

	.Presantation-banner-section .hero-banner-img .icon-figma {
		left: -20px;
	}

	/*03. features service section CSS*/
	.features-service-section {
		padding: 25px 0 10px;
	}

	.features-service-list ul {
		flex-wrap: wrap;
		-webkit-box-pack: flex-start;
		-ms-flex-pack: flex-start;
		justify-content: flex-start;
		gap: 0;
	}

	.features-service-list ul li {
		width: 50%;
		margin-bottom: 10px;
	}

	/*05. Stunning home pages section CSS*/
	.Stunning-home-pages-section .stunning-features-box {
		margin-bottom: 20px;
	}

	.presantation-heading {
		margin-bottom: 30px;
	}

	.beautiful-inner-pages-section,
	.Stunning-home-pages-section,
	.features-clare-section {
		padding: 30px 0;
	}

	/*06. Beautiful Pre-built Inner Pages section CSS*/
	.inner-page-grid .stunning-features-box {
		max-width: 50%;
	}

	/*07. Professional store section CSS*/
	.professional-store-section {
		padding: 0;
		background: #F3F7F8;
	}

	.professional-store-section .professional-store-box {
		padding: 30px 10px;
	}

	.professional-store-box .module-header h2 {
		margin-bottom: 20px;
		font-size: var(--h3);
		line-height: var(--h3-lineHeight);
	}

	.stunning-features-box.small-features {
		max-width: 180px;
		margin: -120px -50px 0 auto;
	}

	/*08. Professional Footer style 4 CSS*/
	.footer-style-4 .box-item.box-item-1 {
		top: 15px;
		left: 3vw;
	}

	.footer-style-4 .footer-content h2 {
		margin-bottom: 20px;
		font-size: var(--h3);
		line-height: var(--h3-lineHeight);
	}

	.footer-style-4 .button-group {
		gap: 15px;
	}

	.footer-style-4 .button-group .btn {
		padding: 12px 10px;
	}

	.footer-style-4 .box-item {
		font-size: var(--font-size-b3);
	}

	.footer-style-4 .box-item.box-item-4 {
		max-width: 270px;
		left: 5vw;
	}

	.footer-style-4 .box-item.box-item-2 {
		bottom: auto;
		right: 3vw;
		top: 16px;
	}

	.footer-style-4 {
		padding: 140px 0 180px;
	}



}

@media only screen and (max-width: 640px) {
	.topbar .site-nav .menu-top-right .sub-menu {
		right: 0;
	}

	/*Product style*/
	.feature-products-grid {
		grid-template-columns: repeat(1, 1fr);
	}

	/*===========================
	Shop page style
	=============================*/

	.heading-banner-img img {
		margin-right: -60px;
	}

	.heading-banner-wrap {
		overflow: hidden;
	}



	/*===========================
	Shop list page style
	=============================*/
	/*01. product list style CSS*/
	.product-list-grid {
		display: block;
	}

	.product-list-grid .product-thumbnail {
		margin-right: 0;
		-webkit-box-flex: 0;
		-ms-flex: 0 0 1;
		flex: 0 0 1;
		max-width: 100%;
	}

	.product-list-grid .product-thumbnail:before {
		padding-top: 65%;
	}

	/*===========================
	Wishlist page style
	=============================*/

	/*01. Wishlist grid style CSS*/
	.wishlist-grid-section .product-list-grid .product-thumbnail {
		-ms-flex: 0 0 1;
		flex: 0 0 1;
		max-width: 100%;
	}

	.wishlist-grid-section .product-list-grid .product-thumbnail:before {
		padding-top: 65%;
	}

	.wishlist-bottom-btn {
		gap: 15px;
	}

	.remove-link {
		font-size: var(--font-size-b3);
	}

	.remove-link span {
		font-size: var(--h5);
	}

	.product-list-grid .product-close-icon {
		width: 22px;
		height: 22px;
		top: 5px;
		right: 5px;
		font-size: var(--font-size-b3);
	}

	/*===========================
		Contact page style
	=============================*/
	/*01. Contact Information style CSS*/
	.contact-information {
		gap: 15px;
	}

	.contact-information-box {
		padding: 20px 15px;
	}

	.contact-information-box h4 {
		font-size: var(--font-size-b3);
		line-height: var(--line-height-b3);
	}

	.contact-information-box .icon {
		width: 60px;
		height: 60px;
		margin-bottom: 10px;
	}

	.contact-information-box .icon img {
		max-width: 30px;
	}

	.contact-information-box p {
		font-size: var(--font-size-b3);
	}

	.information-full-box .contact-information-box {
		gap: 10px;
	}

	/*02. Contact form style CSS*/
	.contact-form {
		padding: 30px 20px;
	}

	.contact-map iframe {
		height: 250px;
		display: block;
	}

	/*===========================
		Product detail style 1 page
	=============================*/

	h2 {
		font-size: var(--h3);
		line-height: var(--h3-lineHeight);
	}

	/*01. Product info style 1 CSS*/
	.product-info .product_title {
		font-size: var(--h3);
		line-height: var(--h3-lineHeight);
	}

	.single-add-to-cart .btn-outline-dark {
		padding: 15px 20px;
		font-size: var(--font-size-b2);
	}

	.product-info .people-viewing,
	.product-info .price {
		margin-bottom: 15px;
	}

	.color-variations ul.checkbox-color-list li .checkcontainer {
		width: 20px;
		height: 20px;
	}

	.color-variations {
		margin-bottom: 25px;
	}

	.product-extra-buttons {
		gap: 10px;
		flex-wrap: wrap;
	}

	/*01. Product Quick view Popup CSS*/
	.product-quick-body .quick-view-content {
		padding: 60px 15px 20px;
	}

	.product-quick-popup .product-buttons-icon {
		right: 10px;
		top: 10px;
	}

	.product-quick-body .variation-add-to-cart {
		flex-wrap: wrap;
	}

	.product-quick-body .product-extra-buttons {
		flex-wrap: wrap;
	}

	.product-quick-body .product-info-style-2 .variation-quantity {
		gap: 15px;
	}

	.product-quick-body .product-info-style-2 .variation-quantity .quantity {
		width: 150px;
	}


}

/* Mobile Screen */
@media only screen and (max-width: 450px) {
	.topbar .site-nav .menu-top-right .sub-menu {
		right: 0;
	}

	.product-countdown ul {
		gap: 20px;
	}

	.product-countdown ul li:before {
		left: -10px;
	}

	.product-info-style-2 .variations_form .label-title {
		font-size: 14px;
	}

	.variation-add-to-cart,
	.product-info-style-2 .variation-add-to-cart {
		flex-wrap: wrap;
	}
}

/* Mobile Screen */
@media only screen and (max-width: 380px) {
	.site-header.header-type1.sticky {
	/*	top: -73px;*/
	}

	.site-copyright {
		display: block;
		text-align: center;
	}

}