/* ===================== start lib ===================== */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;700&family=Rubik:wght@300..900&family=Aref+Ruqaa:wght@400;700&family=El+Messiri:wght@400;700&family=Tajawal:wght@400;700&family=Rubik:wght@300;700&family=Vazirmatn:wght@300;700&display=swap');
.overlay{position: absolute; display: block; width: 100%; height: 100%; top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.5); z-index: 2; cursor: auto; }
h1 , h2 , h3 , h4, div {font-family: 'Rubik', sans-serif;font-weight: bold;color: #2c3e50;}
p , span , input , button{font-family: "Rubik", sans-serif !important;}
a , a:hover{text-decoration: none;color: unset;}
td{vertical-align: middle !important;}
.form-margin{
  margin: 15px auto;
}
.myicons{
  color:var(--mycolor) ;
  font-size: 25px;
  padding: 10px;
  margin-bottom: 3px;
}
footer p {font-size: 12px !important;}
.checkout-btn:hover{color: var(--mycolor);background-color: #fff !important;}
.navbar-brand{color: #2c3e50 !important;}
select , option {text-align: left;color: #000 !important;}
.input-group-text , .form-control{color: #000 !important;}
.info-form .form-control{color: #000 !important;}
.form-control:focus{color: #fff;}
.sec-margin{margin: 70px auto;}
#count{width: 30px;position: absolute;font-size: 12px;top: 14px;right: 15%;height: 30px;background: #f00;color: #fff;border-radius: 50%;text-align: center;padding: 6px 0;}
.mobile-nav{display: none !important;}
.navbar-light .navbar-nav .nav-link {color: rgba(0,0,0,1);}
.mytitle {position: relative;margin: auto; text-align: center;margin-bottom: 5%;}
.underline {text-decoration: none; position: relative; }
.underline:after {
	position: absolute;
	content: '';
	height: 2px;
	bottom: -8px;
	margin: 0 auto;
	left: 0;
	right: 0;
	width: 20%;
	background: var(--mycolor);
}
.htitle{
	text-align: center;
	text-transform: uppercase;
	font-size: 2.5rem;
	font-weight: bolder;
    font-family: 'El Messiri', sans-serif;
}
.divider-custom {
	margin: 0.25rem 0 1.5rem;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
  }

  .divider-custom .divider-custom-line {
	width: 100%;
	max-width: 5rem;
	height: 0.4rem;
	background-color: #2c3e50;
	border-radius: 1rem;
	border-color: #2c3e50 !important;
  }

  .divider-custom .divider-custom-line:first-child {
	margin-left: 1rem !important;
  }

  .divider-custom .divider-custom-line:last-child {
	margin-right: 1rem !important;
  }

  .divider-custom .divider-custom-icon {
	color: #2c3e50 !important;
	font-size: 2rem;
  }

  .divider-custom.divider-light .divider-custom-line {
	background-color: var(--mycolor);
  }

  .divider-custom.divider-light .divider-custom-icon {
	color: var(--mycolor) !important;
  }
  .title-img{
    width: 50px;
    bottom: 5px;
  position: relative;
  }


/* start card */
.col-card{margin: auto ; width: 90% !important;}
.card{position: relative;width: 100%;height: 260px;overflow: hidden;border: 1px solid #232323;margin: 30px auto;    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;}
.card-img{height: 70%;position: relative;z-index: 5;}
.card-img img{width: 100%;height: 100%;}
.card h3{color :#fff;font-size: 16px;}
.card-desc{background-color: #232323;color: #fff;height: 30%;text-align: center;position: absolute;z-index: 10;padding: 11px 0;bottom: 0;    width: 100%;transition: all ease-in-out 0.5s;}
.card:hover .card-desc {height: 47% !important;}
.card:hover{box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.card:hover .card-desc h3{color :var(--mycolor) !important}
.card-s-c{padding-top: 100px;display: none;transition: all ease-in-out 0.2s;}
.card:hover .card-s-c{ padding-top: 10px;display: block;}
.card-arrow{transition: all ease-in-out 0.2s;}
.card:hover .card-arrow{display: none;}
.input-group{width: 80%;margin: auto;}
.card-added-desc {height: 80%;}
.card-s-c.card-added-SC {display: block;padding-top: 10px;}
.card:hover .add-to-cart-button {bottom: 5%;}
#cart-icon-container{background: #fff;border: 1px solid var(--mycolor);

  box-shadow: var(--mycolor) 0px 3px 8px;
}
div#checkout{background-color: var(--mycolor);}
div#txt-heading{background-color: var(--mycolor); color:#fff}
#shopping-cart{bottom: 15%;height: auto;}
.prod-show{width: 30px; position: absolute;top: 0; right: -20%;    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
z-index: 99;}
.discount{width: 50px;
    position: absolute;
    top: 0%;
    left: 0%;
    border: 1px solid var(--mycolor);
    z-index: 99;
    font-size: 13px;
    background: var(--mycolor);
    border-radius: 50%;
    height: 50px;
    text-align: center;
    padding-top: 4px;}
.card:hover .prod-show { right: 1%;}
.prod-show img , .prod-badge img{width: 100%;}
.prod-badge{width: 30px; position: absolute;top: 1%; left: 1%;    -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
z-index: 99;
position: absolute;
  z-index: 99;
  border-radius: 50% !important;
  background-color: var(--mycolor);
  color: #fff;
  font-size: 10px !important;
  min-width: 30px !important;
  width: 55px;
  padding: 0 !important;
  height: 55px;
  display: -webkit-box !important;
  display: flex !important;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;text-align: center;}
  .card:hover .prod-badge{background: transparent; color: var(--mycolor);}
.add-to-cart-button {  
    background: var(--mycolor);  
    height: 44px;
    border: none;  
    border-radius: 4px;  
    -webkit-box-shadow: 0 3px 13px -2px rgba(0,0,0,.15);  
    box-shadow: 0 3px 13px -2px rgba(0,0,0,.15);  
    color: #ffffff;  
    display: flex; 
    font-size: 13px;
    font-weight: bold; 
    font-family: 'Ubuntu', sans-serif;  
    justify-content: space-around;  
    overflow: hidden;  
    outline: none;  
    padding: 0.7rem;  
    position: absolute;  
    text-transform: uppercase;  
    transition: 0.4s ease;  
    width: 100%;
    margin: auto;
    z-index: 15;
    bottom: -70%;
    text-align: center;
    &:active {  
  
      -webkit-transform: translateY(4px);  
      transform: translateY(4px);  
    }  
    &:hover {  cursor: pointer; }
    &:hover,  &:focus {  
  
      -webkit-transform: translateY(-1px);  
      transform: translateY(-1px);  
    }  
&.added {  
  background: #2fbf30;  
  -webkit-box-shadow: 0 0 0 0.2rem rgba(11, 252, 3, 0.45);  
  box-shadow: 0 0 0 0.2rem rgba(11, 252, 3, 0.45);  
  bottom: 0 ;
.add-to-cart {display: none;}  
.added-to-cart {display: block;}  
.cart-icon {  animation: drop 0.3s forwards;  -webkit-animation: drop 0.3s forwards;  animation-delay: 0.18s;  }
.box-1,  .box-2 {top: 18px;}  
.tick {  animation: grow 0.6s forwards;  -webkit-animation: grow 0.6s forwards;  animation-delay: 0.7s;  }  
}
&.deleted {  
  background: #e6a247; 
  bottom: -25% !important;
.add-to-cart {display: block;}  
.added-to-cart {display: none;}  
.cart-icon {  animation: drop 0.3s forwards;  -webkit-animation: drop 0.3s forwards;  animation-delay: 0.18s;  }
.box-1,  .box-2 {top: 18px;}  
.tick {  animation: grow 0.6s forwards;  -webkit-animation: grow 0.6s forwards;  animation-delay: 0.7s;  }  
}
}  


.add-to-cart,  .added-to-cart {  margin-left: 36px;  }  
.added-to-cart {  display: none;  position: relative;  }  
.add-to-cart-box {  height: 5px;  position: absolute;  top: 0;  width: 5px;  }  
.box-1,  .box-2 {  transition: 0.4s ease;  top: -8px;  }  
.box-1 {  left: 23px;  transform: rotate(45deg);  }  
.box-2 {  left: 32px;  transform: rotate(63deg);  }
.cart-icon {  left: 15px;  position: absolute;  top: 8px;  }  
.tick {  background: #146230;  border-radius: 50%;  position: absolute;  left: 28px;  transform: scale(0);  top: 5px;  z-index: 2;  }  
@-webkit-keyframes grow {  
  0% {-webkit-transform: scale(0);}  
  50% {-webkit-transform: scale(1.2);}  
  100% {-webkit-transform: scale(1);}}  
@keyframes grow {  
  0% {transform: scale(0);}  
  50% {transform: scale(1.2);}  
  100% {transform: scale(1);}  }  
@-webkit-keyframes drop {  
  0% {-webkit-transform: translateY(0px);}  
  100% {-webkit-transform: translateY(1px);}  }  
@keyframes drop {  
  0% {transform: translateY(0px);}  
  100% {transform: translateY(1px);}  }  
/* end card */
/* ===================== end lib ===================== */
/* ===================== start header ===================== */
.special-offer{background-size: cover;height: 55px;background-position-y: 65%;text-align: center;color: #fff;padding-top: 14px;}
.special-offer h4{font-size: 18px ; color: #fff;}
nav{border:1px solid #ddd}
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show > .nav-link , .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover, .nav-link:hover{color: var(--mycolor);}
.nav-link{font-weight: 100;font-family: "Rubik", sans-serif;color: #000; opacity: 1 !important;}
.nav-item{padding: 0 10px;border-inline-end: 1px solid #ddd;}
/* ===================== end header ===================== */
/* ===================== start category ===================== */
.category{position: relative;margin: 50px auto; }
.link-cat{
  padding: 22px 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  margin: 2px;
}
.link-cat:hover{box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.carousel-item{height: 420px;}
.carousel-item img{height: 100%;}
.cat-offer-img {width: 100%; height: 200px;}
.cat-offer-img:first-child { margin-bottom: 20px; }
.cat-offer-img img{width: 100%; height: 100%;}
.category-cat{height: 420px !important;}
.category-cat .navbar-nav {border: 1px solid #ddd; height: 100%;} 
.nav-items{padding: 22px 10px ; font-size: 14px;border-bottom: 1px solid #ddd;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;}
.nav-items:last-child {border: none;}
.nav-items:hover{color: var(--mycolor);box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
/* ===================== end category ===================== */
/* ===================== start shop by cat ===================== */
.shopByCat{margin: 50px auto;}
.col-cat-img img{width: 100%;height: 100%;}
.col-cat-img{position: absolute;top: 47% ;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    margin: auto;
    width: 160px;
    height: 160px;
    right: 0;
    left: 0;}
.col-cat {border : 1px solid #ddd;
position: relative;
height: auto;
/* width: 22%; */
  margin: auto;
  overflow: hidden;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;}
.col-cat:hover {background-color: var(--mycolor);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.col-cat:hover .col-cat-img{top: 35% !important;}
.sectionByStatus{margin: 7rem auto;border-bottom: 1px solid #949da6;padding-bottom: 60px;}
/* ===================== end shop by cat ===================== */
/* ===================== start recentadded ===================== */
.recendAdded{position: relative;}
.recendAdded .row{margin: 0;padding: 0;}
.recend-img {
  margin: 10px auto;
  width: 100%;
  height: 200px;
  overflow: hidden; 
}
  .recend-img img{width: 100%;height: 100%;transition: all 0.3s;}
  .recend-img:hover img{transform: scale(1.1);}
/* ===================== end recentadded ===================== */
/* ===================== start footer ===================== */
.social-img{width: 30px; height: 30px;}
.social-img img{width: 100%; height: 100%;}
/* ===================== end footer ===================== */
/* ===================== start mixup ===================== */
.controls{text-align: center;background: #002233;padding: 10px;}
.controls button{color: var(--mycolor);border: 1px solid var(--mycolor); font-family: "Rubik", sans-serif !important;}
.controls button:hover{color: #023;border: 1px solid var(--mycolor);background-color: var(--mycolor);}
.btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
    box-shadow: unset;
  }
  .btn-check:active + .btn-outline-info, .btn-check:checked + .btn-outline-info, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show, .btn-outline-info:active {
    color: #000;
    background-color: var(--mycolor);
    border-color: var(--mycolor);
  }
  .mixitup-control-active{background-color: var(--mycolor);color: #002233 !important;}
/* ===================== end mixup ===================== */
/* ===================== start about ===================== */
.about-img img{width: 100%;}
.about-text{width: 100%;background-color: #f4f4f4;height: 100%;padding: 40px;}
.about-text h1{color: var(--mycolor);margin-bottom: 60px;}
.about-text p{color: #464646;font-family: "Rubik", sans-serif !important;word-spacing: 2px;line-height: 2;}
.about .row{margin: 0;padding: 0;}
.about .col-lg-6{margin: 0;padding: 0;}
/* ===================== end about ===================== */
/* ===================== start swiffy ===================== */
.slider-indicators{
  bottom: -50px;
}
.slider-indicators > *{
  background-color: #2b3e4f;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}
.slider-indicators > .active
{
  opacity: 1;
  background-color: var(--mycolor);
  width: 30px;
  border-radius: 20px;
}
.slider-nav::after{
  background-color: var(--mycolor);
}
.slider-nav{z-index: 99;}

/* ===================== end swiffy ===================== */
.mob-head{display: none;}
.prod-d-btn button{
  bottom: unset !important;
  width: auto;
}
.prod-details-text h4{color: var(--mycolor);}
.prod-d-cat{color: #2c3e50 !important;}
.prod-details-text > *{
  margin: 40px auto;
}

/* ===================== start phone ===================== */
@media screen and (max-width: 991px) {
  .category-cat{display: none;}
  .mob-head{display: block !important;}
  .prod-details{overflow: hidden;padding-bottom: 100px;}
  .prod-det-divimg , .prod-det-divtxt{
    height: 350px !important;
    width: 350px !important;
    margin: auto !important;
  }
  .mob-head .nav-link{padding: 0;}
  h4{font-size: 13px !important;}
  .navbar{
    bottom: 0 !important;
    position: fixed !important;
    z-index: 999;
    background-color: #fff;
    width: 100%;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    box-shadow: var(--mycolor) 0px 5px 20px;
  }.card{height: 250px !important;}
  .nlogo{display: none !important;}
.navbar-brand{font-size: 15px !important;}
.nav-items{font-size: 12px !important;width: 50%;float: right;}
.navbar-nav{display: block !important;}
.carousel-item{height: 220px;}
.carousel-inner{margin: 20px auto;}
.category-cat{height: auto !important;}
.htitle{font-size: 20px !important;}
.title-img{width: 32px;}
.divider-custom .divider-custom-line{max-width: 3rem !important; }
.slider-item-show4{--swiffy-slider-item-count: 2;}
.slider-indicators{display: flex !important;}
.col-card{width: 100% !important;}
.col-cat{height: auto !important;}
.card h3{font-size: 12px;}
.cart-icon{width: 20px;  height: 20px;}
.add-to-cart , .added-to-cart{font-size: 10px !important; }
.add-to-cart-button{height: 36px;}
footer{font-size: 14px !important;}
.about-phone{display: block !important;}
.about-pc{display: none;}
.controls button{font-size: 12px;margin: 5px auto;}
.controls{margin: 10px auto;}
.mob-nav-img img{width: 100%;}
.mob-nav-img{margin: auto;}
.mob-nav-text{
  font-size: 10px;
  text-align: center;
  font-weight: 100;
  margin-top: 6px;

}
.icon-shop{font-size: 26px !important;
  margin-right: 0px !important;}
.recend-img
{ height: 150px !important;}
.mob-nav-text p {  font-family: "Rubik", sans-serif !important;}
.navbar-brand{display: none;}
.mobile-nav {width: 100%;display: block !important;}
.mobile-nav .row > *{
  width: 20%;
  text-align: center;
  padding-top: 10px;
  -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out
}
.mobile-nav .row > *:hover{
  box-shadow: rgb(64, 66, 65) 0px 5px 20px;
}

.navbar-toggler{border: none !important;padding: 0;}
.navbar-toggler:focus{box-shadow: none !important;}

#floating-cart-container {
  z-index: 999 !important;
  bottom: -3px !important;
  right: 0% !important;
}
#cart-icon-container {
  background: transparent !important;
  border: none !important;
    box-shadow: none !important;
}
.cart-img-icon{top: 29px !important;}
#count {
  width: 25px;
  position: absolute;
  font-size: 12px;
  top: 14px;
  right: 15%;
  height: 25px;
  background: #f00;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  padding: 3px 0;
}
#shopping-cart {

  right: 3%;
}
.prod-badge{
    width: 40px;height: 40px;font-size: 8px !important;
}
.orders-form , .info-form{
    width:100% !important;
}
.order-md-2 {
  order: 1!important;
}
.order-1 {
order: 0 !important;
}
.col-cat-img {

  top: 15% !important;}
.col-cat-text{margin: 0.5rem !important;}
.col-cat:hover .col-cat-img {
  top: 18% !important;
}
.slider-nav{display:none !important;}
.add-to-cart-button{bottom:0 !important;}
.card-desc{height: 36%;}
.mobile-nav{height:60px !important;}
.card-img {
  height: 65%;}
  .card:hover .card-desc {
  height: 35% !important;
}
.pr-img img{width:100% !important;}
.category{margin: 30px auto !important; }

.mixup .col-lg-3{width: 50% !important;}
.link-cat{padding: 10px 10px !important;
  font-size: 11px !important;}
  footer{margin-bottom:100px !important;}
  .carten{left:-4px !important;}
  .carten   #shopping-cart {
    left: 0%;right: 0;
  }
  #cart-table{
      display: block;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin: 0 auto;
  overflow: scroll;
  white-space: nowrap;
  width: 330px;
  }
}
@media (max-width: 62rem) {
  .slider-item-snapstart.slider-item-reveal {
    --swiffy-slider-item-reveal: -5rem;
  }
}
/* ===================== end phone ===================== */