@charset "utf-8";
/* =====================================
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
| |
| |___ 01. Header style 1 CSS
| |___   + header navbar
| |___   + primary nav
| |___   + dropdown menu
| |___   + Mini Cart Dropdown
| |___   + header button right
| |___   + header search form
| |___ 02. Hero banner section CSS
| |___   + hero banner content
| |___ 03. collection slider section CSS
| |___   + collection slider content
| |___   + collection slider wrap
| |___ 04. grid banner product collection style 1 CSS
| |___ 05. grid product section CSS
| |___   + 
| |___ 06. instagram post section CSS
| |___   + instagram-post-section
| |___ 07. collection full banner section CSS
| |___   + collection full banner image
| |___   + collection full banner content
| |___ 08. footer style 1 CSS
| |
|___ Home Two style
| |
| |___ 01. Header style 2 CSS
| |___ 02. Hero banner section style 2 CSS
| |___ 03. grid banner product collection style 2 section CSS
| |
|___ shop one style
| |
| |___ 01. Header style 3 CSS
| |___ 02. filter style 1 CSS
| |___   + grid product filter wrap
| |___   + grid product filter tab
| |___   + grid product filter content
| |___   + grid product filter buttons
| |___ 03. shop grid product section CSS
| |
|___ shop details page one style
| |
| |___ 01. single product section CSS
| |___   + single product images wrap
| |___   + single-product-content-wrap
| |___ 02. grid product slider section CSS
| |___ 03. related-products-section CSS
| |
|___ contect page one style
| |
| |___ 01. header mini benner section CSS
| |___ 02. contact page section CSS
| |___ 03. sem leyout col section CSS
| |
|___ cart page section style
| |
| |___ 01. Cart product table style CSS
| |
|___ Checkout page section style
| |
| |___ 01. account address form style CSS
| |___ 02. Checkout Order summary style CSS
| |___   + coupon code form
| |___   + order summary
| |
|___ intro page section style
| |
| |___ 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
| |
|___ login screen popup
| |
| |___ 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
| |

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



/**************************************
    Home one style
***************************************/

/*=====================================
    01. Header style 1 CSS
=======================================*/
.site-header.header-type1 {
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}
.site-header,
.site-header.sticky-header{
  transition: 0.5s all ease;
  background: var(--color-body);
}
.site-header.sticky-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}
.header-wrapper{
  width: 100%;
}

/*header navbar*/
.header-navbar{
  padding: 27px 0;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
.header-navbar .header-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.header-navbar .left{
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.header-navbar .center {
  width: 100%;
  text-align: center;
}
.header-navbar .center .site-brand a{
  display: -webkit-box;
  display: -ms-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;
}
.header-navbar .center .site-brand a img{
  transition: 0.5s all ease;
}
.header-navbar .center .site-brand a .sticky-logo,
.sticky-header .header-navbar .center .site-brand a .desktop-logo{
  display: none;
}
.sticky-header .header-navbar .center .site-brand a .sticky-logo{
  display: block;
}
.header-navbar .right{
  width: 100%;
}

/*primary nav*/
.site-nav.horizontal>.menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header .site-nav.primary-nav .menu>.menu-item {
  margin-left: 1.875rem;
}
.site-header .site-nav.primary-nav .menu>.menu-item:first-child {
  margin-left: 0;
}
.site-header .site-nav.primary-nav .menu>.menu-item>a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;  
  font-weight: var(--regular);
  color: currentColor;
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-tertiary);
  color: var(--color-primary);
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b3);
  position: relative;
}
@media only screen and (min-width: 1441px) {
  .site-header .site-nav.primary-nav .menu>.menu-item>a {
    font-size: var(--font-size-b1);
  }
}
.site-header .site-nav.primary-nav .menu>.menu-item>a:before{
  content: '';
  position: absolute;
  bottom: -2px;
  left: auto;
  right: 0;
  width: 0px;
  height: 2px;
  background: var(--color-white);
  transition: 0.3s all ease;
}
.site-header .site-nav.primary-nav .menu>.menu-item>a.active:before,
.site-header .site-nav.primary-nav .menu>.menu-item>a:hover:before{
  width: 100%;
  left: 0;
  right: auto;
}
.site-header.header-type3 .site-nav.primary-nav .menu>.menu-item>a.active:before,
.site-header.header-type3 .site-nav.primary-nav .menu>.menu-item>a:hover:before,
.site-header.header-type1 .site-nav.primary-nav .menu>.menu-item>a.active:before,
.site-header.header-type1 .site-nav.primary-nav .menu>.menu-item>a:hover:before,
.site-header .site-nav.primary-nav .menu>.menu-item>a.active:before,
.site-header.sticky-header .site-nav.primary-nav .menu>.menu-item>a.active:before,
.site-header.sticky-header .site-nav.primary-nav .menu>.menu-item>a:hover:before{
  background: var(--color-black);
}
.site-header .site-nav.primary-nav .menu>.menu-item>a.active:hover,
.site-header .site-nav.primary-nav .menu>.menu-item>a.active,
.site-header.sticky-header .site-nav.primary-nav .menu>.menu-item>a.active,
.site-header.sticky-header .site-nav.primary-nav .menu>.menu-item:hover>a,
.site-header.sticky-header .site-nav.primary-nav .menu>.menu-item>a:hover{
  color: var(--color-black);
}

.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-white);
}
.site-header.header-type3 .site-nav.primary-nav .menu>.menu-item>a.active,
.site-header.header-type3 .site-nav.primary-nav .menu>.menu-item>a:hover,
.site-header.header-type1 .site-nav.primary-nav .menu>.menu-item>a.active,
.site-header.header-type1 .site-nav.primary-nav .menu>.menu-item>a:hover {
  color: var(--color-black);
}
.site-nav.horizontal>.menu>.menu-item-has-children>a::after {
  font-family: themify;
  font-size: 70%;
  content: "\e64b";
  margin-left: 0.625rem;
  text-shadow: 0 0 0;
}
.sub-mega-menu{
  display: none;
}

/*Mini Cart Dropdown*/
/*.site-header.header-type1:not(.sticky-header) .mini-cart-dropdown{
  top: 0;
}*/
.mini-cart-dropdown{
  position: fixed;
  top: 0;
  right: -130%;
  background: var(--color-extra04);
  padding: 20px 10px;
  height: 100%;
  max-width: 399px;
  width: 100%;
  z-index: 101;
  transition: all 0.3s ease;
}
.mini-cart-dropdown.open{
  right: 0;
}
.mini-cart-close{
  position: absolute;
  right: 15px;
  top: 15px;
}
.mini-cart-close a{
  border: 0.5px solid var(--color-border);
  width: 25px;
  height: 25px;
  border-radius: 100%;
  color: var(--color-black);
  font-size: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.mini-cart-close a:hover{
  opacity: 0.5;
}
.minicart-open:before{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  z-index: 100;
}
.mini-cart-dropdown .account-title{
  text-transform: uppercase;
}
.summary-product-list::-webkit-scrollbar { 
  display: none;
}
.summary-product-list{
  height: calc(100vh - 339px);
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.summary-product-list .cart-summary-product:first-child{
  border-top: 0;
}
.summary-product-list .cart-summary-product{
  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;
  padding: 20px 12px;
  border-top: 1px solid var(--color-body);
}
.summary-product-list .cart-summary-product .cart-thumb{
  max-width: 88px;
  min-height: 133px;
  margin-right: 30px;
}
.summary-product-list .cart-summary-product .cart-thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: 82px;
}
.mini-cart-dropdown .cart-product-title{
  flex-grow: 1;
}
.mini-cart-dropdown .cart-product-title p a{
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b2);
  margin-bottom: 3px;
  color: var(--color-black);
}
.mini-cart-dropdown .cart-product-title .remove a{
  color: var(--color-extra01);
  font-size: var(--font-size-b3);
  margin-bottom: 9px;
  display: block;
  opacity: 0.4;
}
.mini-cart-dropdown .cart-product-title .remove a:hover{
  color: var(--color-black);
  opacity: 1;
}
.mini-cart-dropdown .cart-summary-product-quantity{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  flex-wrap: wrap;
}
.quantity{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid var(--color-body);
  max-width: 84px;
  margin: 0 auto;
}
.mini-cart-dropdown .quantity{
  margin: 0;
}
.quantity .quantity-button{
  width: 20px;
  height: 30px;
  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: center;
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  font-size: var(--font-size-b2);
  color: var(--color-black);
}
.quantity .quantity-button:hover{
  background: var(--color-black);
  color: var(--color-white);
}
.quantity .input-text{
  height: 30px;
  padding: 5px;
  vertical-align: middle;
  background: transparent;
  border: 0;
  border-radius: 0;
  width: 100%;
  box-shadow: none;
  font-size: var(--font-size-b4);
  font-weight: var(--regular);
  font-weight: var(--bold);
  color: var(--color-black);
  text-align: center;
}
.quantity .input-text:focus{
  outline: none;
}
.mini-cart-dropdown .cart-product-title .order-summary-price{
  color: var(--color-extra05);
  font-size: var(--font-size-b1);
}

.order-summary-total .order-summary-col{
  padding: 16px 12px;
  border-top: 1px solid var(--color-body);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.order-summary-total .order-summary-tex p{
  font-size: var(--font-size-b2);
  color: var(--color-extra05);
}
.order-summary-total .order-summary-tex p.order-summary-total{
  font-size: var(--font-size-b1);
}
.order-summary-total .order-summary-subtotal p{
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-black);
  font-size: var(--font-size-b2);
}
.order-summary-total .order-summary-subtotal p.order-summary-total{
  font-size: calc(var(--h5) + 1px);
  line-height: var(--h3-lineHeight: 1.2);
}
.mini-cart-buttons{
  padding-top: 20px;
}
.mini-cart-buttons .btn{
  width: 100%;
  max-width: 100%;
  padding: 13px;
  text-align: center;
  margin-bottom: 8px;
}
.mini-cart-buttons .btn:last-child{
  margin-bottom: 0;
}

/*header button right*/
.header-button-right{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.header-button-right .header-button {
  margin-left: 0.625rem;
}
.header-button-right .header-button a {
  position: relative;
  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;
  font-size: 1.25rem;
  min-width: 2rem;
  height: 2.25rem;
  color: currentColor;
  text-decoration: none;
}
.header-button-right .header-button a:hover{
  color: var(--color-primary);
  opacity: 0.8;
}
.cart-icon{
  position: relative;
}
.header-button .count{
  position: absolute;
  top: 12px;
  right: -8px;
  width: 12px;
  height: 12px;
  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;
  border-radius: 100%;
  color: var(--color-primary);
  font-weight: 400;
  font-size: 12px;
  line-height: 9px;
}
/*header search form*/
.header-search-form{
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: 48.125rem;
  width: 100%;
  background-color: #F5F3EF;
  max-width: 550px;
  margin: 0 auto;
}
.header-search-form form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}
.header-search-form form input {
  height: 46px;
  background-color: transparent;
  border: 0;
  padding-left: 3.125rem;
  background: #F5F3EF;
}
.header-search-form form .drop-down{
  max-width: 180px;
  width: 100%;
  flex-shrink: 0;
}
.header-search-form form .drop-down .selected{
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../images/select-arrow.svg) no-repeat center right 10px;
}
.search-categories{
  width: 200px;
}
.search-categories .dropdown-item{
  white-space: normal;
  font-size: var(--font-size-b3);
  cursor: pointer;
}
.header-search-form form .drop-down .selected,
.header-search-form form select {
  width: auto;
  height: 46px;
  border: 0;
  background-color: transparent;
  border-left: 1px solid #E0E6D6;
  background-size: 12px;
  margin-left: auto;
  color: #000;
  font-size: 14px;
  line-height: 17px;
  margin-right: 0.75rem;
  padding-left: 1.2rem;
  padding-right: 2rem;
}
.header-search-form button {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  border: 0;
  padding: 0;
  height: 100%;
  width: 50px;
  font-size: 22px;
}
/*=====================================
    End Header style 1 CSS
=======================================*/


/*=====================================
    02. Hero banner section CSS
=======================================*/
.hero-banner-section{
  background: var(--color-body);
  min-height: 770px;
  position: relative;
  padding: 100px 0;
  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: center;
}
.hero-banner-section .hero-banner-img{
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  z-index: 0;
}
.hero-banner-section .hero-banner-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* hero banner content */
.hero-banner-content h1{
  text-transform: uppercase;
  color: var(--color-primary);
  z-index: 1;
  position: relative;
  margin: 0;
  font-size: var(--h1);
}
.hero-banner-content h1 span{
  font-size: var(--h3);
  display: block;
  letter-spacing: 0.5px;
}

/*=====================================
    End Hero banner section CSS
=======================================*/

/*=====================================
    03. collection slider section CSS
=======================================*/

.collection-slider-section{
  padding: 83px 0 54px;
}

/*collection slider content */
.collection-slider-content{
  padding-top: 26px;
}
.collection-slider-content h2{
  color: var(--color-black);
  margin-bottom: 24px;
  text-transform: uppercase;
}
.collection-slider-content h2 span{
  font-size: var(--h4);
  display: block;
}
.collection-slider-content p{
  max-width: 361px;
  margin-bottom: 46px;
  letter-spacing: 0.9px;
}

/*collection slider wrap*/
.collection-slider-wrap .swiper-wrapper{
  padding-bottom: 50px;
}
.collection-slider-wrap .swiper-pagination{
  bottom: 0;
  top: auto;
  height: 1px;
  width: 90%;
}
.collection-slider-wrap .swiper-pagination-progressbar{
  background: var(--color-border-extra01);
}
.collection-slider-wrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
  background: var(--color-border-extra02);
}
.collection-slider-wrap .swiper-wrapper .swiper-slide{
  height: auto;
}
.collection-slider-box{
  text-align: center;
  display: grid;
  align-content: space-between;
  height: 100%;
}
.collection-slider-img{
  background: var(--color-white);
  padding: 0 15px 38px;
  max-width: 291px;
  height: 350px;
  margin: 0 auto;
}
.collection-slider-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: 0.3s all ease;
}
.collection-slider-box-link:hover .collection-product-hide{
  display: none;
}
.collection-product-hover{
  display: none;
}
.collection-slider-box-link:hover .collection-product-hover{
  display: block;
}
.collection-slider-title p{
  font-size: var(--font-size-b3);
  color: var(--color-dark);
  font-weight: var(--light);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 7px;
}
@media only screen and (min-width: 1441px) {
  .collection-slider-title p{
    font-size: var(--font-size-b1);
  }
  .collection-slider-content p {
    font-size: var(--font-size-b2);
  }
}
.collection-slider-title h6{
  color: var(--color-extra01);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.collection-slider-box:hover .collection-slider-title .hide{
  display: block;
}
.collection-slider-box:hover .collection-slider-title .show,
.collection-slider-title .hide{
  display: none;
}
.collection-slider-title .collection-product-price{
  margin-bottom: 28px;
  color: var(--color-extra02);
}
.collection-slider-box .btn{
  max-width: 248px;
  margin: 0 auto;
}

/*=====================================
    End collection slider section CSS
=======================================*/

/*=====================================
    04. grid banner product collection style 1 CSS
=======================================*/

.grid-banner-product-collection-style-1 .container{
  max-width: 1920px;
}
/*grid banner image*/
.grid-banner-product-collection-style-1 .grid-banner-image{
  position: relative;
  width: 100%;
  height: 100%;
}
.grid-banner-product-collection-style-1 .grid-banner-image::before{
  padding-top: 100%;
  content: '';
  display: block;
}
.grid-banner-product-collection-style-1 .grid-banner-image img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*grid banner product*/
.grid-banner-product{
  background: var(--color-body);
  width: 100%;
  height: 100%;
  text-align: center;
}
.grid-banner-product a{
  width: 100%;
  height: 100%;
  display: block;
  padding: 97px 15px 75px;
}
.grid-banner-product .grid-banner-product-image{
  max-width: 244px;
  margin: 0 auto 100px;
}
.grid-banner-product .grid-banner-product-image img{
  transform: scale(1);
  transition: 0.3s all ease;
}
.grid-banner-product:hover .grid-banner-product-image img{
  transform: scale(1.1);
}
.grid-banner-product-content h6{
  font-size: calc(var(--h6) - 1px);
  font-family: var(--font-primary);
  font-weight: var(--medium);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 17px;
  color: var(--color-extra01);
}
.grid-banner-product-content p{
  font-size: var(--font-size-b1);
  color: var(--color-extra02);
}

/*=====================================
    End grid banner product collection style 1 CSS
=======================================*/

/*=====================================
    05. grid product section CSS
=======================================*/

.grid-product-section{
  padding: 152px 0 2px;
}
.grid-product-section .container{
  max-width: 1920px;
}

/*grid product title*/
.grid-product-title h2{
  margin-bottom: 71px;
}
.grid-product-title h2 span{
  font-size: var(--h4);
  display: block;
}

/*grid product wrap*/
.grid-product-wrap::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 500%;
  height: 100%;
  margin-left: -500%;
  background: var(--color-body);
}
.grid-product-wrap::after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 500%;
  height: 100%;
  margin-right: -500%;
  background: var(--color-body);
}
.grid-product-wrap{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.grid-product-wrap .grid-product-box{
  background: var(--color-body);
  padding: 22px 20px;
}
.grid-product-wrap .grid-product-box a{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
}
.grid-product-wrap .grid-product-box .grid-product-image{
  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: center;
  width: 100%;
  height: 350px;
}
.grid-product-wrap .grid-product-box .grid-product-image img{
  max-width: 320px;
  width: 100%;
  margin: 0 auto;
  transform: scale(1);
  transition: 0.3s all ease;
  height: 100%;
  object-fit: contain;
}
.grid-product-wrap .grid-product-box .grid-product-image img:hover{
  transform: scale(1.1);
}
.grid-product-wrap .grid-product-box .grid-product-content{
  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;
  margin-top: 10px;
  width: 100%;
}
.grid-product-wrap .grid-product-box .grid-product-content p{
  color: var(--color-dark);
  text-transform: uppercase;
  font-size: var(--font-size-b2);
  font-family: var(--font-tertiary);
  font-weight: var(--medium);
}
@media only screen and (min-width: 1441px) {
  .grid-product-wrap .grid-product-box .grid-product-content p{
    font-size: var(--font-size-b1);
  }
}
.grid-product-wrap .grid-product-box .grid-product-content p.grid-product-price{
  flex-shrink: 0;
}
.grid-product-box .product-add-wishlist-icon{
  text-align: right;
  display: block;
}
.grid-product-box .product-add-wishlist-icon img{
  object-fit: scale-down;
}
.grid-product-box .product-add-wishlist-icon a{
  display: inline;
}
.grid-product-box .product-add-wishlist-icon a:hover,
.grid-product-box .product-add-wishlist-icon a.add{
  filter: brightness(0);
}

/*=====================================
    End grid product section CSS
=======================================*/

/*=====================================
    06. instagram post section CSS
=======================================*/
.instagram-post-section{
  background: var(--color-body);
  padding: 123px 0 35px;
}
.instagram-post-section h1{
  font-size: calc(var(--h1) + 10px);
  color: var(--color-white);
  text-transform: uppercase;
  margin: 0;
}
.instagram-post-section h1 span{
  display: block;
  font-size: var(--h3);
}

/*instagram post title left*/
.instagram-post-title-left{
  text-align: left;
  margin-bottom: -30px;
  position: relative;
  z-index: 1;
}

/*instagram post wrap*/
.instagram-post-wrap {
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.instagram-post-wrap .instagram-post-image{
  position: relative;
  width: 100%;
  height: 100%;
}
.instagram-post-wrap .instagram-post-image::before{
  padding-top: 100%;
  content: '';
  display: block;
}
.instagram-post-wrap .instagram-post-image img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.instagram-post-wrap .instagram-post-image a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  font-size: var(--h6);
  color: var(--color-black);
  transition: 0.3s all ease;
}
.instagram-post-wrap .instagram-post-image:hover a{
  background: #f3e6da94;
}
.instagram-post-wrap .instagram-post-image:hover a:before{
  transform: scale(1);
}
.instagram-post-wrap .instagram-post-image a:before{
  width: 100%;
  height: 100%;
  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: center;
  transition: 0.3s all ease;
  transform: scale(0);
  transform-origin: center;
}

/*instagram post title right*/
.instagram-post-title-right{
  text-align: right;
  margin-top: -30px;
  position: relative;
}

/*=====================================
    End instagram post section CSS
=======================================*/

/*=====================================
    07. collection full banner section CSS
=======================================*/
.collection-full-banner{
  position: relative;
  padding: 195px 0 102px;
}
/*collection full banner image*/
.collection-full-banner-image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.collection-full-banner-image::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(72 72 72 / 44%);
}
.collection-full-banner-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*collection full banner content*/
.collection-full-banner-content{
  position: relative;
}
.collection-full-banner-content img{
  transform: rotate(90deg);
  margin-bottom: 18px;
}
.collection-full-banner-content h2{
  font-size: calc(var(--h2) + 6px);
  color: var(--color-white);
  margin: 0;
  text-transform: uppercase;
}
.collection-full-banner-content h2 span{
  font-size: calc(var(--h4) + 6px);
  text-align: center;
  display: block;
}
/*=====================================
    End collection full banner section CSS
=======================================*/

/*=====================================
    10. footer style 1 CSS
=======================================*/
.footer-style-1{
  padding: 84px 0 0 0;
  background: var(--color-body);
}
.footer-style-1 .site-brand{
  text-align: center;
  margin-bottom: 83px;
}
.footer-column{
  margin-bottom: 40px;
}
.footer-column .widget-title{
  margin-bottom: 39px;
}
.footer-column .widget_text p{
  margin: 0;
}
.footer-menu .menu{
  padding: 0;
  margin: 0;
}
.footer-menu .menu li{
  list-style-type: none;
  margin-bottom: 10px;
}
.footer-menu .menu li a{
  position: relative;
  color: var(--color-black);
  font-size: var(--font-size-b3);
  letter-spacing: 2px;
}
@media only screen and (min-width: 1441px) {
  .footer-menu .menu li a {
    font-size: var(--font-size-b2);
  }
}
.footer-menu .menu li a::before{
  content: '';
  position: absolute;
  bottom: -2px;
  left: auto;
  right: 0;
  width: 0;
  height: 2px;
  background: var(--color-black);
  transition: 0.3s all ease;
}
.footer-menu .menu li a.active::before,
.footer-menu .menu li a:hover::before{
  width: 100%;
  left: 0;
  right: auto;
}
.footer-menu .menu li a:hover{
  color: var(--color-primary);
}
.footer-style-1 .footer-bottom{
  padding: 51px 0 33px;
}
.site-copyright{
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.site-copyright p{
  font-size: var(--font-size-b4);
  color: var(--color-black);
  font-weight: var(--regular);
  letter-spacing: 1.8px;
}

/*=====================================
    End footer style 1 CSS
=======================================*/



/**************************************
    Home two style
***************************************/

/*=====================================
    01. header style 2 CSS
=======================================*/

.site-header.header-type2 {
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}
.site-header.header-type2.open{
  background: var(--color-body)!important;
}
.site-header.header-type2.open .mobile-menu-btn .toggle-menu::after,
.site-header.header-type2.open .mobile-menu-btn .toggle-menu::before{
  background: var(--color-black);
}
.site-header.header-type2.open:not(.sticky-header) .site-brand a .sticky-logo,
.site-header.header-type2.open .site-brand .desktop-logo,
.site-header.header-type2.open:not(.sticky-header) .header-button-right .header-button img{
  filter: none;
}
.site-header.header-type2.open:not(.sticky-header) .header-button-right .header-button .count{
  color: var(--color-black);
}
.site-header.header-type2:not(.sticky-header) .header-button-right .header-button img{
  filter: brightness(100);
}
.site-header.header-type2:not(.sticky-header) .header-button-right .header-button .count{
  color: var(--color-white);
}
.site-header.header-type2 .site-nav.primary-nav:not(.vertical) .menu>.menu-item>a.active:before,
.site-header.header-type2 .site-nav.primary-nav:not(.vertical) .menu>.menu-item>a:hover:before{
  background: var(--color-white);
}
.site-header.header-type2.sticky-header .site-nav.primary-nav:not(.vertical) .menu>.menu-item>a.active:before,
.site-header.header-type2.sticky-header .site-nav.primary-nav:not(.vertical) .menu>.menu-item>a:hover:before{
  background: var(--color-black);
}
.site-header.header-type2.sticky-header .site-nav.primary-nav:not(.vertical) .menu>.menu-item>a.active,
.site-header.header-type2.sticky-header .site-nav.primary-nav:not(.vertical) .menu>.menu-item:hover>a,
.site-header.header-type2.sticky-header .site-nav.primary-nav:not(.vertical) .menu>.menu-item>a:hover{
  color: var(--color-black);
}
.site-header.header-type2 .site-nav.primary-nav:not(.vertical) .menu>.menu-item>a.active,
.site-header.header-type2 .site-nav.primary-nav:not(.vertical) .menu>.menu-item:hover>a,
.site-header.header-type2 .site-nav.primary-nav:not(.vertical) .menu>.menu-item>a:hover{
  color: var(--color-white);
}
.site-header.header-type2 .site-nav.primary-nav:not(.vertical) .menu>.menu-item>a{
  color: var(--color-white);
}
.site-header.header-type2.sticky-header .site-nav.primary-nav:not(.vertical) .menu>.menu-item>a{
  color: var(--color-black);
}
.site-header.header-type2.sticky-header{
  background: var(--color-body);
}

/*=====================================
    End header style 2 CSS
=======================================*/

/*=====================================
    02. Hero banner section style 2 CSS
=======================================*/

.hero-banner-section-two .hero-banner-img{
  width: 100%;
}
.hero-banner-section-two .hero-banner-content h1{
  color: var(--color-white);
}

/*=====================================
    End Hero banner section style 2 CSS
=======================================*/

/*=====================================
    03. grid banner product collection style 2 section CSS
=======================================*/

.grid-banner-product-collection-style-2 .container{
  max-width: 1920px;
}
.grid-banner-product-collection-style-2 .grid-banner-image{
  width: 100%;
  height: 100%;
}
.grid-banner-product-collection-style-2 .grid-banner-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.grid-banner-product-collection-style-2 .grid-banner-product a {
  padding: 65px 39px 38px;
  display: grid;
  align-content: space-between;
  text-align: left;
}
.grid-banner-product-collection-style-2 .grid-banner-product-content h6{
  margin-bottom: 0;
  margin-right: 10px;
  font-size: calc(var(--font-size-b2) + 1px);
  font-weight: var(--medium);
  font-family: var(--font-tertiary);
  color: var(--color-dark);
}
.grid-banner-product-collection-style-2 .grid-banner-product-content p{
  font-size: calc(var(--font-size-b2) + 1px);
  font-weight: var(--medium);
  font-family: var(--font-tertiary);
  color: var(--color-dark);
  flex-shrink: 0;
}
.grid-banner-product-collection-style-2 .grid-banner-product .grid-banner-product-content{
  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;
}
.grid-banner-product-collection-style-2 .grid-banner-product .grid-banner-product-image{
  margin: 0 auto 40px;
  height: 300px;
}
.grid-banner-product-collection-style-2 .grid-banner-product .grid-banner-product-image img{
  height: 100%;
}

/*=====================================
    End grid banner product collection style 2 section CSS
=======================================*/





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

/*=====================================
    01. header style 3 CSS
=======================================*/

.site-header.header-type3 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}

/*=====================================
    End header style 3 CSS
=======================================*/


/*=====================================
    02. filter style 1 CSS
=======================================*/

/*grid product filter wrap*/

.grid-product-filter-wrap{
  padding-top: 104px;
  position: relative;
  /*position: sticky;
  top: 0;
  left: 0;
  z-index: 1;*/
}
.grid-product-filter-tab-wrap{
  background: var(--color-white);
}

/*grid product filter tab*/
.grid-product-filter-tab{
  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: flex-end;
  background: var(--color-white);
  padding: 13px 0;
}
.grid-product-filter-tab .grid-product-filter-tab-click{
  font-family: var(--font-primary);
  text-transform: uppercase;
  font-size: var(--font-size-b3);
  letter-spacing: 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 38px;
}
.grid-product-filter-tab .grid-product-filter-tab-click:first-child{
  margin-left: 0;
}
.grid-product-filter-tab .grid-product-filter-tab-click span{
  margin-left: 18px;
  transition: 0.3s all ease;
}
.grid-product-filter-tab .grid-product-filter-tab-click.click-newest-btn.active span,
.grid-product-filter-tab .grid-product-filter-tab-click.click-filter-btn.active span{
  transform: rotate(180deg);
}

/*grid product filter content*/
.grid-product-filter-content{
  background: var(--color-extra04);
  min-height: 342px;
  padding: 54px 0 20px;
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 1;
}
.grid-product-filter-box{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 20px;
}
.grid-product-filter-content-left{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 444px;
  width: 100%;
  gap: 20px;
}
.grid-product-filter-box .grid-product-filter-box-title{
  font-family: var(--font-primary);
  font-weight: var(--light);
  color: var(--color-extra01);
  font-size: var(--font-size-b1);
  text-transform: uppercase;
  margin-bottom: 21px;
}
.grid-product-filter-box .grid-product-filter-box-menu{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.grid-product-filter-box .grid-product-filter-box-menu .grid-product-filter-box-item a{
  font-size: var(--font-size-b2);
  font-weight: var(--light);
  color: var(--color-black);
  line-height: var(--line-height-b1);
}
.grid-product-filter-box .grid-product-filter-box-menu .grid-product-filter-box-item.filter-submenu a{
  font-weight: var(--regular);
}
.grid-product-filter-box .grid-product-filter-box-menu .grid-product-filter-box-item a:hover{
  color: var(--color-body);
}

/*grid product filter buttons*/
.grid-product-filter-content-right{
  width: 100%;
}
.grid-product-filter-buttons{
  width: 100%;
}
.grid-product-filter-buttons .btn{
  margin-left: auto;
  margin-right: 0;
  max-width: 288px;
  margin-bottom: 8px;
  display: block;
}

/*=====================================
    End filter style 1 CSS
=======================================*/

/*=====================================
    03. shop grid product section CSS
=======================================*/

.grid-product-section.shop-grid-product-section{
  padding-top: 0px;
}

/*=====================================
    End shop grid product section CSS
=======================================*/






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


/*=====================================
    01. single product section CSS
=======================================*/

.single-product-section{
  padding: 86px 0 0;
}
.single-product-section .container{
  max-width: 1920px;
}

/*single product images wrap*/

.single-product-images-wrap{
  padding-right: 2px;
}
.single-product-images-wrap .swiper-wrapper{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2px;
}
.single-product-images-wrap .swiper-wrapper .single-product-images-box{
  background: var(--color-body);
  position: relative;
}
.single-product-images-wrap .swiper-wrapper .single-product-images-box::before{
  padding-top: 100%;
  display: block;
  content: '';
}
.single-product-images-wrap .swiper-wrapper .single-product-images-box img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/*single-product-content-wrap*/

.single-product-content-wrap{
  background: var(--color-extra04);
  padding: 42px 80px 30px 75px;
  height: 100%;
}
.single-product-content-wrap .single-product-content-title{
  position: relative;
}
.single-product-content-wrap .single-product-content-title .product-add-wishlist-icon{
  position: absolute;
  top: 0;
  right: 0;
}
.single-product-content-wrap .single-product-content-title .product-add-wishlist-icon a{
  border-radius: 100%;
  width: 29px;
  height: 29px;
  border: 1px solid var(--color-extra01);
  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: center;
}
.single-product-content-wrap .single-product-content-title .product-add-wishlist-icon a:hover,
.single-product-content-wrap .single-product-content-title .product-add-wishlist-icon a.add{
  filter: brightness(10);
  background: var(--color-black);
}
.single-product-content-wrap .single-product-content-title h4{
  color: var(--color-extra01);
  line-height: var(--h3-lineHeight);
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: var(--regular);
}
.single-product-content-wrap .single-product-content-title .single-product-content-number{
  color: var(--color-extra07);
  font-size: var(--font-size-b3);
  font-family: var(--font-primary);
  margin-bottom: 20px;
  font-weight: var(--regular);
}
.single-product-content-wrap .single-product-content-title .single-product-content-price{
  color: var(--color-extra01);
  font-size: var(--h6);
  font-family: var(--font-primary);
  margin-bottom: 4px;
  font-weight: var(--light);
}
.single-product-content-wrap .single-product-content-title .single-product-content-incl{
  color: var(--color-extra07);
  font-size: var(--font-size-b4);
  font-family: var(--font-primary);
  margin-bottom: 50px;
  font-weight: var(--regular);
  display: block;
}
.single-product-content-cart-btn .btn{
  margin-top: 6px;
  width: 100%;
  max-width: 100%;
  margin-bottom: 50px;
}

.mfp-popup-gallery .custom-add-html{
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 20px;
  right: 28px;
}

.mfp-popup-gallery button.mfp-close{
  display: none;
}
.mfp-popup-gallery .mfp-arrow-left:active,
.mfp-popup-gallery .mfp-arrow-right:active {
  margin-top: -55px;
}
.mfp-popup-gallery .mfp-arrow-left:after {
  border-right: 17px solid var(--color-extra11);
}
.mfp-popup-gallery .mfp-arrow-right:after {
  border-left: 17px solid var(--color-extra11);
}
.mfp-popup-gallery .mfp-arrow-left:before {
  border-right: 27px solid var(--color-extra11);
}
.mfp-popup-gallery .mfp-arrow-right:before {
  border-left: 27px solid var(--color-extra11);
}

.mfp-popup-gallery .custom-add-html button.mfp-close{
  position: unset;
  display: inline-flex;
}
.mfp-popup-gallery .mfp-close,
.mfp-popup-gallery .mfp-share-btn,
.mfp-popup-gallery .mfp-wishi-btn{
  width: 45px;
  height: 45px;
  border: 1px solid #FFFFFF;
  border-radius: 100%;
  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: center;
  padding: 0;
  margin-bottom: 18px;
  opacity: 1;
  cursor: pointer !important;
}
.mfp-popup-gallery .mfp-close:hover,
.mfp-popup-gallery .mfp-share-btn:hover,
.mfp-popup-gallery .mfp-wishi-btn:hover{
  opacity: 0.8;
}
.mfp-popup-gallery .mfp-img-box{
  max-width: 450px;
  background: #F3E6DA;
}
.mfp-popup-gallery .mfp-figure:after{
  box-shadow: none;
}
.mfp-popup-gallery .mfp-img-box img.mfp-img {
  padding-left: 20px;
  padding-right: 20px;
}

/*=====================================
    End single product section CSS
=======================================*/


/*=====================================
    02. grid product slider section CSS
=======================================*/

.grid-product-slider-section{
  padding: 132px 0 86px;
}
.grid-product-slider-section .container{
  position: relative;
}
.grid-product-slider-section .grid-product-wrap{
  display: block;
}
.grid-product-slider-section .grid-product-title h2{
  margin-bottom: 51px;
}

/*grid product all shop btn*/
.grid-product-all-shop-btn {
  position: absolute;
  top: 60px;
  right: 50px;
}
.grid-product-all-shop-btn a{
  font-size: var(--h6);
  color: var(--color-black);
  font-family: var(--font-secondary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: fit-content;
  margin: 0 auto;
}
.grid-product-all-shop-btn span{
  max-width: 40px;
  display: block;
  width: 100%;
}
.grid-product-all-shop-btn span img{
  margin-left: 5px;
  transition: 0.3s all ease;
}
.grid-product-all-shop-btn:hover span img{
  margin-left: 10px;
}

/*=====================================
    End grid product slider section CSS
=======================================*/

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

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

/*=====================================
    End related-products-section CSS
=======================================*/



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

/*=====================================
    01. header mini benner section CSS
=======================================*/

.header-mini-benner-section{
  padding-top: 84px;
}
.header-mini-benner-section .header-mini-benner-images{
  position: relative;
  width: 100%;
  height: 100%;
}
.header-mini-benner-section .header-mini-benner-images::before{
  padding-top: 160px;
  content: '';
  display: block;
}
.header-mini-benner-section .header-mini-benner-images img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--color-extra08);
}

/*=====================================
    End header mini benner section CSS
=======================================*


/*=====================================
    02. contact page section CSS
=======================================*/

.contact-form-box{
  max-width: 626px;
  width: 100%;
}
.contact-form-box .contact-form-wrap{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  margin-bottom: 25px;
}
.contact-form-box .contact-form-col label{
  display: block;
  color: var(--color-black);
  text-transform: uppercase;
  font-size: var(--font-size-b3);
  font-family: var(--font-primary);
  letter-spacing: 1px;
  font-weight: var(--medium);
  margin-bottom: 16px;
}
.contact-form-box .contact-form-col textarea{
  min-height: 141px;
  margin-bottom: 25px;
  display: block;
  width: 100%;
}

/*=====================================
    End contact page section CSS
=======================================*

/*=====================================
    03. sem leyout col section CSS
=======================================*/

.sem-leyout-col-section{
  padding: 100px 0;
}
.sem-leyout-col-section .sem-leyout-title h2{
  margin-bottom: 0;
  text-transform: uppercase;
  max-width: 350px;
}
.sem-leyout-content .sem-leyout-content-box{
  max-width: 564px;
  width: 100%;
}
.sem-leyout-content .sem-leyout-content-box h4{
  font-size: var(--h5);
  margin-bottom: 29px;
}
.sem-leyout-content .sem-leyout-content-box p{
  font-family: var(--font-primary);
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b2);
  font-weight: var(--regular);
  letter-spacing: 2px;
  margin-bottom: 29px;
  color: var(--color-black);
}
.sem-leyout-content .sem-leyout-content-box p a{
  text-decoration: underline;
}
.sem-leyout-content .sem-leyout-content-box p a:hover{
  text-decoration: none;
}
.sem-leyout-content .sem-leyout-content-box:last-child p:last-child{
  margin-bottom: 0px;
}

/*=====================================
    End sem leyout col section CSS
=======================================*



/**************************************
    cart page section style
***************************************/

.cart-page-section{
  padding: 165px 0 100px;
}
.cart-product-wrap{
  max-width: 1088px;
  margin: 0 auto;
}
.cart-page-title h2{
  text-transform: uppercase;
  margin-bottom: 71px;
}
.table>:not(:last-child)>:last-child>*{
  border-color: #ECECEC;
}
/*=====================================
    01. Cart product table style CSS
=======================================*/
.cart-product-table tbody tr:first-child{
  border-top: 1px solid var(--color-extra10);
}
.cart-product-table tbody tr {
  border-bottom: 1px solid var(--color-extra10);
}
.cart-product-table tbody tr td{
  border: 0;
}
.table{
  height: auto;
}
.table tr th.quantity-td{
  text-align: center;
}
.table tr td{
  padding: 15px 10px;
  vertical-align: middle;
}
.table tr td.product-name{
  padding-left: 0;
  padding-right: 0;
}
.cart-product{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.cart-product .cart-thumb{
  width: 120px;
  height: 105px;
  position: relative;
  margin-right: 30px;
}
.cart-product .cart-thumb a{
  width: 100%;
  height: 100%;
  display: block;
}
.cart-product .cart-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-product .cart-product-title{
  font-family: var(--font-primary);
  font-size: var(--font-size-b1);
  font-weight: var(--regular);
  color: var(--color-black);
  max-width: 215px;
}
.cart-product .cart-product-title:hover{
  color: var(--color-body);
}
.cart-product .cart-product-title a{
  display: inline-block;
}
.remove-icon{
  font-family: var(--font-primary);
  font-size: var(--font-size-b3);
  font-weight: var(--regular);
  color: var(--color-extra01);
  opacity: 0.4;
}
.remove-icon:hover{
  opacity: 1;
}
.cart-product-table .quantity-td .quantity{
  border-color: var(--color-extra10);
}
.cart-product-table .total-price{
  text-align: right;
  font-family: var(--font-primary);
  font-size: var(--font-size-b1);
  font-weight: var(--regular);
  color: var(--color-extra05);
}
.wishlist-page-section .cart-product-table .total-price{
  text-align: left;
}
.wishlist-add-btn .btn{
  max-width: 211px;
}
.cart-total-body{
  max-width: 379px;
  margin-left: auto;
}
.cart-total-body .cart-list{
  border-bottom: 1px solid var(--color-extra10);
  padding: 29px 16px;
  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;
}
.cart-total-body .cart-list.cart-tex h6{
  color: var(--color-black);
  font-size: var(--font-size-b2);
  font-family: var(--font-primary);
  font-weight: var(--regular);
  margin-bottom: 0;
  opacity: 0.4;
  margin-right: 10px;
}
.cart-total-body .cart-list.cart-tex span{
  color: var(--color-extra05);
  font-size: var(--font-size-b1);
  font-family: var(--font-primary);
  font-weight: var(--regular);
}
.cart-total-body .cart-list.cart-subtotal h6{
  color: var(--color-black);
  font-size: calc(var(--font-size-b1) + 2px);
  font-family: var(--font-primary);
  font-weight: var(--regular);
  margin-bottom: 0;
  margin-right: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cart-total-body .cart-list.cart-subtotal span{
  color: var(--color-black);
  font-size: calc(var(--h5) + 1px);
  font-family: var(--font-primary);
  font-weight: var(--regular);
}
.cart-total-buttons .btn{
  max-width: 100%;
}
.cart-total-buttons .btn:first-child{
  margin-bottom: 8px;
}

/*=====================================
    End Cart product table style CSS
=======================================*/



/**************************************
  Checkout page section style
***************************************/

.checkout-page{
  padding-top: 101px;
}
.checkbox-left-box{
  background: var(--color-white);
}
.checkbox-right-box{
  background: var(--color-body);
}
.checkout-page .container:not(.checkout-page .container .container){
  max-width: 1920px;
}

/*=====================================
    01. account address form style CSS
=======================================*/

.account-address-form-wrap{
  max-width: 572px;
  margin: 0 auto;
  padding: 48px 20px 70px;
}
.account-address-img{
  margin: 0 auto 30px;
  text-align: center;
}
.account-address-form .breadcrumb{
  margin-bottom: 27px;
}
.account-address-form-title{
  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;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 10px;
}
.account-address-form-title p{
  font-size: var(--font-primary);
  font-weight: var(--regular);
  color: var(--color-extra16);
}
.account-address-form-title p a:hover{
  color: var(--color-black);
}
.account-address-form .account-title{
  text-transform: uppercase;
  font-size: var(--h6);
  margin-bottom: 0;
}
.account-address-form-id-details{
  margin-bottom: 40px;
}
.account-address-form-id-details-input{
  position: relative;
  margin-bottom: 15px;
}
.account-address-form-id-details-input input{
  border: 2px solid var(--color-extra12);
  font-size: var(--font-size-b2);
  color: var(--color-extra13);
}
.account-address-form-id-details-input .icons{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}
.account-address-form-wrap form{
  margin-top: 20px;
}
.account-address-form-wrap form .form-row{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
.account-address-form-wrap form .form-group{
  margin-bottom: 12px;
}
.account-address-form-wrap form .form-group-icon-box{
  position: relative;
}
.account-address-form-wrap form .form-group-icon-box span{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}
.account-address-form-wrap form input{
  border: 1px solid var(--color-extra09);
}
.account-address-form-wrap .custom-select-dropdown{
  border: 1px solid var(--color-extra09);
  text-align: left;
  margin-bottom: 12px;
  padding: 11px 13px 5px;
}
.account-address-form-wrap .custom-select-dropdown.active{
  border: 1px solid var(--color-black);
}
.account-address-form-wrap .custom-select-dropdown label{
  display: block;
  font-family: var(--font-primary);
  font-size: var(--font-size-b4);
  color: var(--color-extra13);
  margin: -10px 0 -4px;
}
.account-address-form-wrap .custom-select-dropdown span{
  text-transform: none;
  letter-spacing: 0;
}
.account-address-form-btn{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  grid-gap: 12px;
  padding-top: 15px;
}
.account-address-form-btn .btn{
  padding: 20px 30px;
  max-width: fit-content;
  font-family: var(--font-primary);
}
.account-address-form-btn .btn.btn-light{
  border: 0;
  text-transform: none;
  letter-spacing: 0;
}
.account-address-links{
  border-top: 1px solid var(--color-extra10);
  padding-top: 14px;
  margin-top: 120px;
}
.account-address-links ul{
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  flex-wrap: wrap;
}
.account-address-links ul li{
  font-family: var(--font-primary);
  font-size: calc(var(--font-size-b3) - 1px);
  font-weight: var(--regular);
  color: var(--color-extra16);
  margin-right: 30px;
  margin-bottom: 10px;
}
.account-address-links ul li:last-child{
  margin-right: 0;
}
.account-address-links ul li a{
  color: var(--color-extra16);
}

/*=====================================
    End account address form style CSS
  =======================================*/


/*=====================================
    02. Checkout Order summary style CSS
=======================================*/
.checkout-page .order-summary-wrap{
  padding: 45px 55px;
}
.checkout-page .order-summary{
  max-width: 430px;
  width: 100%;
}
.checkout-page .summary-product-list{
  overflow: visible;
  margin: 0;
  padding: 0;
  height: auto;
}
.checkout-page .summary-product-list .cart-thumb .badge{
  background-color: var(--color-extra17);
  border-radius: 100%;
  width: 20px;
  height: 20px;
  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: center;
  position: absolute;
  top: 0;
  right: 0;
}
.checkout-page .summary-product-list .cart-product{
  margin-bottom: 15px;
  padding: 0;
  justify-content: space-between;
}
.checkout-page .summary-product-list .cart-product .cart-thumb{
  width: 60px;
  height: 60px;
  min-height: auto;
  flex-shrink: 0;
  margin-right: 15px;
  position: relative;
}
.checkout-page .summary-product-list .cart-product-title{
  max-width: 100%;
  flex-grow: 1;
}
.checkout-page .summary-product-list .cart-product-title h6{
  font-size: var(--font-size-b2);
  margin-bottom: 0px;
  text-transform: uppercase;
  font-family: var(--font-primary);
  color: var(--color-extra01);
}

.checkout-page .summary-product-list .price{
  font-size: var(--h6);
  font-weight: var(--regular);
  color: var(--color-extra05);
}

/*coupon code form*/
.coupon-code-form{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  border-top: 1px solid var(--color-extra10);
  border-bottom: 1px solid var(--color-extra10);
  padding: 21px 0;
}
.coupon-code-form .form-control{
  border-color: var(--color-extra09);
  width: 100%;
  border-radius: 0;
  background: var(--color-white);
}
.coupon-code-form button{
  background: var(--color-black);
  border-radius: 0;
  margin-left: 12px;
  font-weight: var(--bold);
  min-width: 118px;
  text-align: center;
  font-size: var(--font-size-b2);
  color: var(--color-white);
  flex-shrink: 0;
}
.coupon-code-form button:hover{
  background: var(--color-extra17);
}

/*order summary*/
.order-summary .cart-total-body{
  margin: 0;
  max-width: 100%;
}
.order-summary .cart-total-body .cart-list{
  padding: 20px 0;
}
.order-summary .cart-total-body .cart-list:last-child{
  border-bottom: 0;
}
.order-summary .cart-total-body .cart-list .cart-subtotal p{
  font-size: var(--font-size-b2);
  font-family: var(--font-primary);
  color: var(--color-extra18);
  margin-bottom: 10px;
}
.order-summary .cart-total-body .cart-list .cart-subtotal strong{
  font-size: var(--h6);
  font-weight: var(--regular);
  color: var(--color-extra05);
  margin-bottom: 10px;
}
.order-summary .cart-total-body .cart-list .cart-shipment p{
  font-size: var(--font-size-b2);
  font-family: var(--font-primary);
  color: var(--color-extra18);
}
.order-summary .cart-total-body .cart-list .cart-shipment strong{
  font-size: calc(var(--font-size-b3) - 1px);
  font-weight: var(--regular);
  color: var(--color-extra13);
}
.order-summary .cart-total-body .cart-list.cart-total p{
  font-size: var(--font-size-b2);
  font-family: var(--font-primary);
  color: var(--color-extra18);
}
.order-summary .cart-total-body .cart-list.cart-total span{
  font-size: calc(var(--font-size-b3) - 1px);
  font-weight: var(--regular);
  color: var(--color-extra13);
}
.order-summary .cart-total-body .cart-list.cart-total strong{
  font-size: calc(var(--h4) + 4px);
  font-weight: var(--regular);
  color: var(--color-extra19);
}

/*=====================================
    End Checkout Order summary style CSS
=======================================*/





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

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

.intro-page-title-section{
  padding: 193px 0 55px;
}
.intro-page-title h2{
  color: var(--color-black);
  margin-bottom: 24px;
  text-transform: uppercase;
  max-width: 720px;
  margin: 0 auto 34px;
  text-align: center;
}
.intro-page-title h2 span{
  color: var(--color-extra11);
}
.intro-page-title p{
  text-align: center;
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b3);
  letter-spacing: 2px;
  max-width: 788px;
  margin: 0 auto 41px;
}
.intro-page-buttons{
  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: center;
  flex-wrap: wrap;
}
.intro-page-buttons a{
  margin: 0 7px 10px;
}

/*=====================================
  End intro page title section style CSS
=======================================*/


/*=====================================
  02. intro page slider section style CSS
=======================================*/
.intro-page-slider-section{
  overflow-x: hidden;
}
.intro-page-slider-images-box img{
  width: 100%;
  height: 100%;
}
.marquee-animation{
  white-space: nowrap;
  position: relative;
  transform: translate3d(0%, 0, 0);
  animation: marquee 13s linear infinite;
}
.marquee-colum{
  display: inline-block;
  width: 100%;
}
.intro-page-slider-section .inner-page-grid{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.inner-page-grid .stunning-features-box{
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgb(0 0 0 / 9%);
  width: 100%;
  height: 100%;
  max-width: 27%;
  min-width: 27%;
  margin-left: -4%;
  margin-top: 0;
  margin-bottom: 10px;
  transition: 0.3s all ease;
}
.inner-page-grid .stunning-features-box:hover {
  z-index: 1;
  box-shadow: 0 4px 13px rgb(0 0 0 / 30%);
}
.inner-page-grid .stunning-features-box.one-features{
  margin-top: 3%;
}
.inner-page-grid .stunning-features-box.two-features{
  margin-top: 6%;
}
@keyframes marquee {
  0% {
    transform: translate3d(0%, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
.inner-page-grid .stunning-features-box a{
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
.inner-page-grid .stunning-features-box a::before{
  content: '';
  display: block;
  padding-top: 100%;
}
.inner-page-grid .stunning-features-box a img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
/*=====================================
  End intro page slider section style CSS
=======================================*/


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

.intro-page-about-section{
  padding: 119px 0 130px;
}
.intro-page-about-title h2{
  color: var(--color-black);
  margin-bottom: 24px;
  text-transform: uppercase;
}
.intro-page-about-title h2 span{
  font-size: var(--h4);
  display: block;
}
.intro-page-about-title p{
  max-width: 361px;
  margin-bottom: 46px;
  letter-spacing: 0.9px;
  color: var(--color-black);
}
.intro-page-content-wrap{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 18px;
}
.intro-page-content-box{
  border: 3px solid var(--color-body);
  border-radius: 5px;
  padding: 35px 35px 42px;
  text-align: center;
}
.intro-page-content-box .intro-page-content-box-icon{
  width: 81px;
  height: 81px;
  border-radius: 25px;
  background: var(--color-body);
  margin: 0 auto 16px;
  font-size: var(--h4);
  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: center;
  color: var(--color-extra14);
}
.intro-page-content-box .intro-page-content-box-icon svg{
  width: 40px;
}
.intro-page-content-box h5{
  color: var(--color-extra14);
  font-size: var(--h5);
  margin-bottom: 22px;
}
.intro-page-content-box p{
  letter-spacing: 0.5px;
  color: var(--color-extra14);
  font-size: var(--font-size-b3);
}

/*=====================================
  End intro page about section style CSS
=======================================*/


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

.intro-page-themes-demo-section{
  background: var(--color-body);
  padding: 71px 0 84px;
  margin-bottom: 2px;
}
.intro-page-themes-demo-title{
  text-align: center;
}
.intro-page-themes-demo-title h2{
  color: var(--color-black);
  margin-bottom: 24px;
  text-transform: uppercase;
}
.intro-page-themes-demo-title h2 span{
  font-size: var(--h4);
  display: block;
}
.intro-page-themes-demo-wrap{
  max-width: 1134px;
  margin: 60px auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 47px 68px;
  text-align: center;
}
.intro-page-themes-demo-box .intro-page-themes-demo-box-images a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}
.intro-page-themes-demo-box .intro-page-themes-demo-box-images{
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid var(--color-black);
/*  box-shadow: 0px 0px 14px rgb(0 0 0 / 30%);*/
}
.intro-page-themes-demo-box .intro-page-themes-demo-box-images:before{
  content: '';
  display: block;
  padding-top: 72%;
}
.intro-page-themes-demo-box .intro-page-themes-demo-box-images img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: 0.5s all ease;
  transform: scale(1.0);
}
.intro-page-themes-demo-box:hover .intro-page-themes-demo-box-images img{
  transform: scale(1.1);
}
.intro-page-themes-demo-box h5{
  margin: 36px 0 0;
  font-size: calc(var(--h4) + 2px);
  color: var(--color-extra14);
  font-weight: var(--regular);
  letter-spacing: 0.5px;
}
.intro-page-themes-demo-box h5 a{
  color: var(--color-extra14);
}
.intro-page-themes-demo-box h5 a:hover{
  color: var(--color-black);
}
.intro-page-themes-demo-btn{
  color: var(--color-black);
  font-family: var(--font-secondary);
  text-align: center;
  font-size: var(--h4);
  display: block;
}

/*=====================================
  End intro page themes demo section style CSS
=======================================*/







/**************************************
  login screen popup
***************************************/

.login-screen-popup{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  min-height: 100%;
  transform-origin: center;
  transition: 0.3s all ease;
  opacity: 0;
  visibility: hidden;
}
.login-screen-popup.open{
  opacity: 1;
  visibility: visible;
}
.login-screen-popup::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-body);
  opacity: 0.58;
}
.login-screen-main-wrapper{
  overflow-y: auto;
  height: 100vh;
  min-height: 100vh;
  padding: 50px 20px;
  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: center;
}
.login-screen-wrapper{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  background: var(--color-white);
  box-shadow: 0 3px 6px hsl(0deg 0% 0% / 16%);
  padding: 20px 27px;
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transition: 0.3s all ease;
}
.login-screen-popup.open .login-screen-wrapper{
  opacity: 1;
  transform: scale(1);
}
.login-screen-close{
  text-align: right;
}
.login-screen-close a{
  font-size: 26px;
  color: var(--color-extra20);
  line-height: 0;
}
.login-screen-close a:hover{
  opacity: 0.5;
}
.login-screen-form-title{
  padding: 0;
  margin: 0;
  list-style-type: none;
  margin-bottom: 24px;
  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: flex-start;
}
.login-screen-form-title li{
  font-size: var(--font-size-b1);
  color: var(--color-extra20);
  font-family: var(--font-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.login-screen-form-title li:first-child:before{
  display: none;
}
.login-screen-form-title li:before{
  content: '|';
  display: inline-block;
  color: var(--color-extra20);
  font-weight: 700;
  width: 1px;
  height: 100%;
  margin: 0 8px;
}
.login-screen-form-title li a{
  color: var(--color-extra08);
  opacity: 0.67;
}
.login-screen-form-title li a:hover{
  opacity: 1;
  color: var(--color-extra20);
}
.login-screen-form-input .form-group{
  margin-bottom: 20px;
}
.login-screen-form-input .form-group:last-child{
  margin-bottom: 24px;
}
.login-screen-form-forgot{
  font-size: calc(var(--font-size-b3) - 1px);
  font-family: var(--font-primary);
  color: var(--color-extra20);
  font-weight: var(--light);
  letter-spacing: 1px;
  text-align: right;
  margin-bottom: 9px;
  display: block;
}
.login-screen-buttons .btn{
  max-width: 100%;
  margin-bottom: 24px;
}
.login-screen-wrapper p{
  font-size: var(--font-size-b2);
  font-weight: var(--regular);
  color: var(--color-extra20);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}
.login-screen-wrapper p a{
  text-decoration: underline;
}
.login-screen-wrapper p a:hover{
  text-decoration: none;
}




/**************************************
  login screen popup
***************************************/