*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: 0;
}
@font-face{
    font-family: "yakanbakh";
    src: url("fonts/YekanBakhFaNum-VF.woff");
     src: url("fonts/YekanBakhFaNum-VF.woff2");
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
body{
    direction: rtl;
    font-size: 18px;
    text-align: right;
    font-family: "yakanbakh";
}
.site-header{
    margin-bottom: 200px;
    box-shadow: 0px 4px 8px 0px darkviolet;
}
.top-header{
  background: deeppink;
    padding: 30px;
    margin-top: 15px;
    
}
.row .top-header {
	background-color: pink;
}
.top-right-header{
    float: right;
}
.top-right-header span{
    float: right;
}
.top-left-header{
    float: left;
}
.top-left-header span{
    float: left;
}
.top-left-header span i{
    float: left;
    color: black;
    margin-left: 5px;
}
.main-header{
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    padding-bottom: 20px;
}
.main-h-right{
    display: flex;
    align-items: center;
    width: 60%;
}
.main-h-right .logo a img {

	max-width: 100px;
    top: 80px;
    right: 40px;
}
.main-h-right .logo a{
    display: flex;
}
.main-h-right .logo a img{
    max-width: 130px;
}
.main-h-right .search-main{
    width: 100%;
    margin-right: 54px;
}
.main-h-right .search-main form {
  position: relative;
}
.main-h-right .search-main form  input[type="search"] {
    background: pink;
    border-radius: 10px;
    padding: 15px;
    width: 100%;
    padding-right: 50px;
    font-family: "yakanbakh";
}

.main-h-left{
	display: flex;
	align-items: center;
	gap: 20px;
}
.main-h-left .favorite-btn-header {
	background-color: pink;
	padding: 10px;
	border-radius: 9px;
    border: 3px double;
}
.main-h-left .favorite-btn-header > a {
	color: navy;
}
.main-h-left .cart-btn-header {
      background-color: pink;
  color: navy;
  text-decoration: none;
  padding: 10px;
  border-radius: 10px;
  border: 3px double;
}
.main-h-left .cart-btn-header {
	background-color: pink;
	color: navy;
	text-decoration: none;
	padding: 10px;
	border-radius: 10px;
	border: 3px double;
}
.main-h-left .cart-btn-header .cart-btn-text {
	padding-left: 10px;
	border-left: 1px solid gray;
}
.down-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.main-menu {
	display: flex;
	gap: 20px;
	align-items: center;
}
.megamenu {
	border-left: 1px solid darkblue;
	padding-left: 10px;
	font-weight: 450;
	margin-right: 20px;
	cursor: pointer;
    position: relative;
}
.megamenu .titel-menu {
	color: navy;
}
.menu-header > ul > li {
	display: inline-block;
	list-style: none;
	margin: 0px 10px;
	padding-top: 10px;
	position: relative;
}
.menu-header > ul > li a {
	text-decoration: none;
	color: navy;
	padding: 14px;
}
.menu-header > ul > li a :hover{
 border-bottom: 1px solid blue;
}
.register-btn {
    
	display: flex;
	align-items: center;
	gap: 5px;
	margin-left: 20px;
	color: darkblue;
	border: 5px double;
	border-radius: 5px;
}
.menu-header > ul > li >ul {
	position: absolute;
	width: 150px;
	top: 48px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	box-shadow: 3px 3px 10px 0px navy;
	right: 2px;
	padding: 7px 0px;
    right: -17px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    z-index: 999;
}
.menu-header ul li:hover ul{
    opacity: 1;
    visibility: visible;
    top: 40px;
}
  .menu-header > ul > li >ul > li > a{
    padding: 10px 20px;
    display: block;
  }
  .menu-header > ul > li >ul > li > a:hover{
    font-size: 19px;
    color: orangered;
  }
.mok-megamenu > ul {
	position: absolute;
	width: 270px;
	box-shadow: 0px 5px 10px 0px grey;
	padding-right: 12px;
	background-color: pink;
	visibility: hidden;
	opacity: 0;
    z-index: 999;
}
.mok-megamenu:hover > .mok-megamenu > ul{
    visibility: visible;
    opacity: 1;
    top: 40px;
}
.mok-megamenu > ul::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 40px;
    top: -20px;
}
.mok-megamenu > ul > li {
	display: flex;
	list-style: none;
	justify-content: space-between;
	align-items: center;
}
.mok-megamenu > ul > li {
    background-color: lightblue;
}
.mok-megamenu > ul > li:hover  >a{
    color: blue;
}
.mok-megamenu > ul > li >a{
    padding: 5px; 
    color: crimson;
}

.mok-megamenu > ul >li > ul{
    position: relative;
    background: deeppink;
    right: 100%;
    display: flex;
    padding: 10px;
    height: 100%;
    box-shadow: 0px 5px 10px 0px tomato;
    visibility: hidden;
    transition: all 0.4 ease-in-out;
}
.mok-megamenu > ul >li > ul > li{
    width: 100%;
}
.mok-megamenu > ul >li > ul > li >a{
    color: darkred;
    border-right: 3px solid gold;
    padding-right: 5px;
}
.mok-megamenu > ul >li:hover>ul{
    visibility: visible;
    opacity: 1;
}
.mok-megamenu > ul > li > ul > li > ul > li a:hover{
    font-size: 20px; 
    color: greenyellow;
    display: block;
    padding: 10px;
    
}
.main-slider img{
    height: 80%;
    width: 80%;
}
.main-slider .owel-theme .owel-bots{
    bottom: 1px;
    width: 100%;
}
.main-slider .owel-theme .owel-dot span{
    background: darkorchid;
    height: 10px;
    width: 10px;
    margin: 2px 4px;
}
.mok-product{
    margin-top: 120px;
}
.mok-poroduct .title-pro h5{
    margin-bottom: 25px;
}
.mok-poroduct .title-pro h5 a{
    color: cornflowerblue;
    padding: 5px 10px;
}
 .product-item{
    background: #f3f1f3;
    box-shadow: 4px 4px 10px 0px gray;
    margin: 13px 14px;
    padding: 10px 12px;
    border-radius: 20px;
}
.product-item .color-dis{
    display: flex;
    justify-content: center;
    align-items: center;
}
.product-item .color-dis .color ul{
    padding-right: 0px;
}
.product-item .color-dis .color ul li{
    float: right;
}
.product-item .color-dis .color ul li span{
    width: 12px;
    height: 12px;
    border-radius: 40%;
    float: right;
    margin-left: 5px;
}
.product-item .color-dis .discount{
  background: #9881a3;
  border-radius: 40%;
   font-size: 12px;
   padding: 3px;
   color: rgb(26 , 31, 31);
}
.product-item h2{
    font-size: 19px;
    margin-top: 20px;
    overflow: hidden;
    height: 50px;
    line-height: 20px;
}
.product-item h2 a{
    color: #5d0ef1;
    word-wrap: break-word;
}
.product-item .down{
    display: flex;
    justify-content: space-between;
}
.product-item .down .addtocart-btn > a{
    display: flex;
    color: aqua;
    font-size: 20px;
    margin-right: 20px;
    margin-top: 12px;
}
.prodouct-item .down .price{
    display: flex;
    flex-direction: column;
    font-size: 15px;
    position: relative;
    margin-left: 26px;
}
.product-item .down .price del{
    font-size: 14px;
    color: #43b2e6;
    opacity: 0.7;
}
.product-item  .down .price ins{
    text-decoration: none;
    color: blue;
    font-weight: bold;
}
.amazing-slider{
    background: palevioletred;
    border-radius: 20px;
    box-shadow: 5px 5px 10px 0px gray;
}
.amazing-product  .amazing-thumbnail img{
    max-width: 220px;
    margin: 12px auto;
}
.amazing-product .amazing-btn{
  text-align: center;
}
.amazing-product .amazing-btn a{
    background: snow;
    color: orangered;
    border-radius: 20px;
    padding: 12px 15px;
    margin-top: 30px;
    display: inline-flex;
    font-weight: bold;
    align-items: center;
}
.amazing-product .amazing-btn a i{
    font-size: 14px;
    margin-right: 8px;
}
.amazing-product .countdown-timer{
    display: flex;
    justify-content: center;
}
.amazing-product .countdown-timer .number{
    background: orchid;
    color: snow;
    width: 25px;
    height: 25px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px
}
.special-box h4{
	color: white;
	font-size: 19px;
}
.mok-special{
    margin-top: 50px;
}
.special-box{
    position: relative;
    padding:  14px 30px 50px 0px;
    bottom: 50px;
}
.special-box::before{
    content: "";
    background: orchid;
  position: absolute;
  width: 40%;
  top: 0px;
  right: 0px;
  bottom: 0px;
  border-radius: 30px;
  z-index: -1;
}
.special-box::after{
    content: "";
     background: orchid;
  position: absolute;
  width: 40%;
  top: 0px;
  right: 0px;
  bottom: 0px;
  border-radius: 30px;
  transform: translate(-55px,0px) skew(-15deg,0deg);
  z-index: -1; 
}
.special-box .owl-stage-outer{
	background: white;
	border: 1px solid darkblue;
	box-shadow: 5px 5px 18px 0px gray;
	border-radius: 10px;
	width: 70%;
}
.special-box .special-item{
    display: flex;
  padding: 25px;
  width: 1000px;
  position: relative;
}
.special-box .special-item figure{
    width: 27%;
}
.special-box .special-item  .color{
    display: flex;
  justify-content: center;
}
.special-box .special-item  .color ul{
    padding-right: 0px;
}
.special-box .special-item .color ul li{
    float: right;
}
 .special-box .special-item .color ul li span{
    width: 12px;
    height: 12px;
    border-radius: 40%;
    float: right;
    margin-left: 5px;
}
 .special-box .special-item figure img{
    max-width: 370px;
}
.special-box .special-item .det-special{
  width: 73%;
}
.special-box .special-item .det-special h2{
  font-size: 21px; 
  margin-bottom: 20px;
}
.special-box .special-item .det-special h2 a{
    color: orangered;
}
.special-box .special-item .det-special .additional-product{
   display: flex;
  flex-direction: column;
  max-height: 145px;
  flex-wrap: wrap;
  overflow: hidden;
  gap: 7px 0px;
  margin-right: 10px;
  margin-bottom: 30px;
}
.special-box .special-item .det-special .additional-product .property-item{
    display: flex;
    gap: 7px;
    color: darkblue;
    font-weight: bold;
}
.special-box .special-item .det-special .additional-product .property-item i{
    color: orangered;
  font-size: 10px;
  margin-left: 2px;
}
.special-box .special-item .det-special .down{
    display: flex;
  gap: 10px;
  align-items: center;
}
.special-box .special-item .det-special .down a{
    background: deeppink;
  color: white;
  border-radius: 12px;
  padding: 12px;
  margin-right: 15px;
}
.special-box .special-item .det-special .down .price{
    display: flex;
  gap: 10px;
}
.special-box .special-item .det-special .down .price del{
    font-size: 16px;
  font-weight: 700;
  color: gray;
}
.special-slider{
    display: flex !important;
  justify-content: space-between;
}
.special-slider .owl-dots{
    width: 27%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  margin: 0 !important;
  max-height: 340px;
}
.special-slider .owl-dot{
    background: pink;
  border-radius: 10px;
  width: 85%;
  padding: 10px;
  text-align: right;
}
.special-slider .owl-dot button{
    background: transparent;
    cursor: pointer;
}
.special-slider .owl-dot .list-special{
   display: flex;
  align-items: center;
  gap: 10px;
   font-family:"yakanbakh" ;
   pointer-events: none
}
.special-slider .owl-dot .list-special figure{
    background: pink;
  border-radius: 10px;
  padding: 5px 7px;
}
.special-slider .owl-dot .list-special figure img{
    max-width: 80px;
  border-radius: 10px;
}
.special-slider .owl-dots .active{
    background-color: deeppink;
  width: 90%;
}
.special-slider .owl-dot .list-special b{
    color: snow;
}
.box-sell{
  display: flex;
  justify-content: space-between;
}
.box-sell .best-sell{
  background: plum;
  border-radius: 18px;
  padding: 15px 20px;
  position: relative;
}

.box-sell .best-sell .head{
   display: flex;
  justify-content: center;
  font-size: 20px;
}
.box-sell .best-sell .head p{
  color: purple;
  font-weight: bold;
}
.box-sell .best-sell  figure{
border-radius: 50%;
  width: 150px;
  height: 150px;
  margin: 5px auto;
  padding: 5px;
  animation: pulse-animation 2s infinite;
}
@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px white;
  }
  100% {
    box-shadow: 0 0 5px 10px white;
  }
}

.box-sell .best-sell  figure img{
    max-width: 140px;
  margin: auto;
  display: block;
  border-radius: 50%;
}

.box-sell .best-sell h2{
   overflow: hidden;
  height: 50px;
  line-height: 22px;
}
.box-sell .best-sell h2 a{
   font-size: 15px;
  color: darkblue;
  font-weight: 450;
}
.box-sell .best-sell .price{
  display: flex;
  gap: 24px;
  justify-content: space-around;
  color: blue;
  margin: 20px 0px;
}
.box-sell .best-sell .price del{
   font-size: 15px;
  opacity: 0.7;
  font-weight: 450;
}
.box-sell .best-sell .price ins{
   text-decoration: none;
  font-size: 18px;
  font-weight: 700;
}
.other-sell{
  display: flex;
  flex-wrap: wrap;
  gap: 10px; 
  margin-right: 20px;
}
.other-sell .product-sell{
   width: 30%;
  background: white;
  box-shadow: 0px 0px 10px 0px gray;
  border-radius: 10px;
  padding: 10px;
  height: 120px;
}
.other-sell .product-sell:hover .down .number{
    background: deeppink;
    color: white;
}
.other-sell .product-sell figure{
    float: right;
  margin-left: 14px;
}
.other-sell .product-sell figure img{
    max-width: 80px;
}
.other-sell .product-sell h2{
    line-height: 25px;
  height: 36px;
  overflow: hidden;
  margin-top: 10px;
}
.other-sell .product-sell h2 a{
   color: darkblue;
  font-size: 18px;
}
.other-sell .product-sell .down{
    display: flex;
  justify-content: space-between;
  height: 50px;
  align-items: center;
}
.other-sell .product-sell .down .number{
   background: pink;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s ease-in;
}
.other-sell .product-sell .down .price{
    display: flex;
  flex-direction: column;
  position: relative;
  margin-left: 30px;
}
.other-sell .product-sell .down .price del{
      font-size: 14px;
  color: #43b2e6;
  opacity: 0.7;
}
.other-sell .product-sell .down .price ins{
     text-decoration: none;
  color: blue;
  font-weight: bold;
}
.other-sell .product-sell .down .price span{
   position: absolute;
   rotate: 270deg;
   opacity: 0.7;
   left: -33px;
   top: 13px;
   font-size: 15px;
}
   .poster-box{
     display: flex;
     justify-content: center;
   }
   .poster-box figure{
    display: flex;
  position: relative;
  top: 60px;
  gap: 10px;
   }
   .poster-box figure img{
       border-radius: 10px;
  width: 600px;
  height: 300px;
   }
   .poster-box .poster-btn{
      text-align: center;
  top: 188px;
  position: relative;
  left: 600px;
  top: 5px;
  bottom: 5px;
   }
   .poster-box .poster-btn a{
    background: deeppink;
  color: snow;
  border-radius: 20px;
  padding: 12px 15px;
  margin-top: 30px;
  display: inline-flex;
  font-weight: bold;
  align-items: center;
   }
   .poster-box .poster-btn a i{
      font-size: 14px;
  margin-right: 8px;
   }
   .title-brand{
    text-align: center;
   }
   .title-brand h4{
    background: pink;
  color: black;
  font-size: 16px;
  border-radius: 25px 25px 0px 0px;
  display: inline-block;
  padding: 16px 20px;
   }
   .box-brand{
    background: white;
  box-shadow: 5px 4px 10px 0px;
  border-radius: 25px;
   }
   .box-brand .inner-brand{
    width: 80%;
  margin: auto
   }
   .box-brand .inner-brand .item-brand{
    display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
   }
   .box-brand .inner-brand .item-brand img{
    max-width: 99px;
   }
   .box-brand .owl-carousel .owl-nav button{
    position: absolute;
  background: darkorchid;
  width: 75px;
  height: 45px;
  top: 50px;
  color: pink;
   }
.box-brand .owl-carousel .owl-nav button.owl-prev{
   right: -5%;
  border-radius: 50px 0px 0px 50px
}

.box-brand  .owl-carousel .owl-nav button.owl-next{
     left: -5%;
  border-radius: 0px 50px 50px 0px;
}
.box-brand .owl-carousel .owl-nav button.owl-prev::before{
  content: ">>";
}
.box-brand  .owl-carousel .owl-nav button.owl-next::before{
  content: "<<";
}

   .mok-service{
       display: flex;
  gap: 20px;
   }
   .mok-service .service-item{
         display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: center;
  box-shadow: 0px 0px 9px 0px grey;
  border-radius: 10px;
   }
   .mok-service .service-item img{
       max-width: 70px;
  margin: 0 auto 10px;
   }
   .mok-service .service-item span{
      font-size: 13px;
  font-weight: 300;
  color: gray;
   }
   footer{
    background: pink;
   border-top: 3px solid deeppink;
   margin-top: 40px;
   padding-top: 40px;
   box-shadow: 0px 0px 10px 0px darkorchid;
   }
   .footer-box{
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
   }
   .footer-box .footer-widget{
    flex-grow: 1;
   }
   .footer-box .footer-about{
    width: 30%;
   }
   .footer-box .footer-widget h3{
    font-size: 16px;
    color: #033dbb;
    font-weight: 600;
    text-align: justify;
   }
   .footer-box .footer-widget .f-w-content{
    color: #49464e;
    font-size: 14px;
    line-height: 45px;
    text-align: justify;
   }
   .footer-box .footer-widget .f-w-content ul{
    padding-right: 0px;
   }
   .footer-box .footer-widget .f-w-content ul li a{
    color: orangered;
   }
   /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 6; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 450px; /* Could be more or less, depending on screen size */
  position: relative;
  animation-name: animatetop;
  animation-duration: 0.4s;
}

@keyframes animatetop{
  form{top: -300px;opacity: 0;}
  to{top: 0;opacity: 1;}
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 38px;
  font-weight: bold;
  top: 10px;
  right: 15px;
  position: absolute;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}
.form-register-mok {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 100%;
  padding: 15px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form-register-mok .mok-logo  img{
  max-width: 150px
}

.form-register-mok input {
  font-family: "yakanbakh";
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form-register-mok button {
  font-family: "yakanbakh";
  text-transform: uppercase;
  outline: 0;
  background: deeppink;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form-register-mok button:hover,.form button:active,.form button:focus {
  background: deeppink;
}
.form-register-mok .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form-register-mok .message a {
  color: deeppink;
  text-decoration: none;
}
.form-register-mok .register-form {
  display: none;
}
/********single-product*********/
   .mok-breadcrumb{
     font-size: 14px;
  position: relative;
  bottom: 200px;
  margin: 20px 0;
  color: gray;
}
   .mok-breadcrumb a{
     color: gray;
   }

.product-intro{
    background: white;
  border-radius: 15px;
  position: relative;
    bottom: 200px;
  box-shadow: 5px 5px 10px 0px gray;
  padding: 60px;
  margin-bottom: 20px;
  display: flex;
 justify-content: space-between;
}

.product-intro .right{
   width: 49%;
}
.product-intro .right header{
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #c5c5c6;
}
.product-intro .right header h1{
    font-size: 20px;
  font-weight: 700;
}
.product-intro .right header span{
    font-weight: 300;
  color: gray;
  margin-top: 8px;
  display: block;
}
.product-intro .right  .product-meta{
     display: flex;
  flex-wrap: wrap;
}
.product-intro .right .product-meta .meta-pro{
  width: 49%;
    display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  margin-bottom: 15px;
}
.product-intro .right .product-meta .meta-pro i{
      color: deeppink;
  font-size: 24px;
}
.product-intro .right .product-dlivery{
    display: flex;
  gap: 10px 25px;
  margin-bottom: 25px;
}
.product-intro .right .product-dlivery span i{
    margin-left: 10px;
    color: orangered;
  margin-bottom: 25px;
  font-size: 14px;
}
.product-intro .right .product-features{
   margin-right: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-height: 140px;
  margin-bottom: 50px;
  font-size: 14px;
}
.product-intro .right .product-features .property-item{
   display: flex;
   gap: 8px;
}
.product-intro .right .product-features .property-item span{
     color: gray;
  font-weight: 300;
}
.product-intro .right .product-features .property-item span i{
     font-size: 10px;
  color: lightblue;
}
.product-intro .right .p-q{
   position: relative;
  top: 60px;
  left: 405px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.product-intro .right .p-q .quantity{
      display: flex;
  border: 1px solid #e0d2d2;
  font-weight: 600;
  border-radius: 8px;
  width: 100px;
  height: 50px;
  padding: 0 30px;
}
.product-intro .right .p-q .quantity button{
     font-size: 20px;
  background: transparent;
  cursor: pointer;
  margin: 16px auto;
  width: 90px;
}
.product-intro .right .p-q .quantity button.plus{
    border-left: 1px solid gray;
}
.product-intro .right .p-q .quantity button.minus{
    border-right: 1px solid gray;
}
.product-intro .right .p-q .quantity .qty{
      width: 100%;
  height: 100%;
  font-size: 20px;
  text-align: center;
  font-weight: 700;
  appearance: textfield;
      
}
.product-intro .right .single-price{
      position: relative;
  right: 400px;
  display: flex;
  gap: 15px;
  font-size: 20px;
}
.product-intro .right .single-price .price{
    display: flex;
  gap: 10px;
}
.product-intro .right .single-price .price del{
    font-size: 20px;
  font-weight: 400;
  color: gray;
}
.product-intro .right .single-price .price ins{
    font-size: 23px;
  text-decoration: none;
  font-weight: 700;
}
.product-intro .right .single-price .price ins span{
    font-size: 16px;
  font-weight: 450;
}
.product-intro .right .single-price .discount {
     background: orangered;
  color: snow;
  font-size: 16px;
  font-weight: 450;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.product-intro .right .single-add-too-cart{
     font-family: "yakanbakh";
     font-size: 16px;
     background: deeppink;
  color: white;
  font-weight: 450;
  width: 100%;
  padding: 10px 0px;
  border-radius: 9px;
  cursor: pointer;
}
.product-intro .right .single-add-too-cart i{
    margin-left: 5px;
}
.product-intro .left{
   display: flex;
  justify-content: space-between;
  width: 47%;
  position: relative;
  padding: 20px;
}
.product-intro .left .product-action{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15%;
  max-width: 6%;
  z-index: 3;
}
.product-intro .left .product-action .item-action button{
   background: white;
  border: 1px solid;
  border-radius: 10px;
  min-width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.product-intro .left .product-action .item-action button:hover span{
    max-width: 250px;
    padding-left: 10px;
}
.product-intro .left .product-action .item-action button i{
     font-size: 20px;
  width: 45px;
  height: 45px;
  line-height: 45px;
}
.product-intro .left .product-action .item-action button span{
  font-family: "yakanbakh";
     font-size: 16px;
     white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.product-intro .left .product-image{
  width: 75% !important;
  flex-shrink: 0;
}
 .product-intro .left .product-image .countdown-timer{
    display: flex;
    justify-content: center;
}
 .product-intro .left .product-image .countdown-timer .number{
    background: #055377;
    color: #fafafa;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;}
 .product-intro .left ol img{
  max-width: 100px;
    top: 80px;
    right: 40px;
 }

.product-tab .product-description{
   position: relative;
  bottom: 199px;
  font-size: 16px;
  line-height: 2.5;
  box-shadow: 5px 5px 10px 0px gray;
  border-radius: 20px;
  padding: 20px;
}
.product-tab .additional-product{
    position: relative;
  bottom: 155px;
  box-shadow: 5px 5px 10px 0px gray;
  border-radius: 20px;
  padding: 20px;
}
.product-tab .additional-product h2{
      color: darkblue;
  font-size: 22px;
}
.product-tab .additional-product .property-item{
   display: flex;
  gap: 15px;
  margin-bottom: 18px;
}
.product-tab .additional-product .property-item span{
    background: pink;
  padding: 20px 10px;
  min-width: 200px;
  border-radius: 10px;
}
.product-tab .additional-product .property-item span i{
    color: orangered;
  font-size: 10px;
  margin-left: 5px;
}
.product-tab .additional-product .property-item p{
     background: pink;
  padding: 20px 10px;
  border-radius: 10px;
  flex-grow: 1;
}

 .floating-button{
  font-size: 35px;
  background: orangered;
  width: 60px;
  height: 60px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  position: fixed;
  right: 63px;
  bottom: 40px;
  z-index: 100;
  cursor: pointer;
 }
 .floating-button i{
  transition: all 0.2s ease-in-out;
 }
 .floating-contact .contact-list{
  width: 250px;
  position: fixed;
  right: 86px;
  bottom: 130px;
  background: pink;
  border-radius: 15px;
  box-shadow: 5px 5px 10px 0px gray;
  z-index: 100;
  display: none;
 }
.floating-contact .contact-list a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  color: darkblue;
  font-size: 16px;
}
.floating-contact .contact-list a:hover{
  background-color: lightblue;
  border-radius: 15px;
}
.floating-contact .contact-list a img{
  width: 35px;
  height: 35px;
}
#modal_video .modal-content{
  width: 750px;
}
.modal-body video{
  max-width: 100%;
}

.modal-header i{
  font-size: 18px;
  color: orangered;
}
.modal-header h4{
  color: darkblue;
  font-size: 18px;
  margin-top: 11px;
  position: relative;
  right: 199px;
  bottom: 49px;
}

#modal_share .modal-content{
  width: 500px;
  border-radius: 15px;
  background: pink;
}
 .modal-content .modal-header{
  border-bottom: 1px solid #c5c5c6;
 }

.modal-body .shortlink{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  border-radius: 5px;
  padding: 10px;
  font-size: 14px;
  margin-bottom: 20px;
}
 .modal-body .shortlink textarea {
  font-family: "yakanbakh";
  font-size: 14px;
  text-align: left;
  width: 300px;
  height: 35px;
  padding: 7px;
  font-weight: 600;
}
 .modal-body .social-sharing{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
 }

.modal-body .box-sharing{
display: flex;
  gap: 10px;
  justify-content: center;
}

.modal-body .box-sharing a{
font-size: 22px;
  display: flex;
}
.modal-body .box-sharing a.telegram{
   color: blue;
}

.modal-body .box-sharing a.facebook{
  color: darkblue;
}
.modal-body .box-sharing a.twitter{
  color: blue;
}
.modal-body .box-sharing a.snapchat{
  color: yellow;
}
.modal-body .box-sharing a.pinterest{
  color: red;
}















/*single page*/
.mok-single{
  background: orchid;
  color: darkblue;
  border-radius: 30px;
  box-shadow: 4px 5px 10px 0px grey;
  line-height: 2.5;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  
}
.mok-single header h1{
  color: black;
  font-size: 32px;
}
.mok-single .side-single{
  width: 27%;
  margin: 10px;
}
.mok-single .widget{
  background: white;
  border-radius: 30px;
    box-shadow: 4px 5px 10px 0px grey;
  line-height: 2.5;
  padding: 14px;
  margin-bottom: 20px;
  border: 3px solid orangered;
}
.mok-single .widget .widget-header h3{
  font-size: 18px;
  font-weight: 800;
  border-bottom: 3px solid orangered;
  padding-bottom: 12px;
  margin-bottom: 12px;
  display: inline-block;
  color: #033dbb;

}
.mok-single .widget form{
  position: relative;
}
.mok-single .widget form input[type="text"]{
  border: 2px solid orangered;
  border-radius: 12px;
  background: coral;
}
.mok-single .widget form input[type="submit"]{
  border-radius: 12px;
  background: #43b2e6;
  color: orangered;
  position: absolute;
  font-size: 16px;
  line-height: 2.5;
  padding: 4px;
  top: 0;
  left: 0;
}
.mok-single .widget ul li{
  padding-bottom: 13px;
}
.mok-single .widget ul li a{
  color: #033dbb;
}
.mok-single .main-single{
  width: 70%;
}
.mok-single .main-single .mok-archive{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.mok-single .mok-poroduct{
  margin-top: 0px;
}
.mok-single .main-single .mok-product img{
  display: block;
  width: 399px
}
.page-not-found{
  position: relative;
  bottom: 100px;
  background: lightblue;
  width: 40%;
  padding: 50px;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  box-shadow: 5px 5px 10px 0px gray;
  align-items: center;
  gap: 20px;
  right: 400px;
}
.page-not-found .btn404{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.page-not-found .btn404 p{
   font-weight: 700;
   color: darkblue;
}
.page-not-found .btn404 a{
background: deeppink;
  color: white;
  border-radius: 12px;
  padding: 12px;
}
.page-not-found .btn404 .button-1{
   position: relative;
  left: 199px;
  top: 30px;
}
 .page-not-found .btn404 .button-2{
   position: relative;
  right: 199px;
  bottom: 39px;
}
#stories {
  position: relative;
  right: 399px;
  bottom: 200px;
}