/*----flat icon import ---*/
@import url("https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css");
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* - - - - - - google fonts---*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Spartan:wght@400;500;600;700&display=swap');
/*--------variables css----*/
:root{
  --header-height: 4rem;
  /* colours--*/
  --body-backgroundcolor: #fff;;
  --section-background-color:#DEE4E4;
  --second-color: #DAA02F;
  --first-color: #088179;
  --text-color: #122423;
  --second-text-color:#B1B2AE;
  --input-color: #CFD7D6;
  --rate: #FFB300;
  --border-color: #CBE7CF;
  /*------fonts------*/
  --body-font: 'lato', sans-serif;
  --second-font: 'Spartan', sans-serif;
  --big-font-size: 3.5rem;
  --h1-font-size: 2.75rem;
  --h2-font-size: 2rem;
  --h3-font-size: 1.75rem;
  --h4-font-size: 1.375rem;
  --large-font-size: 1.125rem;
  --normal-font-size: 1rem;
  --small-font-size: 0.875rem;
  --smaller-font-size: 0.75rem;
  --tiny-font-size:  0.6875rem;
  /*----font weight - - - - */
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;
  --weight-700: 700;
  /*----(((((-----transiton)))))*/
  --transition: cubic-bezier(0, 0, 0.05, 1);
}
/*
// CSS HEX day//
 --pickled-bluewood: #263B4D;✔️
--amaranth: #E22D4C;^_^
--black-haze: #EEF0EF;
--golden-grass: #DAA02F;✔️
--hit-gray: #96A6AA;^_^
--keppel: #38B2AD;^_^
--tiara: #C1CECE;✔️
--eunry: #D19E98;^_^
--pavlova: #D8C29D;^_^
--cavern-pink: #E3C7C1;^_^

// CSS HEX night//
 --cararra: #EAE8E3;✔️
--heavy-metal: #1D1F1E;✔️
--cinnabar: #E9443B;^_^
--friar-gray: #747472;^_^
--glacier: #6FA5BD;^_^
--jelly-bean: #2771AD;^_^
--fuscous-gray: #484A45;^_^
--madison: #0E346B;❌
--mineral-green: #426263;✔️
--firefly: #14423D;✔️
*/
/* 
//day
#dee3e1 the footer and the search bar background-color ✔️
#122423 the main color ✔️
#DEE4E4 the body background ✔️
#B1B2AE the secondary color ✔️
#CFD7D6 the placeholder 
//night
#151716 main background 
#b1b2ae footer background
#4a534e radio 
#fff the btns back and the text color 
*/
/*  media */
@media screen and (max-width: 1200px) {
  :root{
  --big-font-size: 2.25rem;
  --h1-font-size: 2rem;
  --h2-font-size: 1.375rem;
  --h3-font-size: 1.25rem;
  --h4-font-size: 1.125rem;
  --large-font-size: 1rem;
  --normal-font-size: 0.9375rem;
  --small-font-size: 0.8125rem;
  --smaller-font-size: 0.6875rem;
  --tiny-font-size: 0.625rem;
  }
}

/******base*---------*/
input,
textarea,
body{
  color: var(--text-color);
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  font-weight: var(--weight-400);
}
body{
  background-color: var(--body-backgroundcolor);
}
body.no-scroll {
  overflow: hidden;
}
h1,h2,h3,h4{
  font-family: var(--second-font);
  color: var(--text-color);
  font-weight: var(--weight-600);
}

.lazyload {
    opacity: 0;
}

.lazyloaded {
    opacity: 1;
}

ul{
  list-style: none;
}

a{
  text-decoration: none;
}

p{
  line-height: 1.5rem;
}

img{
  max-width: 100%;
  transition: opacity 5.5s ease;
}

button{
  background-color: transparent;
  border: none;
  outline: none;
}
textarea,
input {
  background-color: var(--section-background-color);
  border: none;
  outline: none;
}
table{
  width: 100%;
  border-collapse: collapse;
}
/*----------------Reusable css classes - - - - - - */
.container{
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 0.75rem;
}

.grid{
  display: grid;
  gap: 1.5rem;
}

.section{
  padding-block: 2rem;
}
.section-title{
  font-size: var(--h4-font-size);
  margin-bottom: 1.5rem;
}
.section-title span{
  color: var(--text-color);
}
.section-lg{
  padding-block: 4rem;
}
.form-input{
  border: 1px solid currentColor;
  padding-inline: 1rem;
  height: 45px;
  border-radius: 0.25rem;
  font-size: var(--small-font-size);
}
.new-price{
  color: var(--first-color);
  font-weight: var(--weight-600);
}
.old-price{
  color: var(--second-text-color);
  font-size: var(--small-font-size);
  text-decoration: line-through;
}
.form{
  row-gap: 1rem;
}
.form-group{
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.textarea{
  height: 200px;
  padding-block: 1rem;
  resize: none;
}
/*------------------Header&Nav------*/
.header-top{
  background-color: var(--section-background-color);
  border-bottom: 1px solid var(--border-color);
  padding-block: 0.875rem;
}

.header-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-contact span:first-child{
  margin-right: 2rem;
}

.header-contact span,
.header-alert-news, 
.header-top-action{
  font-size: var(--small-font-size);
}

.header-alert-news{
  color: var(--second-text-color);
  font-weight: var(--weight-600);
}

.header-top-action{
  color: var(--text-color);
}

.nav, 
.nav-menu, 
.nav-list, 
.header-user-actions{
  display: flex;
  align-items: center;
}

.nav{
  height: calc(var(--header-height) + 2.5rem);
  justify-content: space-between;
  column-gap: 1rem;
}

.nav-logo-img{
  width: 120px;
 
  height: 35px;
  background-color: var(--text-color); /* The color you want */
  mask: url('Imgs/logo.svg') no-repeat center / contain;
  -webkit-mask: url('Imgs/logo.svg') no-repeat center / contain;


}

.nav-menu{
  flex-grow: 1;
  margin-left: 2.5rem;
}

.nav-list{
  column-gap: 2.5rem;
  margin-right: auto;
}

.nav-link{
  color: var(--text-color);
  font-weight: var(--weight-700);
  transition: all 0.2s var(--transition);
}

.header-search{
  width: 300px;
  position: relative;
  
}

.header-search .form-input{
  width: 100%;
}
.sooso{
  width: 60%;
}
.search-btn{
  width: 8%;
  position: absolute;
  top: 24%;
  right: 1.25rem;
  cursor: pointer;
}
.search-btnM{
  
  width: 26px;
  height: 26px;
  background-color: var(--text-color); /* The color you want */
  mask: url('Imgs/search.svg') no-repeat center / contain;
  -webkit-mask: url('Imgs/search.svg') no-repeat center / contain;


}
.header-user-actions{
  column-gap: 1.25rem;
}

.header-action-btn{
  position: relative;
}

.header-action-btn div{
  width: 24px;
  height: 24px;
  
}
.header-action-btn-w{
  background-color: var(--text-color); /* The color you want */
  mask: url('Imgs/heart1.svg') no-repeat center / contain;
  -webkit-mask: url('Imgs/heart1.svg') no-repeat center / contain;
}
.header-action-btn-s{
  background-color: var(--text-color);
  /* The color you want */
  mask: url('Imgs/shopping-bag.svg') no-repeat center / contain;
  -webkit-mask: url('Imgs/shopping-bag.svg') no-repeat center / contain;
}
.header-action-btn-m{
  background-color: var(--text-color); /* The color you want */
  mask: url('Imgs/menu.svg') no-repeat center / contain;
  -webkit-mask: url('Imgs/menu.svg') no-repeat center / contain;
}


.header-action-btn .count{
  position: absolute;
  top: -0.625rem;
  right: -0.625rem;
  background-color: var(--first-color);
  color: var(--body-backgroundcolor);
  height: 18px;
  width: 18px;
  line-height: 18px;
  border-radius: 50%;
  text-align: center;
  font-size: var(--tiny-font-size);
}

.cartNumbers,
.wishlistNums{
  display: none;
}
.nav-menu-top,
.nav-toggle{
  display: none;
  
}
/*-------active link------*/
.active-link, 
.nav-link:hover{
  color: var(--first-color);
}


/*----------home-----------*/
.home-contianer{
  grid-template-columns: 5fr 7fr;
  align-items: center;
}

.home-subtitle, 
.home-description{
  font-size: var(--large-font-size);
}

.home-subtitle{
  font-family: var(--second-font);
  font-weight: var(--weight-600);
  margin-bottom: 1rem;
  display: block;
}

.home-title{
  font-size: var(--h1-font-size);
  font-weight: var(--weight-700);
  line-height: 1.4;
}
.home-title span{
  color: var(--first-color);
  font-size: var(--big-font-size);
}

.home-description{
  margin-block: 0.5rem 2rem;
  color: color-mix(in srgb, var(--second-text-color), var(--text-color));
}

.home-img{
  justify-self: flex-end;
}

/*--------------btns--------*/
.btn{
  display: inline-block;
  background-color: var(--first-color);
  border: 2px solid var(--first-color);
  color: var(--body-backgroundcolor);
  padding-inline: 1.75rem;
  height: 49px;
  line-height: 49px;
  border-radius: 0.25rem;
  font-family: var(--second-font);
  font-size: var(--small-font-size);
  font-weight: var(--weight-700);
  transition: all 0.4s var(--transition);
}

.btn:hover{
  background-color: transparent;
  color: var(--first-color);
}
.btn-md{
  height: 45px;
  line-height: 42px;
}
.btn-sm{
  height: 40px;
  line-height: 36px;
}
.btn-md,
.btn-sm{
  font-family: var(--body-font);
}
.flex {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
/*-----------categories--------*/
.categories{
  overflow: hidden;
  background-color: var(--section-background-color)
}
.category-item{
  text-align: center;
  border: 1px solid var(--border-color);
  padding: 0.625rem 0.625rem 1.25rem;
  border-radius: 1.25rem;
}
.category-img{
  border-radius: 0.75rem;
  margin-bottom: 1.25rem;
}

.category-title{
  color: var(--text-color);
  font-size: var(--small-font-size);
}


/*----------swiper classes - - - - - */
.swiper{
  overflow: initial;
}
.swiper-button-next::after, 
.swiper-button-prev::after{
  content: '';
}
.swiper-button-next, 
.swiper-button-prev{
  top: -1.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--input-color), transparent 30%);;
  border: 1px solid var(--border-color);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--first-color);
  font-size: var(--tiny-font-size);
}
.swiper-button-prev {
  left: initial;
  right: 2.5rem;
}
.swiper-button-next{
  right: 0;
}


/**-----------products - - - - - */
.tab-btns{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.tab-btn{
  background-color: color-mix(in srgb, var(--section-background-color), transparent 20%);
  color: var(--text-color);
  padding: 1rem 1.25rem 0.875rem;
  border-radius: 0.25rem;
  font-family: var(--second-font);
  font-size: var(--small-font-size);
  font-weight: var(--weight-600);
  cursor: pointer;
}

.products-container{
  grid-template-columns: repeat(4, 1fr);
}
.product-item{
  border: 1px solid var(--border-color);
  border-radius: 1.5rem;
  transition: all 0.2s var(--transition);
}

.product-banner{
  padding: 0.625rem 0.75rem 0.75rem;
  
}
.product-banner,
.product-images{
  position: relative;
}
.product-images{
  display: block;
  overflow: hidden;
  border-radius: 1.25rem;
}
.product-img{
  vertical-align: middle;
  transition: all 1.5s var(--transition);
}

.product-item:hover .product-img{
  transform: scale(1.1);
}
  

.product-img.hover{
  position: absolute;
  top: 0;
  left: 0;
}

.product-actions{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  column-gap: 0.5rem;
  transition: all 0.2s var(--transition);
}

.action-btn{
  width: 40px;
  height: 40px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--first-color)40%, var(--input-color)60%);
  border: 1px solid var(--border-color)80%;
  color: var(--text-color);
  font-size: var(--small-font-size);
  position: relative;
}


.action-btn::before,
.action-btn::after{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
}

.action-btn::before{
  content: '';
  top: -2px;
  border: 0.5rem solid transparent;
  border-top-color: var(--first-color);
}
.action-btn::after{
  content: attr(aria-label);
  bottom: 100%;
  background-color: var(--first-color);
  color: var(--body-backgroundcolor);
  font-size: var(--tiny-font-size);
  white-space: nowrap;
  padding-inline: 0.625rem;
  border-radius: 0.25rem;
  line-height: 2.58;
}

.product-badge{
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  background-color: var(--first-color);
  color: var(--body-backgroundcolor);
  padding: 0.25rem 0.625rem;
  border-radius: 2.5rem;
  font-size: var(--tiny-font-size);
}
.product-badge.light-pink{
  background-color: hsl(341, 100%, 73%);
}
.product-badge.light-green{
  background-color: hsl(155, 20%, 67%);
}
.product-badge.light-orange{
  background-color: hsl(24, 100%, 73%);
}
.product-badge.light-blue{
  background-color: hsl(202, 53%, 76%);
}
.product-content {
  padding: 0 1.25rem 1.125rem;
  position: relative;
}
.product-category{
  color: var(--second-text-color);
  font-size: var(--smaller-font-size);
}
.product-title{
  font-size: var(--normal-font-size);
  margin-block: 0.75rem 0.5rem;
}
.product-rating{
  font-size: var(--smaller-font-size);
  color: var(--rate);
  margin-bottom: 0.75rem;
}
.product-price .new-price{
  font-size: var(--large-font-size);
}
.cart-btn{
  position: absolute;
  bottom: 1.6rem;
  right: 1.25rem;
}

/* active tab*/
.tab-btn.active-tab{
  color: var(--first-color);
  background-color: var(--second-color);}
  
  .tab-item:not(.active-tab){
    display: none;
  }
  
  /*product hover*/
.product-img.hover,
.product-actions,
.action-btn::before,
.action-btn::after,
.product-item:hover .product-img.default{
  opacity: 0;
}
.product-item:hover .product-img.hover,
.product-item:hover .product-actions,
.action-btn:hover::before,
.action-btn:hover::after{
  opacity: 1;
}
.product-item:hover{
  box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
}

.action-btn:hover::after,
.action-btn:hover::before{
  transform: translateX(-50%) translateY(-0.5rem);
}

.action-btn:hover{
  background-color: var(--first-color);
  border-color: var(--first-color);
  color: var(--body-backgroundcolor);
}



/*------------Deals----------*/
.deals-container{
  grid-template-columns: repeat(2, 1fr);
}

.deals-item:nth-child(1){
  background-image: url(Imgs/deals-1.jpg);
}
.deals-item:nth-child(2){
  background-image: url(Imgs/deals-2.png);
}

.deals-item{
  padding: 3rem;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}
.deals-brand{
  color: var(--first-color);
  font-size: var(--h3-font-size);
  margin-bottom: 0.25rem;
}

.deals-category{
  font-family: var(--second-font);
  font-size: var(--small-font-size);
}

.deals-title{
  max-width: 240px;
  font-size: var(--large-font-size);
  font-weight: var(--weight-400);
  line-height: 1.3;
}

.deals-price .new-price,
.deals-price .old-price{
  font-size: var(--large-font-size);
}

.deals-price .new-price{
  color: hsl(352, 100%, 60%);
}

.deals-countdown-text{
  margin-bottom: 0.25rem;
}

.countdown{
  display: flex;
  column-gap: 1.5rem;
}

.countdown-amount{
  position: relative;
}

.countdown-amount::after{
  content: ':';
  color: var(--text-color);
  font-size: var(--large-font-size);
  position: absolute;
  right: -25%;
  top: 20%;
}

.countdown-period{
  background-color: var(--first-color);
  color: var(--body-backgroundcolor);
  width: 60px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 0.25rem;
  font-size: var(--large-font-size);
  font-weight: var(--weight-600);
  margin-bottom: 0.5rem;
}

.unit{
  font-size: var(--small-font-size);
  text-align: center;
  display: block;
}

.deals-btn .btn{
  background-color: transparent;
  color: var(--first-color);
}
/*-----------countdown update-----*/

/* - - - - - new arrivals-------*/
.new-arrivals{
  overflow: hidden;
  background-color: var(--section-background-color);
}
/* - - - - -showcase - - - - - - - */
.showcase-container{
  grid-template-columns: repeat(4, 1fr);
}
.showcase-wrapper .section-title{
  font-size: var(--normal-font-size);
  border-bottom: 1px solid (var(--border-color)80%);
  padding-bottom: 0.75rem;
  margin-bottom: 2rem;
  position: relative;
}

.showcase-wrapper .section-title::before{
  content: '';
  position: absolute;
  left: 0;
  bottom: -1.3px;
  width: 50px;
  height: 2px;
  background-color: var(--first-color);
}
.showcase-item{
  display: flex;
  align-items: center;
  column-gap: 1.5rem;
}

.showcase-item:not(:last-child){
  margin-bottom: 1.5rem;
}

.showcase-img{
  width: 86px;
}

.showcase-content{
  width: calc(100% - 110px);
}

.showcase-title{
  font-size: var(--small-font-size);
  font-weight: var(--weight-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.5rem;
}
/* - - - - - newsletter - - - - - */
.newsletter{
  background-color: color-mix(in srgb, var(--section-background-color)80%,var(--border-color)) ;
  
}
.home-newsletter{
  margin-top: 2rem;
}

.newsletter-container{
  grid-template-columns: repeat(2, 3.5fr) 5fr;
  align-items: center;
  column-gap: 3rem;
}

.newsletter-icon {
  width: 40px;
  height: 40px;
  background-color: var(--text-color);
  /* The color you want */
  mask: url('Imgs/email.svg') no-repeat center / contain;
  -webkit-mask: url('Imgs/email.svg') no-repeat center / contain;
}
.newsletter-title{
  column-gap: 1rem;
  font-size: var(--large-font-size);
}
.newsletter-discription{
  color: color-mix(in srgb, var(--second-text-color), var(--text-color)) ;
  font-family: var(--second-font);
  font-size: var(--small-font-size);
  font-weight: var(--weight-600);
}
.newsletter-form{
  display: flex;
}
.newsletter-input,
.newsletter-btn{
  font-size: var(--small-font-size);
}
.newsletter-input{
  background-color: var(--body-backgroundcolor);
  padding-inline: 1.25rem;
  width: 100%;
  height: 48px;
  border-radius: 0.25rem 0 0 0.25rem;
}
.newsletter-btn{
  background-color: var(--text-color);
  color: var(--body-backgroundcolor);
  padding-inline: 2rem;
  border-radius: 0 0.25rem 0.25rem 0;
  font-family: var(--second-font);
  font-weight: var(--weight-500);
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s var(--transition);
}
.newsletter-btn:hover{
  background-color: color-mix(in srgb, var(--first-color), var(--text-color));
}
/* ---------footer--------- */
footer{
  background-color: var(--section-background-color);
}
.footer-container{
  grid-template-columns: 4.5fr repeat(2, 2fr) 3.5fr;
  padding-block: 2.5rem;
}
.footer-subtitle{
  color: var(--text-color);
  font-size: var(--small-font-size);
 margin-block: 1.25rem 0.625rem;
}

.footer-discription{
  margin-inline: 0.25rem;
}
.footer-logo-img{
  width: 120px;
 
  height: 35px;
  background-color: var(--text-color); /* The color you want */
  mask: url('Imgs/logo.svg') no-repeat center / contain;
  -webkit-mask: url('Imgs/logo.svg') no-repeat center / contain;


}
.footer-discription span{
  font-weight: var(--weight-600);
}
.footer-social .footer-subtitle{
  margin-top: 1.875rem;
}
.footer-social-links{
  column-gap: 0.25rem;
}
.footer-social-icon{
  width: 20px;
  opacity: 0.7;
  color: var(--second-text-color);
  transition: 0.4s all ease-in-out;
}
.footer-title{
  font-size: var(--large-font-size);
  margin-block: 1rem 1.25rem;
}
.footer-link{
  color: color-mix(in srgb, var(--second-text-color), var(--text-color));
  font-size: var(--small-font-size);
  margin-bottom: 1rem;
  display: block;
  transition: all 0.3s var(--transition );
}
.footer-link:hover{
  color: var(--first-color);
  margin-left: 0.25rem;
}
.footer-bottom{
  display: flex;
  justify-content: space-between;
  padding-block: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--border-color), var(--second-text-color));
}
.payment-img{
  width: 80%;
}
.copyright,
.designer{
  color: color-mix(in srgb, var(--text-color), var(--second-text-color));
  font-size: var(--small-font-size);
}
/* - - - - - - _breadcrumbs - - - - */
.breadcrumb{
  background-color: var(--body-backgroundcolor);
  padding-block: 1.5rem;
}
.breadcrumb-list{
  column-gap: 0.75rem;
}
.breadcrumb-link{
  color: var(--text-color);
  font-size: var(--small-font-size);
}
/* - - - - - shop---------------*/
.total-products{
  margin-bottom: 2.5rem;
}
.total-products span{
  color: var(--first-color);
  font-weight: var(--weight-600);
}
.pagination{
  display: flex;
  column-gap: 0.625rem;
  margin-top: 2.75rem;
}
.pagination-link{
  display: inline-block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 0.25rem;
  color: color-mix(in srgb, var(--second-text-color), var(--text-color));
  font-size: var(--small-font-size);
  font-weight: var(--weight-700);
  transition: all 0.15s var(--transition);
}
.pagination-link.active,
.pagination-link:hover{
  background-color: var(--first-color);
  color: var(--body-backgroundcolor);
}
.pagination-link.icon{
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}
/* - - - - - - - details - - - - */
.details-container{
  grid-template-columns: 5.5fr 6.5fr;
}
.details-img{
  margin-bottom: 0.5rem;
}
.details-small-imgs{
  grid-template-columns: repeat(4, 1fr);
  column-gap: 0.625rem;
}
.details-small-img{
  cursor: pointer;
}
.details-title{
  font-size: var(--h2-font-size);
}
.details-brand{
  font-size: var(--small-font-size);
  margin-block: 1rem;
}
.details-brand span{
  color: var(--first-color);
}
.details-price{
  border-top: 1px solid color-mix(in srgb, var(--border-color),var(--text-color));
  border-bottom: 1px solid color-mix(in srgb, var(--border-color),var(--text-color));
  padding-block: 1rem;
  column-gap: 1rem;
}
.details-price .new-price{
  font-size: var(--h2-font-size);
}
.details-price .old-price{
  font-size: var(--normal-font-size);
  font-weight: var(--weight-500);
}
.short-discription{
  margin-block: 1rem 2rem;
}

.list-item,
.meta-list{
  font-size: var(--small-font-size);
  margin-bottom: 0.75rem;
}

.details-color-title,
.details-size-title{
  font-size: var(--small-font-size);
  font-weight: var(--weight-600);
}
.color-list,
.size-list{
  display: flex;
  column-gap: 0.25rem;
}
.color-link{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: block;
}
.details-color,
.details-size{
  column-gap: 0.75rem;
}
.details-color{
  margin-block: 2rem 1.5rem;
}
.details-size{
  margin-bottom: 2.5rem;
}
.size-link{
  border: 1px solid color-mix(in srgb, currentColor, var(--border-color));
  padding: 0.375rem 0.75rem 0.5rem;
  color: var(--text-color);
  font-size: var(--small-font-size);
}
.size-active{
  background-color: var(--first-color);
  color: var(--body-backgroundcolor);
}
.details-action{
  display: flex;
  column-gap: 0.375rem;
  margin-bottom: 3.25rem;
}
.quantity,
.details-action-btn{
  border: 1px solid color-mix(in srgb ,var(--border-color)80%, var(--second-text-color));
  font-size: var(--small-font-size);
}
.quantity{
  max-width: 80px;
  padding-block: 0.5rem;
  padding-inline: 1rem 0.5rem;
  border-radius: 0.25rem;
}
.details-action-btn{
  color: var(--text-color);
  line-height: 40px;
  padding-inline: 0.75rem;
}
.details-meta{
  border-top: 1px solid color-mix(in srgb, var(--second-text-color), var(--border-color));
  padding-top: 1rem;
}
/* - - - - - Details info & Reviews--*/
 #bill{
   background-color: var(--section-background-color);
 }
.detail-tabs{
  display: flex;
  column-gap: 1.75rem;
  margin-bottom: 3rem;
}
.detail-tab{
  font-family: var(--second-font);
  font-size: var(--large-font-size);
  font-weight: var(--weight-600);
  cursor: pointer;
}
.detail-tab.active-tab{
  color: var(--first-color);
}
 
.details-tab-content:not(.active-tab){
  display: none;
}
.info-table tr th,
.info-table tr td{
  border: 2px solid color-mix(in srgb, var(--border-color), var(--second-text-color));
  padding: 0.625rem 1.25rem;
}
.info-table tr th{
  font-weight: var(--weight-500);
  text-align: left;
}
.info-table tr td{
  color: color-mix(in srgb, var(--text-color), var(--second-text-color)60%);
}
.reviews-container{
  padding-bottom: 3rem;
  row-gap: 1.25rem;
}
.review-single{
  border-bottom: 1px solid color-mix(in srgb, var(--border-color), var(--se));
  padding-bottom: 1.25rem;
  display: flex;
  align-items: flex-start;
  column-gap: 1.5rem;
}
.review-single:last-child{
  padding-bottom: 3rem;
}
.review-img{
  width: 70px;
  border-radius: 50%;
  margin-bottom: 0.5rem;
}
.review-title{
  font-size: var(--tiny-font-size);
}
.review-data{
  width: calc(100% - 94px);
}
.review-description{
  margin-bottom: 0.5rem;
}
.review-rating{
  color: var(--rate);
  margin-bottom: 0.25rem;
}
.review-rating,
.review-date{
  font-size: var(--small-font-size);
}
.review-form-title{
  font-size: var(--large-font-size);
  margin-bottom: 1rem;
}
.rate-product{
  margin-bottom: 2rem;
}
/* - - - - - cart----------_*/
.table-container{
  overflow-x: auto;
}
.table{
  table-layout: fixed;
  margin-bottom: 2rem;
}
.table tr{
  border-top: 1px solid color-mix(in srgb, var(--border-color),var(--second-text-color));
}
.table tr:last-child{
  border-bottom: 1px solid color-mix(in srgb, var(--border-color),var(--second-text-color));
} 
.table tr th:nth-child(1),
.table tr td:nth-child(1){
  width: 216px;
}
.table tr th:nth-child(2),
.table tr td:nth-child(2){
  width: 400px;
}
.table tr th:nth-child(3),
.table tr td:nth-child(3){
  width: 108px;
}
.table tr th:nth-child(4),
.table tr td:nth-child(4){
  width: 220px;
}
.table tr th:nth-child(5),
.table tr td:nth-child(5){
  width: 200px;
}
.table tr th:nth-child(6),
.table tr td:nth-child(6){
  width: 152px;
}
.table-img{
  width: 80px;
}
.table tr th,
.table tr td{
  padding: 0.5rem;
  text-align: center;
}
.table-title,
.table-description,
.table-price,
.table-subtotal,
.table-trash,
.table-stock{
  font-size: var(--small-font-size);
}
.table-title,
.table-stock{
  color: var(--first-color);
}
.table-description{
  max-width: 250px;
  margin-inline: auto;
}
.table-trash{
  color: color-mix(in srgb, var(--text-color), var(--first-color));
  
}
.cart-actions{
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.divider{
  position: relative;
  text-align: center;
  margin-block: 3rem;
}
.divider::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  border-top: 2px solid color-mix(in srgb, var(--border-color),var(--second-text-color));
}
.divider i{
  color: var(--second-text-color);
  background-color: var(--body-backgroundcolor);
  font-size: 1.25rem;
  padding-inline: 1.25rem;
  position: relative;
  z-index: 10;
}
.cart-group{
  grid-template-columns: repeat(2, 1fr);
  align-items: flex-start;
}
.cart-shipping.section-title,
.cart-coupon.section-title,
.cart-total.section-title{
  font-size: var(--large-font-size);
  margin-bottom: 1rem;
}
.cart-coupon{
  margin-top: 3rem;
}
.coupon-form.form-group{
  align-items: center;
}
.cart-total{
  border: 1px solid color-mix(in srgb, var(--text-color), var(--second-text-color));
  border-radius: 0.25rem;
  padding: 1.75rem;
}
.cart-total-table{
  margin-bottom: 1rem;
}
.cart-total-table tr td{
 border: 1px solid color-mix(in srgb, var(--border-color), var(--text-color));
 padding: 0.75rem 0.5rem;
 width: 50%;
 border-radius: 5px;
}
.cart-total-title{
  font-size: var(--small-font-size);
}

.cart-total-price{
  color: var(--first-color);
  font-weight: var(--weight-700);
}
.cart-total.btn{
  display: inline-flex;
}

/* - - - - - login/register------*/
.login-register-container{
  grid-template-columns: repeat(2, 1fr);
  align-items: flex-start;
}
.login,
.register{
  border: 1px solid color-mix(in srgb, var(--border-color), var(--text-color));
  padding: 2rem;
  border-radius: 0.5rem;
}
.goToCreate,
.goTologin{
 font-size: var(--smaller-font-size);
 color:color-mix(in srgb, var(--second-text-color)70%, var(--text-color)) ;
 transition: 0.4s all ease;
 cursor: pointer;
}
.goToCreate:hover,
.goTologin:hover{
  color: color-mix(in srgb, var(--second-text-color)30%, var(--text-color)) ;
}

.register{
  display: none;
}
.passWrong{
  display: none;
}
.redB{
  border: 2px solid tomato;
}
.greenB{
  border: 2px solid var(--first-color);
}
/*----------- checkout-------- */
.checkout-container{
  grid-template-columns: repeat(2, 1fr);
}
.checkout-group:nth-child(2){
  border: 1px solid color-mix(in srgb, var(--text-color), var(--first-color)) ;
  padding: 2rem;
  border-radius: 0.5rem;
}
.order-img{
  width: 80px;
}
.checkout-group.section-title{
  font-style: var(--large-font-size);
}
.checkout-title{
  font-size: var(--small-font-size);
}
.order-table tr th,
.order-table tr td{
  border: 1px solid color-mix(in srgb, var(--border-color), var(--text-color));
  padding: 0.5rem;
  text-align: center;
}
.order-table tr th{
  color: var(--title-color);
  font-size: var(--small-font-size);
}
.table-quantity,
.order-subtitle{
  font-size: var(--small-font-size);
}
.order-grand-total{
  color: var(--first-color);
  font-size: var(--large-font-size);
  font-weight: var(--weight-700);
}
.payment-methods{
  margin-block: 2.5rem 2.75rem;
}
.payment-title{
  margin-bottom: 1.5rem;
}
.payment-option{
  margin-bottom: 1rem;
}
.payment-input{
  accent-color: var(--first-color);
}
.payment-label{
  font-size: var(--small-font-size);
}
/* - - - - - - compare - - - - - - - */
.compare-table tr th,
.compare-table tr td{
  padding: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--border-color), var(--text-color));
}
.compare-table tr th{
  color: color-mix(in srgb,var(--text-color), var(--second-text-color));
  font-size: var(--small-font-size);
}
.compare-table tr td{
  text-align: center;
}
.compare-colors{
  justify-content: center;
}
.table-weight,
.table-dimensions{
  font-size: var(--small-font-size);
}
/* - - - - - - -Account - - - -- - - */

.cardProfile{
  width: 100%;
  background: var(--section-background-color);
  padding: 40px;
  border-radius: 15px;
  text-align: center;
  color: var(--text-color);
  border: 1px solid var(--text-color);
}
.cardProfile h1{
  font-weight: var(--weight-500);
  color: var(--text-color);
}
.cardProfile img{
  height: 180px;
  width: 180px;
  border-radius: 50%;
  margin-top: 40px;
  margin-bottom: 30px;
  border: 2px solid currentColor;
}
.profileIcon{
  
  display: none;
  justify-content: center;
  align-items:center;
}
.profileIconImg{
  object-fit: cover;
  display: none;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  
  margin-top: 20px;
  margin-bottom: 20px;
  border: 2px solid var(--text-color);
}
.cardProfile label{
  display: block;
  width: 200px;
  color: var(--body-backgroundcolor);
  padding: 12px;
  margin: 10px auto;
  cursor: pointer;
  border-radius: 5px;
  background: var(--first-color);
  object-fit: contain;
}
.cardProfile input{
  display: none;
}
.accounts{
  display: none;
}
.accounts-container{
  grid-template-columns: 4fr 8fr;
}
.tab-content:not(.active-tab){
  display: none;
}
.account-tabs{
  border: 1px solid color-mix(in srgb, var(--border-color), var(--text-color));;
  border-radius: 0.25rem;
}
.account-tab{
  padding: 1rem 2rem;
  color: var(--text-color);
  font-size: var(--small-font-size);
  display: flex;
  align-items: center;
  column-gap: 0.625rem;
  cursor: pointer;
}
.account-tab.active-tab{
  background-color: var(--first-color);
  color: var(--body-backgroundcolor);
}
.account-tab:not(:last-child){
  border-bottom: 1px solid color-mix(in srgb, var(--border-color), var(--text-color));
}
.tab-content:not(.active-tab){
  display: none;
}
.tab-content{
  border: 1px solid color-mix(in srgb, var(--border-color), var(--text-color));
}
.tab-header{
  background-color: var(--section-background-color);
  border-bottom: 1px solid color-mix(in srgb, var(--border-color), var(--text-color));
  padding: 1rem;
  font-size: var(--small-font-size);
}
.tab-body{
  padding: 1rem;
}
.placed-order-table tr th{
 color: var(--text-color);
 text-align: left;
}
.placed-order-table tr th,
.placed-order-table tr td{
  border: 1px solid color-mix(in srgb, var(--border-color), var(--text-color));
  padding: 0.5rem;
  font-size: var(--small-font-size);
}
.view-order,
.edit{
  color: var(--first-color);
}
.address{
  font-style: normal;
  font-style: var(--small-font-size);
  line-height: 1.5rem;
}
.city{
  margin-bottom: 0.25rem;
}
.edit{
  font-size: var(--small-font-size);
}
/* - - - - - -- edit address--- - - */
.editBtns{
  display: flex;
  justify-content: space-between;
}
.cancelAdd {
  display: inline-block;
  background-color: var(--text-color);
  border: 2px solid var(--text-color);
  color: var(--body-backgroundcolor);
  padding-inline: 1.75rem;
  height: 45px;
  line-height: 45px;
  border-radius: 0.25rem;
  font-family: var(--second-font);
  font-size: var(--small-font-size);
  font-weight: var(--weight-700);
  transition: all 0.4s var(--transition);
}

.cancelAdd:hover {
  background-color: transparent;
  color: var(--first-color);
}
/*Top up btn

*/
.topup{
  position: fixed;
  display: none;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
/*  z-index: 99999;*/
  background-color: var(--first-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all ease-in-out 0.4s;
  color: black;
  border: 1px solid currentColor;
}
#felo{
  font-size: 24px;
  color: var(--body-backgroundcolor);
  line-height: 0;
}

.topup:hover {
  background-color: color-mix(in srgb, var(--first-color), transparent 30%);
  
}
/*Dark mode */
.darkO{
  color: var(--text-color);
  border: 2px solid currentColor;
  padding: 4px;
  background: transparent;
  cursor: pointer;
  border-radius: 5px;
  width: 30px;
  height: 30px;
  display: none;
}
.lighto{
  color: var(--text-color);
  border: 2px solid currentColor;
  margin-top: 2rem;
  padding: 4px;
  background: transparent;
  cursor: pointer;
  border-radius: 5px;
  width: 30px;
  height: 30px;
}
.darkmode {
  --text-color: #fff;
  --body-backgroundcolor: #151716;
  --section-background-color: #3A403E;
  /*
  #151716 main background 
#b1b2ae footer background
#4a534e radio 
#fff the btns back and the text color 
/* CSS HEX 
 --pickled-bluewood: #263B4D;
--amaranth: #E22D4C;
--black-haze: #EEF0EF;
--golden-grass: #DAA02F;
--hit-gray: #96A6AA;
--keppel: #38B2AD;
--tiara: #C1CECE;
--eunry: #D19E98;
--pavlova: #D8C29D;
--cavern-pink: #E3C7C1;



  */
}
/*------- new cart - - - - - - - */
.newCart{
  background-color: var(--body-backgroundcolor);
}
.cartContainer{
  padding : 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 10px solid color-mix(in srgb, var(--second-text-color), var(--body-backgroundcolor));
  border-bottom: 7px solid color-mix(in srgb, var(--second-text-color), var(--body-backgroundcolor));
}
.cartContainer:not(:first-child){
  border-top: 3px solid color-mix(in srgb, var(--second-text-color), var(--body-backgroundcolor));
}
.item-img{
  width: 140px;
}
.cardTitles{
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-left: 4px;
}
.someDetails{
  display: flex;
  gap: 1rem;
}
.newCartprice{
  font-size: var(--large-font-size);
  font-weight: var(--weight-700);
  color: var(--text-color);
}
.itemTitle{
 font-size: var(--small-font-size);
 color: color-mix(in srgb, var(--second-text-color), var(--text-color)) ;
 font-weight: var(--weight-400);
}
.sprite{
  color: color-mix(in srgb, var(--second-text-color), var(--body-backgroundcolor));
  font-weight: var(--weight-400);
}
.itemSize,
.itemColor,
.itemAmount
{
 font-size: var(--small-font-size);
 color: color-mix(in srgb,var(--second-text-color)60%, var(--text-color));
 font-weight: var(--weight-600)
}

.item-remove{
  color:var(--first-color);

}
.lefto,
.righto {
  
  font-size: var(--normal-font-size);
  font-weight: var(--weight-600);
  color: color-mix(in srgb,var(--second-text-color)20%, var(--text-color));
  margin-top: 4px;
}
/*-------preloader - - - - - - - */
#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 5px solid #ffffff;
  border-color: var(--first-color) transparent var(--first-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.load{
  background-color: var(--body-backgroundcolor);
  position: fixed;
  height: 100vh;
  width: 100%;
  z-index: 100;
}
/*-------------Search ---------------*/
.addd{
  display: flex;
  gap: 10%;
  align-items: center;
}
.heart{
  font-size: 20px;
  color: var(--first-color);
  transition: 0.4s all ease-in-out;
}
.heart:hover{
  color: var(--second-text-color);
}
.filtration{
  position: relative;
  margin-bottom: 2.75rem;
}
.filterF button{
  position: absolute;
  right: 0.75rem;
  color: var(--text-color);
}
.addbtnn button{
  color: var(--text-color);
}
.submit button{
  display: inline-block;
  background-color: hsl(341, 100%, 73%);;
  border: 2px solid hsl(341, 100%, 73%);;
  color: var(--body-backgroundcolor);
  padding-inline: 1.75rem;
  height: 49px;
  width: 100%;
  line-height: 49px;
  border-radius: 0.25rem;
  font-family: var(--second-font);
  font-size: var(--small-font-size);
  font-weight: var(--weight-700);
  transition: all 0.4s var(--transition);
}

.submit button:hover{
  background-color: transparent;
  color: hsl(341, 100%, 73%);

}

.fltf{
  margin-top: 20%;
  width: 80%;
  border: 2px solid currentColor;
  border-radius: 5px;
  background-color: var(--body-backgroundcolor);
  display: none;
}
.filtor{
  display: flex;
  flex-direction: column;
  
}

.fltfItems{
  display: flex;
  flex-direction: column;
  color: black;
  gap: 10px;
  margin-bottom: 30px;
  padding: 0.75rem;
}
.fltfprofileIconName{
  font-weight: var(--weight-600);
  font-size: var(--large-font-size);
  
}
.fltfExit{
  color: color-mix(in srgb,var(--second-text-color)30%, var(--text-color));
  font-weight: var(--weight-600);
  transition: 0.4s all ease-in-out ;
  font-size: 20px;
}
.fltfExit:hover{
  color: tomato;
  font-weight: var(--weight-700);
}
.fltfTitles{
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.fltrS{
  color: color-mix(in srgb,var(--second-text-color)20%, var(--text-color));
  font-size: var(--normal-font-size);
  font-weight: var(--weight-500);
  margin-bottom: 10px;
}
.fltfBtns{
  display: flex;
  justify-content: space-between;
margin-bottom :5px;
padding: 5px;
}
.itemO select{
  margin-bottom: 10px;
  padding: 5px;
  color: color-mix(in srgb,var(--second-text-color)50%, var(--text-color));
  width: 100%;
}

.cancelBtn {
  display: inline-block;
  background-color: var(--text-color);
  border: 2px solid var(--text-color);
  color: var(--body-backgroundcolor);
  padding-inline: 1.75rem;
  height: 49px;
  line-height: 49px;
  border-radius: 0.25rem;
  font-family: var(--second-font);
  font-size: var(--small-font-size);
  font-weight: var(--weight-700);
  transition: all 0.4s var(--transition);
}

.cancelBtn:hover {
  background-color: transparent;
  color: var(--first-color);
}
.countResults {
  padding: 10px;
  font-size: var(--large-font-size);
  font-weight: var(--weight-500);
  color: var(--text-color);
}
.countResults b{
  color: var(--first-color);
}
/* - - - - - media quires- - - - - */
@media screen and (min-width :2000px) {
    .search-btn{
        width: auto;
    }
}

@media screen and (min-width: 1441px){
    .container{
        max-width: 100%;
        flex-grow: 2;
    }
     .header-search {
    width: 60%;
}
.search-btn{
    width: 3%;
}
}
@media screen and (max-width: 1440px){
 .container{
   max-width: 100%;
 }
 .products-container,
 .showcase-container{
   grid-template-columns: repeat(3, 1fr);
 }
 .accounts-container{
   grid-template-columns: 3fr 9fr;
 }
 .header-search {
    width: 60%;
}
.search-btn{
    width: 4%;
}
}
@media screen and (max-width: 1439px){
   .header-search {
    width: 520px;
} 
.search-btn{
    width: 5%;
}
}
@media screen and (max-width: 1301px){
   .header-search {
    width: 460px;
} 
.search-btn{
    width: 6%;
}
}
@media screen and (max-width: 1200px){
    .header-search {
    width: 380px;
}
}
@media screen and (max-width: 1051px){
   .header-search {
    width: 340px;
}
}
@media screen and (max-width: 1050px){
    .header-search {
    width: 325px;
}

}


@media screen and (max-width: 1023px){
 .container{
  max-width: 100%;
 }
.header-top{
  display: none;
}

.nav{
  height: calc(var(--header-height) + 1.5rem);
}
.nav-logo-img{
  width: 116px;
}
.nav-menu{
  position: fixed;
  right: -100%;
  top: 0;
  max-width: 400px;
  width: 100%;
  height: 100%;
  padding: 1.25rem 2rem;
  background-color: var(--body-backgroundcolor);
  z-index: 100;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 2rem;
  box-shadow: 0 0 15px hsla(0, 0%, 0%, 0.1);
  transition: all 0.25s var(--transition);
}
.show-menu{
  right: 0;
}
.nav-list{
  order: 1;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 1.5rem;
}
.nav-link{
  font-size: var(--large-font-size);
}
.header-search .form-input{
  border-color: var(--first-color);
}
.nav-menu-top,
.nav-toggle,
.topup,
.darkO,
.profileIcon{
  display: flex;
}
.nav-menu-top{
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1.25rem;
}
.nav-menu-logo{
  width: 100px;
  height: 30px;
  background-color: var(--text-color); /* The color you want */
  mask: url('Imgs/logo.svg') no-repeat center / contain;
  -webkit-mask: url('Imgs/logo.svg') no-repeat center / contain;


}

.nav-close{
  font-size: var(--h2-font-size);
  line-height: 1rem;
}
.header-action-btn div{
  width: 21px;
  height: 21px;
}
.home-contianer{
  grid-template-columns: 5.5fr 6.5fr;
}
.countdown{
  column-gap: 1rem;
}
.countdown-period{
  width: 36px;
  height: 36px;
  line-height: 36px;
}
.countdown-amount::after{
  right: -30%;
  top: 14%;
}
.swiper-button-next,
.swiper-button-prev{
  top: -28px;
  width: 26px;
  height: 26px;
}
.swiper-button-prev{
  right: 36px;
}
.account-tab{
  padding: 0.75rem 1rem;
}
.checkout-group:nth-child(2){
  padding: 1.5rem;
}
.details-brand{
  margin-block: 0.75rem;
}
.details-price{
  padding-block: 0.75rem;
}
.short-discription{
  margin-bottom: 1.5rem;
}
.details-color{
  margin-block: 1.75rem 1.25rem;
}
.details-size{
  margin-bottom: 2.25rem;
}
.color-link{
  width: 22px;
  height: 22px;
}
.size-link{
  padding: 0.375rem 0.625rem;
}
.details-action{
  margin-bottom: 2.75rem;
}
}
@media screen and (max-width: 992px){
 .container{
   max-width: 100%;
 }
 .home-contianer,
 .deals-container,
 .checkout-container,
 .newsletter-container,
 .accounts-container,
 .cart-group{
   grid-template-columns: 1fr;
 }
 .cart-group{
   row-gap: 2.75rem;
 }
.home-img{
  justify-self: center;
}
.btn{
  height: 45px;
  line-height: 45px;
}
.btn-md{
  height: 42px;
  line-height: 39px;
}
.btn-sm{
  height: 38px;
  line-height: 35px;
}
 .newsletter-description{
   display: none;
 }
 .products-container,
 .showcase-container,
 .footer-container{
   grid-template-columns: repeat(2, 1fr);
 }
 .login,
 .register{
   padding: 1.25rem;
 }
.table tr th:nth-child(1),
.table tr td:nth-child(1){
  width: 140px;
}
.table tr th:nth-child(2),
.table tr td:nth-child(2){
  width: 330px;
}
.table tr th:nth-child(3),
.table tr td:nth-child(3){
  width: 80px;
}
.table tr th:nth-child(4),
.table tr td:nth-child(4){
  width: 160px;
}
.table tr th:nth-child(5),
.table tr td:nth-child(5){
  width: 160px;
}
.table tr th:nth-child(6),
.table tr td:nth-child(6){
  width: 100px;
}
}
@media screen and (max-width: 750px){
  .container{
    max-width: 100%;
  }
  .products-container,
  .showcase-container,
  .footer-container,
  .login-register-container,
  .details-container{
    grid-template-columns: 100%;
  }
  .tab-header,
  .tab-body{
    padding: 0.75rem;
  }
  .compare-table tr td{
    display: block;
  }
 .product-img{
   width: 100%;
 }
}
@media screen and (max-width: 576px){
 .category-item{
   padding-bottom: 1rem;
 }
 .category-img{
   margin-bottom: 1rem;
 }
 .deals-item,
 .checkout-group:nth-child(2){
   padding: 1.25rem;
 }
 .pagination{
   column-gap: 0.5rem;
   margin-top: 2.5rem;
 }
 .pagination-link{
   width: 30px;
   height: 30px;
   line-height: 30px;
 }
 /*.placed-order-table th,
 .order-table tr th{
   display: none;
 }
 .placed-order-table tr td,
 .order-table tr td{
   display: block;
 }
 */
 .form-group{
   grid-template-columns: 1fr;
 }
 .cart-total{
   padding: 1.25rem;
 }
 .payment-methods{
   margin-block: 2.25rem 2.5rem;
 }
 .detail-tabs{
   column-gap: 1.25rem;
   margin-bottom: 2.5rem;
 }
 .review-single{
   column-gap: 1rem;
 }
 .footer-title{
   margin-top: 0.25rem;
 }
 .footer-bottom{
   flex-direction: column;
   align-items: center;
 }
}
@media screen and (max-width: 350px){
 .action-btn{
   width: 36px;
   height: 36px;
   line-height: 38px;
 }
 .cart-btn{
   bottom: 1.4rem;
   right: 1.25rem;
 }
 .showcase-item{
   column-gap: 1rem;
 }
 .showcase-img{
   width: 70px;
 }
 .showcase-content{
   width: calc(100% - 86px);
 }
 .swiper-button-next,
 .swiper-button-prev{
   display: none;
 }
 .compare-table tr th,
 .cart-total-table tr td{
   display: block;
   width: 100%;
 }
}