/* =====================================
Template Name: Diazelo Fashion
Author Name: Webby Crown
Author URI: 
Description: Diazelo Fashion HTML5 Template.
Version:1.0
========================================*/
/*======================================
[ CSS Table of contents ]
|
|___ Home one style
| |
| |___ 1440 Laptop Screen
| |___ 01. Header style 1 CSS
| |___ 02. Hero banner section CSS
| |___ 03. instagram post section CSS
| |___ 04. collection full banner image CSS
| |
| |___ 1199 Tablet Screen
| |___ 01. Hero banner section CSS
| |___ 02. grid product section CSS
| |___ 03. instagram post section CSS
| |___ 04. collection full banner image CSS
| |
| |___ 1024 Tablet Screen
| |___ 01. collection slider section CSS
| |___ 02. grid product section CSS
| |___ 03. instagram post section CSS
| |
| |___ 992 min Tablet Screen
| |___ mega menu style
| |
| |___ 991 Tablet Screen
| |___ 01. Header style 1 CSS
| |___ 02. collection slider section CSS
| |___ 03. grid product section CSS
| |___ 04. instagram post section CSS
| |___ 05. collection full banner image CSS
| |
| |___ 767 Mobile Screen
| |___ 01. Header style 1 CSS
| |___ 02. Hero banner section CSS
| |___ 03. collection slider section CSS
| |___ 04. instagram post section CSS
| |___ 05. collection full banner image CSS
| |___ 06. footer style 1 CSS
| |___ 07. Mini Cart Dropdown
| |___ 08. Mobile menu style CSS
| |
| |___ 575 Mobile Screen
| |___ 01. grid product section CSS
| |___ 02. collection full banner image CSS
| |
| |___ 375 Mobile Screen
| |___ 01. grid product section CSS
| |
| |
|___ Home two style
| |
| |___ 991 Tablet Screen
| |___ 01. grid banner product collection style 2 section CSS
| |
| |___ 767 Mobile Screen
| |___ 01. grid banner product collection style 2 section CSS
| |
| |
|___ shop one style
| |
| |___ 767 Mobile Screen
| |___ 01. filter style 1 CSS
| |___ 01. shop grid product section CSS
| |
| |
|___ shop details page one style
| |
| |___ 1440 Laptop Screen
| |___ 01. single product section CSS
| |
| |___ 1199 Tablet Screen
| |___ 01. single product section CSS
| |___ 02. grid product slider section CSS 
| |___ 03. related-products-section CSS
| |
| |___ 1024 Tablet Screen
| |___ 01. grid product slider section CSS 
| |___ 02. related-products-section CSS
| |
| |___ 991 Tablet Screen
| |___ 01. single product section CSS
| |___ 02. grid product slider section CSS 
| |___ 03. related-products-section CSS
| |
| |___ 767 Mobile Screen
| |___ 01. single product section CSS
| |___ 02. grid product slider section CSS 
| |___ 03. related-products-section CSS
| |
| |___ 575 Mobile Screen
| |___ 01. single product section CSS
| |
| |
|___ contect page one style
| |
| |___ 1440 Laptop Screen
| |___ 01. single product section CSS
| |
| |___ 1199 Tablet Screen
| |___ 01. single product section CSS
| |___ 02. grid product slider section CSS 
| |___ 03. related-products-section CSS
| |
| |___ 1024 Tablet Screen
| |___ 01. grid product slider section CSS 
| |___ 02. related-products-section CSS
| |
| |___ 991 Tablet Screen
| |___ 01. single product section CSS
| |___ 02. grid product slider section CSS 
| |___ 03. related-products-section CSS
| |
| |___ 767 Mobile Screen
| |___ 01. single product section CSS
| |___ 02. grid product slider section CSS 
| |___ 03. related-products-section CSS
| |
| |
|___ cart page section style
| |
| |___ 1440 Laptop Screen
| |___ 01. cart page section CSS
| |
| |___ 1199 Tablet Screen
| |___ 01. cart page section CSS
| |
| |___ 1024 Tablet Screen
| |___ 01. cart page section CSS
| |
| |___ 767 Mobile Screen
| |___ 01. cart page section CSS
| |
| |___ 375 Mobile Screen
| |___ 01. cart page section CSS
| |
| |
|___ checkout page section style
| |
| |___ 1440 Laptop Screen
| |___ 01. checkout page section CSS
| |
| |___ 1024 Tablet Screen
| |___ 01. account address form style CSS
| |___ 02. Checkout Order summary style CSS
| |
| |___ 991 Tablet Screen
| |___ 01. Checkout Order summary style CSS
| |
| |___ 767 Mobile Screen
| |___ 01. checkout page style CSS
| |___ 02. Checkout Order summary style CSS
| |
|___ intro page section style
| |
| |___ 1199 Tablet Screen
| |___ 01. intro page title section style CSS
| |___ 02. intro page about section style CSS
| |
| |___ 1024 Tablet Screen
| |___ 01. intro page title section style CSS
| |___ 02. intro page about section style CSS
| |
| |___ 991 Tablet Screen
| |___ 01. intro page slider section style CSS
| |
| |___ 767 Mobile Screen
| |___ 01. intro page title section style CSS
| |___ 02. intro page slider section style CSS
| |___ 03. intro page about section style CSS
| |___ 04. intro page themes demo section style CSS
| |
| |___ 575 Mobile Screen
| |___ 01. intro page about section style CSS
| |___ 02. intro page themes demo section style CSS
| |


========================================*/

/* 1440 Laptop Screen */
@media only screen and (max-width: 1440px) {
	/*01. Header style 1 CSS*/
	.header-navbar{
		padding: 20px 0;
	}

	/*02. Hero banner section CSS*/
	.hero-banner-section{
		min-height: 770px;
	}

	/*03. instagram post section CSS*/
	.instagram-post-section{
		padding-top: 100px;
	}

	/*04. collection full banner image CSS*/
	.collection-full-banner{
		padding: 150px 0 85px;
	}

	/*===========================
	shop details page one style
	=============================*/

	/*01. single product section CSS*/

	.single-product-content-wrap{
		padding: 42px 55px 30px;
	}

	/*===========================
	contect page one style
	=============================*/
	
	/*01. sem leyout col section CSS*/

	.sem-leyout-col-section{
		padding: 80px 0;
	}

	/*===========================
	cart page section style
	=============================*/
	
	/*01. cart page section CSS*/

	.cart-page-section {
		padding: 145px 0 80px;
	}
	.grid-product-filter-wrap{
		padding-top: 90px;
	}

	/*===========================
	checkout page section style
	=============================*/

	/*01. checkout page section CSS*/

	.checkout-page {
		padding-top: 86px;
	}

}

/* 1199 Tablet Screen */
@media only screen and (max-width: 1199px) {
	h1 {
		font-size: 78px !important;
	}
	h2 {
		font-size: 52px !important;
	}
	.site-header .site-nav.primary-nav .menu>.menu-item {
		margin-left: 1rem;
	}
	/*01. Hero banner section CSS*/
	.hero-banner-section{
		min-height: 550px;
	}
	.hero-banner-content h1 span{
		font-size: 35px;
	}

	/*02. grid product section CSS*/
	.grid-product-section{
		padding-top: 100px;
	}
	.grid-product-title h2{
		margin-bottom: 55px;
	}

	/*03. instagram post section CSS*/
	.instagram-post-section{
		padding-top: 80px;
	}

	/*04. collection full banner image CSS*/
	.collection-full-banner{
		padding: 130px 0 75px;
	}

	/*===========================
	shop details page one style
	=============================*/

	/*01. single product section CSS*/

	.single-product-content-wrap {
		padding: 42px 45px 30px;
	}

	/*02. grid product slider section CSS*/

	.grid-product-slider-section{
		padding: 85px 0;
	}

	/*03. related-products-section CSS*/

	.related-products-section{
		padding: 0 0 2px;
	}


	/*===========================
	cart page section style
	=============================*/
	
	/*01. cart page section CSS*/

	.cart-page-section {
		padding: 130px 0 70px;
	}
	.cart-page-title h2{
		margin-bottom: 55px;
	}

	/*===========================
	intro page section style
	=============================*/

	/*01. intro page title section style CSS*/

	.intro-page-title-section {
		padding-top: 160px;
	}

	/*02. intro page about section style CSS*/

	.intro-page-about-section{
		padding: 100px 0 110px;
	}
	.intro-page-content-wrap{
		grid-template-columns: repeat(2, 1fr);
	}



}

/* Tablet Screen */
@media only screen and (max-width: 1024px) {
	/*01. collection slider section CSS*/
	.collection-slider-section{
		padding: 65px 0 45px;
	}

	/*02. grid product section CSS*/
	.grid-product-section{
		padding-top: 84px;
	}
	.grid-product-title h2{
		margin-bottom: 50px;
	}

	/*03. instagram post section CSS*/
	.instagram-post-section{
		padding-top: 70px;
	}


	/*===========================
	shop details page one style
	=============================*/

	/*01. grid product slider section CSS*/

	.grid-product-slider-section{
		padding: 85px 0;
	}

	/*02. related-products-section CSS*/

	.related-products-section{
		padding: 0 0 2px;
	}


	/*===========================
	contect page one style
	=============================*/
	
	/*01. sem leyout col section CSS*/

	.sem-leyout-col-section{
		padding: 70px 0;
	}

	/*===========================
	cart page section style
	=============================*/
	
	/*01. cart page section CSS*/

	.cart-page-section{
		padding: 130px 0 70px;
	}
	.cart-page-title h2{
		margin-bottom: 40px;
	}


	/*===========================
	checkout page section style
	=============================*/

	/*01. account address form style CSS*/

	.account-address-form-wrap{
		padding: 30px 20px;
	}
	.account-address-links{
		margin-top: 60px;
	}
	.account-address-form-btn .btn {
		padding: 12px 15px;
	}

	/*02. Checkout Order summary style CSS*/

	.order-summary-wrap{
		padding: 30px 20px;
	}
	.order-summary .cart-total-body .cart-list.cart-total strong{
		font-size: var(--h5);
	}


	/*===========================
	intro page section style
	=============================*/

	/*01. intro page title section style CSS*/

	.intro-page-title-section {
		padding-top: 140px;
	}

	/*02. intro page about section style CSS*/

	.intro-page-about-section{
		padding: 100px 0 80px;
	}
	.intro-page-about-title p {
		margin-bottom: 25px;
	}


}

@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;
	}
	.sub-mega-menu{
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: var(--color-white);
		padding: 25px 35px;
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		z-index: 9999;
		border-radius: 0px 0px 4px 4px;
		display: none;
		box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
	}
	.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 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) {
	h1 {
		font-size: 65px !important;
		line-height: var(--h2-lineHeight);
	}
	h2{
		font-size: 43px !important;
	}

	/*01. Header style 1 CSS*/
	.site-header .site-nav.primary-nav .menu>.menu-item {
		margin-left: 0.70rem;
	}
	.site-header .site-nav.primary-nav .menu>.menu-item a {
		font-size: var(--font-size-b4);
	}

	/*02. collection slider section CSS*/
	.collection-slider-section{
		padding: 59px 0 75px;
	}
	.collection-slider-content{
		text-align: center;
		padding: 0 0 50px;
	}
	.collection-slider-content p{
		max-width: 100%;
	}

	/*03. grid product section CSS*/
	.grid-product-wrap {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-product-title h2{
		margin-bottom: 40px;
	}

	/*04. instagram post section CSS*/
	.instagram-post-section{
		padding-top: 60px;
	}

	/*05. collection full banner image CSS*/
	.collection-full-banner{
		padding: 100px 0 65px;
	}

	/*===========================
	Home Two style
	=============================*/

	/*01. grid banner product collection style 2 section CSS*/
	.grid-banner-product-collection-style-2 .grid-banner-product{
		border-left: 1px solid var(--color-white);
		border-right: 1px solid var(--color-white);
	}

	/*===========================
	shop details page one style
	=============================*/

	/*01. single product section CSS*/

	.single-product-content-wrap{
		padding: 20px 20px 30px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		flex-direction: column;
	}
	.single-product-images-wrap{
		padding: 0 0 2px;
	}
	.single-product-content-cart-btn{
		order: 0;
		max-width: 500px;
	}
	.single-product-content-title{
		order: 1;
	}
	.single-product-content-wrap .accordion{
		order: 2;
	}
	.single-product-content-cart-btn .btn {
		margin-bottom: 40px;
	}
	.accordion .accordion-content p{
		font-size: var(--font-size-b2);
	}

	/*02. grid product slider section CSS*/

	.grid-product-slider-section{
		padding: 85px 0;
	}

	/*03. related-products-section CSS*/

	.related-products-section{
		padding: 0 0 2px;
	}


	/*===========================
	contect page one style
	=============================*/
	
	/*01. sem leyout col section CSS*/

	.sem-leyout-col-section{
		padding: 60px 0;
	}
	.sem-leyout-col-section .sem-leyout-title h2{
		margin-bottom: 30px;
	}
	.sem-leyout-content .sem-leyout-content-box p,
	.sem-leyout-content .sem-leyout-content-box h4{
		margin-bottom: 15px;
	}

	/*===========================
	checkout page section style
	=============================*/

	/*01. Checkout Order summary style CSS*/

	.order-summary{
		margin: 0 auto;
	}


	/*===========================
	intro page section style
	=============================*/

	/*01. intro page slider section style CSS*/
	.inner-page-grid .stunning-features-box {
		max-width: 37%;
		min-width: 37%;
	}

}

@media only screen and (min-width: 768px) {
	.mobile-menu{
		display: none;
	}
}

/* 767 Mobile Screen */
@media only screen and (max-width: 767px) {
	.container{
		padding-left: 20px;
		padding-right: 20px;
	}
	h1{
		font-size: var(--h3) !important;
	}
	h2{
		font-size: var(--h3) !important;
	}

	/*01. Header style 1 CSS*/
	.site-header{
		padding-left: 20px;
		padding-right: 20px;
	}
	.site-header .container{
		padding-left: 0;
		padding-right: 0;
	}
	.site-header.header-type1{
		background: var(--color-body);
	}
	.header-navbar {
		padding: 17px 0;
	}
	.header-navbar .center .site-brand a .sticky-logo{
		display: block;
	}
	.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);
	}
	.header-navbar .center .site-brand a .desktop-logo,
	.site-header .search-bar:not(.mobile-menu .search-bar){
		display: none;
	}
	.search-bar{
		padding: 0px 34px 0 15px;
		height: auto;
		border: 0;
		margin: 38px 0 65px;
	}
	.search-bar .form-group input{
		height: 40px;
	}
	.search-bar .form-group button {
		height: 40px;
		width: 40px;
	}

	/*02. Hero banner section CSS*/
	.hero-banner-section{
		min-height: 100vh;
		-webkit-box-align: end;
		-ms-flex-align: end;
		align-items: end;
	}
	.hero-banner-section .hero-banner-img{
		width: 100%;
	}
	.hero-banner-content h1{
		color: var(--color-white);
	}
	.hero-banner-content h1 span{
		font-size: calc(var(--h5) - 1px);
	}

	/*03. collection slider section CSS*/
	.collection-slider-section{
		padding: 59px 0 75px;
	}
	.collection-slider-section .container{
		padding-right: 0;
	}
	.collection-slider-wrap .swiper-pagination{
		width: calc(100% - 32px);
	}
	.collection-slider-content h2 span{
		font-size: calc(var(--h5) - 1px);
	}

	/*04. instagram post section CSS*/
	.instagram-post-section{
		padding: 50px 0 67px;
	}
	.instagram-post-wrap{
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 10px;
	}
	.instagram-post-section h1 span{
		font-size: calc(var(--h5) - 1px);
	}

	/*05. collection full banner image CSS*/
	.collection-full-banner{
		padding: 70px 0 65px;
	}

	/*06. footer style 1 CSS*/
	.footer-style-1{
		padding-top: 68px;
		text-align: center;
	}
	.footer-style-1 .site-brand{
		max-width: 66px;
		padding-bottom: 56px;
		margin: 0 auto;
	}
	.footer-column .widget-title{
		cursor: pointer;
		position: relative;
		display: inline-block;
		padding-right: 20px;
		margin-bottom: 20px;
	}
	.footer-menu .menu{
		display: none;
	}
	.footer-column .widget-title:after{
		content: '';
		position: absolute;
		top: 0px;
		right: 0;
		width: 10px;
		height: 28px;
		background-image: url(../images/arrow.svg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100%;
		transform: rotate(90deg);
		filter: brightness(0);
		transition: 0.3s all ease;
	}
	.footer-column .widget-title.active:after{
		transform: rotate(-90deg);
	}
	/*.footer-column .widget-title:hover{
		color: var(--color-extra06);
	}*/
	.footer-menu .menu li a::before{
		height: 1px;
	}
	.footer-style-1 .footer-bottom{
		padding: 68px 0 60px;
		border-top: 1px solid var(--color-extra06);
	}
	.footer-menu .menu{
		display: none;
	}
	.site-copyright{
		-webkit-box-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

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

	/*08. Mobile menu style CSS*/
	.mobile-menu-btn .toggle-menu img{
		width: 42px;
	}
	.mobile-menu-btn .toggle-menu{
		position: relative;
		width: 42px;
		height: 42px;
		display: block;
	}
	.mobile-menu-btn .toggle-menu::before{
		content: '';
		position: absolute;
		top: 15px;
		left: 0;
		width: 42px;
		height: 1px;
		background: var(--color-black);
		transition: 0.3s all ease;
	}
	.mobile-menu-btn .toggle-menu::after{
		content: '';
		position: absolute;
		top: 25px;
		left: 0;
		width: 42px;
		height: 1px;
		background: var(--color-black);
		transition: 0.3s all ease;
	}
	.mobile-menu-btn .toggle-menu.active::before{
		transform: rotate(45deg);
		top: 20px;
		width: 35px;
		left: 3px;
	}
	.mobile-menu-btn .toggle-menu.active::after{
		transform: rotate(-45deg);
		top: 20px;
		width: 35px;
		left: 3px;
	}
	.mobile-menu {
		position: fixed;
		top: auto;
		left: 0;
		max-width: 100%;
		background: var(--color-body);
		padding: 0;
		height: calc(100% - 78px);
		width: 100%;
		z-index: 9999;
		transition: all 0.3s ease;
		border-top: 2px solid var(--color-white);
		transform: translateY(-500%);
	}
	.mobile-menu.open{
		transform: translateY(0);
	}
	.mobile-menu .site-nav{
		height: calc(100vh - 222px);
	}
	.site-header .mobile-menu .menu {
		height: 100%;
		overflow-y: auto;
		display: block;
		text-align: center;
	}
	.site-header .mobile-menu .menu li{
		display: block;
		margin: 0 !important;
		padding-bottom: 20px;
		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{
		display: inline-block;
		height: auto;
		font-family: var(--font-primary);
		font-size: calc(var(--font-size-b1) + 2px);
		color: var(--color-black);
	}
	.site-header .site-nav.primary-nav .menu>.menu-item>a:before{
		background: var(--color-black);
		height: 1px;
		bottom: -0px;
	}
	.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 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);
	}

	/*===========================
	Home Two style
	=============================*/

	/*01. Header style 2 CSS*/
	.header-type2:not(.sticky-header) .mobile-menu-btn .toggle-menu::before,
	.header-type2:not(.sticky-header) .mobile-menu-btn .toggle-menu::after {
		background: var(--color-white);
	}
	.header-type2:not(.sticky-header) .site-brand a .sticky-logo {
		filter: invert(100%) sepia(91%) saturate(0%) hue-rotate(139deg) brightness(103%) contrast(101%);
	}

	/*01. grid banner product collection style 2 section CSS*/
	.grid-banner-product-collection-style-2 .grid-banner-product a{
		padding: 30px 10px 10px;
	}
	.grid-banner-product-collection-style-2 .grid-banner-product-content h6{
		font-size: calc(var(--font-size-b3) + 0px);
	}
	.grid-banner-product-collection-style-2 .grid-banner-product-content p{
		font-size: calc(var(--font-size-b3) + 0px);
	}
	.grid-banner-product-collection-style-2 .grid-banner-product .grid-banner-product-image{
		height: auto;
	}

	/*===========================
	Home Therr style
	=============================*/

	/*01. Hero banner section CSS*/
	.index-blazer-body .hero-banner-section .hero-banner-img img{
		object-position: top right;
	}


	/*===========================
	shop one style
	=============================*/

	/*01. filter style 1 CSS*/

	.grid-product-filter-wrap{
		padding-top: 84px;
		width: 100%;
	}
	.grid-product-filter-content{
		padding-top: 20px;
		height: calc(100vh - 124px);
		min-height: calc(100vh - 124px);
		overflow-y: auto;
	}
	.grid-product-filter-box{
		flex-direction: column;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
	.grid-product-filter-buttons .btn{
		margin-right: auto;
	}
	.grid-product-filter-content-left{
		flex-wrap: wrap;
	}

	/*02. shop grid product section CSS*/
	/*.grid-product-section.shop-grid-product-section {
		padding-top: 124px;
	}*/


	/*===========================
	shop details page one style
	=============================*/

	/*01. single product section CSS*/

	.single-product-section {
		padding: 80px 0 0;
	}
	.single-product-section .container{
		padding: 0;
	}
	.single-product-section .container .row{
		padding: 0;
		margin: 0;
	}
	.single-product-images-wrap .swiper-wrapper{
		display: flex;
		grid-gap: 0;
	}
	.single-product-images-wrap .swiper-pagination{
		bottom: 30px;
		top: auto;
		height: 1px;
		width: 40%;
		left: 50%;
		transform: translateX(-50%);
	}
	.single-product-images-wrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
		background: var(--color-black);
	}
	.single-product-content-cart-btn .btn {
		margin-bottom: 18px;
	}
	.single-product-content-title{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-top: 50px;
	}
	.single-product-content-wrap .single-product-content-title .single-product-content-incl{
		display: block;
		width: 100%;
		text-align: right;
	}
	.single-product-content-wrap .single-product-content-title h4{
		font-size: var(--h6);
	}
	.single-product-content-wrap .single-product-content-title .single-product-content-price{
		font-size: calc(var(--font-size-b1) + 2px);
		font-weight: var(--regular);
	}
	.single-product-content-number{
		display: none;
	}
	.accordion .accordion-list .accordion-title{
		padding: 22px 0 17px;
	}
	.accordion .accordion-content{
		padding: 0 0 20px;
	}

	/*02. grid product slider section CSS*/

	.grid-product-slider-section{
		padding: 91px 0 70px;
	}
	.grid-product-all-shop-btn{
		position: unset;
		margin-top: 16px;
	}
	.grid-product-all-shop-btn a{
		justify-content: center;
		font-size: calc(var(--font-size-b1) + 2px);
	}
	.grid-product-all-shop-btn span {
		max-width: 25px;
	}

	/*03. related-products-section CSS*/

	.related-products-section{
		padding: 0 0 50px;
	}


	/*===========================
	contect page one style
	=============================*/

	/*01. header mini benner section CSS*/
	.header-mini-benner-section {
		padding-top: 78px;
	}
	
	/*02. sem leyout col section CSS*/

	.sem-leyout-col-section{
		padding: 50px 0;
	}
	.sem-leyout-content .sem-leyout-content-box h4{
		font-size: var(--h6);
	}


	/*===========================
	cart page section style
	=============================*/
	
	/*01. cart page section CSS*/

	.cart-page-section {
		padding: 120px 0 50px;
	}
	.cart-total-body .cart-list{
		padding: 15px 10px;
	}
	.table-responsive .cart-product {
		flex-direction: column;
		align-items: end;
	}
	.table-responsive .cart-product .cart-thumb {
		width: 90px;
		height: 70px;
		position: relative;
		margin: 0 0 10px;
	}
	.table-responsive .table tr td.product-name {
		padding: 15px 10px;
	}
	.table-responsive table tr {
		display: block;
		margin-bottom: 15px;
	}
	.table-responsive table td {
		display: block;
		text-align: right;
	}
	.table-responsive table td::before {
		content: attr(data-label);
		font-size: var(--font-size-b3);
		font-weight: var(--medium);
		font-family: var(--font-primary);
		color: var(--color-black);
		float: left;
		text-transform: uppercase;
	}
	.cart-product-table .quantity-td .quantity {
		margin-right: 0;
	}
	.cart-total-body .cart-list.cart-subtotal span {
		font-size: var(--h6);
	}
	

	/*===========================
	checkout page section style
	=============================*/

	/*01. checkout page style CSS*/

	.checkout-page .container{
		padding: 0;
	}
	.checkout-page .container .row{
		margin: 0;
	}

	/*02. Checkout Order summary style CSS*/

	.checkout-page .summary-product-list .price,
	.order-summary .cart-total-body .cart-list .cart-subtotal strong{
		font-size: var(--font-size-b1);
	}
	.order-summary .cart-total-body .cart-list.cart-total strong{
		font-size: var(--h6);
	}
	.checkout-page .order-summary-wrap{
		padding: 45px 20px;
	}


	/*===========================
	intro page section style
	=============================*/

	/*01. intro page title section style CSS*/

	.intro-page-title-section{
		padding-top: 120px;
	}
	.intro-page-title p{
		margin: 0 auto 30px;
	}

	/*02. intro page slider section style CSS*/
	.inner-page-grid .stunning-features-box {
		max-width: 44%;
		min-width: 44%;
	}

	/*03. intro page about section style CSS*/

	.intro-page-about-section{
		padding: 80px 0 50px;
	}

	/*04. intro page themes demo section style CSS*/

	.intro-page-themes-demo-section{
		padding: 50px 0;
	}
	.intro-page-themes-demo-wrap{
		grid-gap: 40px;
		margin: 40px 0;
	}
	.intro-page-themes-demo-box h5{
		margin: 18px 0 0;
		font-size: var(--h5);
	}
	.intro-page-themes-demo-btn{
		font-size: var(--h5);
	}

	
}

@media only screen and (max-width: 640px) {


}

@media only screen and (max-width: 575px) {
	/*01. grid product section CSS*/ 
	.grid-product-wrap .grid-product-box .grid-product-image{
		height: 250px;
	}

	/*02. collection full banner image CSS*/
	.collection-full-banner{
		padding: 58px 0;
	}
	.collection-full-banner-content img{
		margin-bottom: 9px;
		max-width: 18px;
	}
	.collection-full-banner-content h2 span{
		font-size: var(--font-size-b1);
	}
	.collection-full-banner-content h2{
		font-size: var(--h4) !important;
		line-height: var(--h3-lineHeight);
	}


	/*===========================
	shop details page one style
	=============================*/

	/*01. single product section CSS*/

	.mfp-popup-gallery .custom-add-html{
		position: unset;
		flex-direction: row;
	}
	.mfp-popup-gallery .mfp-close, .mfp-popup-gallery .mfp-share-btn, .mfp-popup-gallery .mfp-wishi-btn{
		margin: 20px 10px 10px 0;
		width: 40px;
		height: 40px;
	}

	/*===========================
	contect page one style
	=============================*/

	/*01. sem leyout col section CSS*/

	.contact-form-box .contact-form-wrap{
		grid-template-columns: repeat(1, 1fr);
		margin-bottom: 20px;
	}
	.contact-form-box .contact-form-col textarea{
		margin-bottom: 20px;
	}

	/*===========================
	intro page section style
	=============================*/

	/*01. intro page about section style CSS*/
	.intro-page-content-wrap{
		grid-template-columns: repeat(1, 1fr);
	}
	.intro-page-content-box h5{
		font-size: var(--h6);
	}

	/*02. intro page themes demo section style CSS*/
	.intro-page-themes-demo-wrap{
		grid-gap: 40px;
		grid-template-columns: repeat(1, 1fr);
	}
	.intro-page-themes-demo-box h5 {
		font-size: var(--h6);
	}
	.intro-page-themes-demo-btn{
		font-size: var(--h6);
	}


}

/* Mobile Screen */
@media only screen and (max-width: 375px) {
	/*01. grid product section CSS*/ 
	.grid-product-wrap {
		grid-template-columns: repeat(1, 1fr);
	}
	/*===========================
	cart page section style
	=============================*/
	
	/*01. cart page section CSS*/

	.wishlist-add-btn .btn {
		max-width: 165px;
	}
}