*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: 0;
}
@font-face {
    font-family: "yekanBakh";
    src: url("fonts/YekanBakhFaNum-VF.wof");
    src: url("fonts/YekanBakhFaNum-VF.woff2");
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
body{
    direction: rtl;
    font-family: "yekanBakh";
    text-align: right;
    font-size: 18px;
    background-color: rgb(255, 255, 255);
    color:rgb(0, 0, 0);
    font-weight: 400;
}
header .header{
    box-shadow: 0px 4px 8px 0px rgb(0, 0, 0);
    margin-bottom: 20px;
}
.top-header{
background-color: transparent; /*یعنی پس زمینه را حذف کن*/
padding: 5px;
font-weight: 350;
margin-top: 7px;
}
.top-header .top-right-header{
    float: right;

}
.top-header .top-right-header span{
    float: right;
}
.top-header .top-left-header{
    float: left;  
}
.top-header .top-left-header span{
    float: left;
}
.main-header{
display: flex;
margin-top: 5px;
justify-content: space-between;
}
.main-header .main-h-right{
    display: flex;
    width: 60%;
    align-items: center;
}
.main-header .main-h-right .logo{
max-width: 70px;
}
.main-header .main-h-right .logo a{
    display: flex;
}
.main-header .main-h-right .logo a img{
    max-width: 80px;
}
.main-header .search-main{
    width: 100%;
    margin-top: 2%;
}
.main-header .search-main form{
    position: relative;
}
.main-header .search-main form input{
    background-color:rgb(12, 0, 149);
    border-radius: 30px;
    padding: 20px;
    width: 80%;
    padding-right: 40px;
    margin-right: 250px;
}
.main-header .search-main form button{
    position: absolute;
    top: 19px;
    right: 260px;
    font-size: 20px;
    cursor: pointer;
    background-color: rgb(12, 0, 149);
    background: transparent;
}
.main-h-left{
    display: flex;
    align-items: center;
    gap: 20px;
}
.main-h-left .favorite-btn-header{

}
.main-h-left .favorite-btn-header a{
    background-color: rgb(12, 0, 149);
    text-decoration: none;
    border-radius: 7px;
    padding: 15px;
    display: flex;
    margin-left: 8px;
    color: rgb(0, 0, 0);
}
.main-h-left .favorite-btn-header a:hover{
    background-color: rgb(255, 255, 255);
    color: rgb(12, 0, 149);
    border: 1px solid #000;
}
.main-h-left .favorite-btn-header a i{
    font-size: 20px;
    margin-top: 4px;
}
.main-h-left .cart-btn-header a{
    background-color: rgb(12, 0, 149);
    text-decoration: none;
    border-radius: 7px;
    padding: 15px;
    display: flex;
    margin-left: 8px;
    color: rgb(0, 0, 0);
}
.main-h-left .cart-btn-header a:hover{
    background-color: rgb(255, 255, 255);
    color: rgb(12, 0, 149);
    border: 1px solid #000;
}
.main-h-left .cart-btn-header a span.cart-btn-text{
border-left: 1px solid rgb(12, 0, 149);
padding-left: 12px;
}
.main-h-left .cart-btn-header a span.cart-btn-num{
margin-right: 12px;
}
.down-heade{
    display: flex;
    justify-content: center;
    margin-top: 10px;
    padding-bottom: 10px;
}
.main-menu{
    display: flex;
    align-items: center;
}
.megamenu{
    cursor: pointer;
    border-left: 1px solid  rgb(12, 0, 149) ;
    padding-left: 10px;
    margin-right: 10px;
    position: relative;
}
.titel-menu{
    color: rgb(0, 0, 0);
}
.menu-header > ul > li{
    list-style: none;
    display: inline-block;
    margin: 0px 10px;
    padding-top: 10px;
    position: relative;
}
.menu-header ul li a{
    text-decoration: none;
    color: rgb(12, 0, 149);
}
.menu-header > ul > li > a:hover{
    border-bottom: 2px solid rgb(0, 0, 0);
}
.register-btn{
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    display: flex;
    margin-left: 10px;
    border-radius: 7px;
    padding: 8px;
}
.register-btn i{
    margin-left: 3px;
}
.register-btn:hover{
background-color: rgb(12, 0, 149);
color: #000;
}
.menu-header > ul > li > ul {
position: absolute;
width: 125px;
box-shadow: 5px 5px 10px 0px rgb(12, 0, 149);
padding: 8px 2px;
top: 80px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
right: -16px;
visibility: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
z-index: 99;
    background-color: rgb(255, 255, 255);
}
.menu-header > ul > li:hover > ul{
    visibility: visible;
    opacity: 1;
    top: 55px;
}
.menu-header ul li ul li {
list-style: none;
}
.menu-header ul li ul li a {
    padding: 7px 14px;
    display: block;
    font-size: 14px;
}
.menu-header ul li ul li a:hover{
    color: rgb(12, 0, 149);
    font-size: 15px;
}
.kami-megamenu > ul{
    position: absolute;
    width: 215px;
    box-shadow: 5px 5px 5px rgb(12, 0, 149);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-right: 0px;
    top: 40px;
    right: -15px;
    border: 5px rgb(12, 0, 149);
    visibility: hidden;
    opacity: 0;
    z-index: 99;
    background-color: rgb(255, 255, 255);
}
.kami-megamenu > ul > li{
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.kami-megamenu > ul > li a{
    text-decoration: none;
    color: rgb(12, 0, 149);
    padding: 7px;
}
.kami-megamenu > ul > li:hover > a{
    background-color: rgb(12, 0, 149);
    color: rgb(255, 255, 255);
    border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.kami-megamenu > ul > li:hover{
    background-color: rgb(12, 0, 149);
    color: rgb(255, 255, 255);
    border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.megamenu:hover > ul{
    position: absolute;
    width: 215px;
    box-shadow: 5px 5px 5px rgb(12, 0, 149);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-right: 0px;
    top: 40px;
    right: -15px;
    border: 5px rgb(12, 0, 149);
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
}
.megamenu:hover > .kami-megamenu >ul{
    visibility: visible;
    opacity: 1;
    top: 40px;
}
.kami-megamenu > ul::before{
    content: "";
    width: 100%;
    position: absolute;
    top: -20px;
    height: 20px;
}
.kami-megamenu > ul > li {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.kami-megamenu > ul > li > a {
    text-decoration: none;
    color: rgb(12, 0, 149);
    padding: 7px;
}
.kami-megamenu > ul > li:hover{
    background-color: rgb(12, 0, 149);
    color: rgb(255, 255, 255);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.kami-megamenu > ul > li:hover > a{
    color: rgb(255, 255, 255);
}
.kami-megamenu > ul > li > ul{
    position: absolute;
    right: 102%;
    top: 2px;
    height: 100%;
    width: 900px;
    box-shadow: 5px 5px 10px rgb(12, 0, 149);
    display: flex;
    padding: 10px;
    background: rgb(255, 255, 255);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4  ease-in-out;
}
.kami-megamenu > ul > li:hover > ul{
    visibility: visible;
    opacity: 1;
}
.kami-megamenu > ul > li > ul > li{
    width: 33%;
}
.kami-megamenu > ul > li > ul > li > a {
    color: rgb(12, 0, 149);
    border-right:3px solid rgb(12, 0, 149);
    padding-right: 5px;
    font-size: 16px;
}
.kami-megamenu > ul > li > ul > li > ul{
    padding-right: 0px;
    margin-top: 10px;
}
.kami-megamenu > ul > li > ul > li > ul > li > a{
    color: #00d9ff;
    opacity: 0.7;
    font-size: 15px;
    display: block;
    padding: 5px;
}
.kami-megamenu > ul > li > ul > li > ul > li > a:hover{
    opacity: 1;
    font-size: 16px; 
}
.main-slider{
    border: rgb(12, 0, 149);
    box-shadow: 5px 5px 10px rgb(149, 0, 0);
    border-radius: 15px;
    margin-top: 25px;
}
.main-slider img{
    width: 80%;
    height: 500px;
    border-radius: 15px;
}
.main-slider .owl-theme .owl-dots{
    position: absolute;
    width: 100%;
    bottom: -40px;
}
.main-slider .owl-theme .owl-dots button.owl-dots span{
    background: rgb(255, 255, 255);
    width: 11px;
    height: 11px;
    margin: 2px 3px;
}
.main-slider .owl-theme .owl-nav button{
    width: 18px;
    background: rgb(12, 0, 149);
}
.main-slider .owl-theme .owl-dots span{
    position: absolute;
    background: rgb(12, 0, 149);
    color: rgb(0, 0, 0);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    bottom: -1px;
    opacity: 0;
}
.main-slider .owl-theme .owl-nav button:hover{
    background-color: rgb(12, 0, 149);
    color: rgb(255, 255, 255);
}
.main-slider:hover .owl-theme .owl-nav button.owl button{
    opacity: 1;
}
.main-slider:hover .owl-theme .owl-nav button.owl-next{
right: 80px;
}
.main-slider:hover .owl-theme .owl-nav button.owl-prev{
right: 35px;
}
.kami-product{
margin-top: 70px;
}
.kami-product .title-pro > h5 >{
margin-bottom: 20px;
}
.kami-product .title-pro > h5 > a{
color: rgb(12, 0, 149);
border-bottom: 3px solid rgb(12, 0, 149);
font-size: 16px;
padding: 8px;
}
.product-item{
background-color: rgb(255, 255, 255);
box-shadow: 5px 5px 10px 0px red;
border-radius: 15px;
padding: 10px 15px;
margin: 13px 15px;
}
.product-item .color-dis{
    display: flex;
    justify-content: space-between;
    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: 13px;
    height: 13px;
    float: right;
    margin-left: 5px;
    border-radius: 60%;
}
.product-item .color-dis .discount{
    background: rgb(94, 80, 255);
    padding: 0px 3px;
    border-radius: 10px;
    font-size: 15px;
}
img{
    height: auto;
    max-width: 100%;
}
.product-item figure img a{
    max-width: 200px;
    display: block;
    margin: 7px auto;
}
.product-item h2{
overflow: hidden;
height: 60px;
line-height: 20px;
margin-top: 10px;
}
.product-item h2 a{
word-wrap: break-word;
color: rgb(12, 0, 149);
font-size: 16px;
}
.product-item .down{
    display: flex;
    justify-content: space-between;
}
.product-item .down .discount-btn{
color:rgb(255, 255, 255);
font-size: 16px;
margin-top: 11px;
display: flex;
}
.product-item .down .price{
    display: flex; 
    font-size: 16px;
    flex-direction: column;
    align-items: start;
    position: relative;
    margin-left: 20px;
}
.product-item .down .price del{
    color: rgb(12, 0, 149);
    opacity: 0.7;
    margin-left: 13px;
    font-size: 16px;
}
.product-item .down .price ins{
    text-decoration: rgb(255, 255, 255);
    font-size: 16px;
    color: rgb(149, 0, 0);
    font-weight: bolder;
}
.product-item .down .price ins span {
    position: absolute;
    rotate: 269deg;
    font-size: 13px;
    top: 16px;
    left: -19px;
    opacity: 0.7;
}
.amazing-slider{
    background: rgb(12, 0, 149);
    border-radius: 20px;
    box-shadow: 5px 5px 10px 0px rgb(149, 0, 0);
}
.amazing-product .amazing-thumbnail img{
    max-width: 210px;
    margin: 15px auto;
}
.amazing-product .amazing-btn {
text-align: center;
}
.amazing-product .amazing-btn a {
    background: rgb(255, 140, 0);
    color: rgb(255, 255, 255);
    font-weight: bold;
    padding: 10px 25px;
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    border-radius: 15px;
}

.amazing-product .amazing-btn a i {
    font-size: 15px;
    margin-right: 5px;
}

.amazing-product .amazing-btn {
    text-align: center;
}

.amazing-product .countdown-timer {
    display: flex;
    justify-content: center;

}

.amazing-product .countdown-timer .number {
    background: rgb(12, 0, 149);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.amazing-product .countdown-timer span.dot {
    font-size: 24px;
    color: rgb(149, 0, 0);
    margin: -4px 2px;
}
.amazing-product .owl-nav {
    display: none;
}

.product-slider .owl-nav {
    display: none;
}
.amazing-product .owl-theme .owl-dots .owl-dot.active span{
background-color:orangered;
}
.kami-special{
    margin-top: 30px;
}
.special-box {
    position: relative;
    padding: 15px 30px 40px 0px;
}
.special-box::before{
    content: "";
    background: rgb(12, 0, 149);
    width: 23%;
    top: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    border-radius: 20px;
    z-index: -1;
}
.special-box::after{
    content: "";
    background: rgb(12, 0, 149);
    width: 55%;
    top: 0;
    bottom: 0;
    right: 10%;
    position: absolute;
    border-radius: 20px;
    z-index: -1;
    transform: translate(-11px,0px) skew(-25deg,0deg);
}
.special-box h4{
    color: rgb(255, 255, 255);
}
.special-box .owl-stage-outer{
    background-color: #43b2e6;
    border: 1px solid black;
    box-shadow: 4px 4px 8px 0px grey;
    border-radius: 16px;
    width: 60%;
}
.special-box .special-item{
    display: flex;
    padding: 25px;
    width: 1000px;
    position: relative;
}
.special-box .special-item figure{
    width: 35%;
}
.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: 14px;
    height: 14px;
    border-radius: 40%;
    float: right;
    margin-left: 6px;
}
.special-box .special-item figure img{
    max-width:250px;
}
.special-box .special-item .det-special{
    width: 65%;
}
.special-box .special-item .det-special h2{
    font-size: 16px;
    margin-bottom: 20px;
}
.special-box .special-item .det-special h2 a {
    color: #fefdff;
}
.special-box .special-item .det-special .additional-product{
    display: flex;
    flex-direction: column;
    max-height: 140px;
    flex-wrap: wrap;
    overflow: hidden;
    gap: 7px 0px;
    margin-left: 12px;
    margin-bottom: 20px;
}
.special-box .special-item .det-special .additional-product .property-item{
    display: flex;
    gap: 7px;
    color: #f3f1f5;
} 
.special-box .special-item .det-special .additional-product .property-item i{
    color: #49464e;
    font-size: 20px;
    margin-left: 3px;
}
.special-box .special-item .det-special .down{
    display: flex;
    align-items: center;
    gap: 12px;
}
.special-box .special-item .det-special .down a {
    background: #034ce7;
    color: #fdfaff;
    border-radius: 14px;
    padding: 8px;
    margin-right: 10px;
}
.special-box .special-item .det-special .down .price{
    display: flex;
    gap: 8px;
}
.special-box .special-item .det-special .down .price del{
    font-size: 14px;
    font-weight: 600;
    color: #333335;
}
.special-box .special-item .det-special .down .price ins{
    font-size: 20px;
    font-weight: 700;
    color: #dcf30d;
    text-decoration: none;
}
.special-box .special-item .det-special .down .price ins span{
   font-size: 12px;
}
.special-box .special-item .discount{
    position: absolute;
    background: #0aa3eb;
    color: #f7f3f3;
    top: 0;
    width: 70px;
    height: 60px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: center;
    padding-top: 5px;
}

.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: 330px;
}
.special-slider .owl-dot{
    background: #f00303;
    border-radius: 18px;
    width: 80%;
    padding: 15px;
    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;
    pointer-events: none;
}
.special-slider .owl-dot .list-special figure{
    background: lightblue;
    border-radius: 14px;
    padding: 4px 5px;
}
.special-slider .owl-dot .list-special figure img{
    max-width: 80px;
    border-radius: 13px;
}
.special-slider .owl-dots .active{
background-color: #e70340;
width:90%;
}
.special-slider .owl-dot .list-special b{
    color: white;
}

.box-sell{
    display: flex;
    justify-content: space-between;
    padding: 18px 0px;
}
.box-sell .best-sell{
background: rgb(149, 0, 0);
border-radius: 25px;
padding: 15px 20px;
position: relative;
width: 270px;
flex-shrink: 0;
}
.box-sell .best-sell .head{
display: flex;
justify-content: center;
font-size: 18px;
}
.box-sell .best-sell .head p{
    color: #ffffff;
}
.box-sell .best-sell figure{
border-radius: 50%;
width: 150px;
height: 190px;
margin: 6px auto;
overflow: hidden;
padding: 5px;
animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% {    box-shadow: 0 0 0 10px #00ff37;  }
    100% {    box-shadow: 0 0 5px 20px #00ff37;  }
}

.box-sell .best-sell figure img{
max-width: 140px;
margin: auto;
border-radius: 50%;
}
.box-sell .best-sell h2{
overflow: hidden;
height: 50px;
line-height: 26px;
}
.box-sell .best-sell h2 a{
font-size: 22px;
color: #ffffff;
font-weight: 400;
}
.box-sell .best-sell h2 .price{
display: flex;
gap: 20px;
justify-content: space-between;
margin: 15px 8px;
color: #ff0000;
}
.box-sell .best-sell h2 .price .del{
    font-size: 14px;
    opacity: 0.7;
}
.box-sell .best-sell h2 .price ins{
    text-decoration: none;
    font-size: 15px;
}
.box-sell .best-sell h2 .price ins span{
    font-size: 15px;
}
.box-sell .best-sell .add-cart{
position: absolute;
left: 128px;
bottom: -24;
}
.box-sell .best-sell .add-cart a i{
    background: rgb(255, 255, 255);
    color: rgb(12, 0, 149);
    border-radius: 50%;
    font-size: 15px;
    padding: 7px;
}
.other-sell{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-right: 15px;
}
.other-sell .product-sell{
    width: 30%;
    height: 150px;
    box-shadow: 3px 4px 0px 0px rgb(0, 0, 0);
    padding: 10px;
    background: rgb(12, 0, 149);
    flex-grow: 1;
    border-radius: 25px;
    margin-right: 20px;
    margin-left: 20px;
}
.other-sell .product-sell:hover .down .number{
    background: rgb(149, 0, 0);
    color: #ffffff;
}
.other-sell .product-sell figure{
    float: right;
    margin-left: 15px;
}
.other-sell .product-sell figure img{
    max-width: 75px;
    border-radius: 20px;
}
.other-sell .product-sell h2{
line-height: 25px;
height: 35px;
overflow: hidden;
margin-top: 6px;
}
.other-sell .product-sell h2 a{
color: #ffffff;
}
.other-sell .product-sell .down{
display: flex;
justify-content: space-between;
height: 50px;
align-items: center;
}
.other-sell .product-sell .down .number{
background: rgb(255, 255, 255);
width: 25px;
height: 25px;
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;
    font-size: 16px;
    flex-direction: column;
    align-items: start;
    position: relative;
    margin-left: 20px;
}
.other-sell .product-sell .down .price del{
    color: rgb(12, 0, 149);
    opacity: 0.7;
    margin-left: 13px;
    font-size: 16px;
}
.other-sell .product-sell .down .price ins{
    text-decoration: rgb(255, 255, 255);
    font-size: 16px;
    color: rgb(149, 0, 0);
    font-weight: bolder;
}
.other-sell .product-sell .down .price ins span{
    position: absolute;
    rotate: 269deg;
    font-size: 13px;
    top: 16px;
    left: -19px;
    opacity: 0.7;
}
.other-ban{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-right: 300px;
    width: 320px;
    direction: rtl;
    right: 20px;
}
.other-ban .product-sell{
    width: 30%;
    height: 150px;
    box-shadow: 3px 4px 0px 0px rgb(0, 0, 0);
    padding: 10px;
    background: rgb(97, 0, 0);
    flex-grow: 1;
    border-radius: 25px;
}
.other-ban .product-sell:hover .down .number{
    background: rgb(149, 0, 0);
    color: #ffffff;
}
.other-ban .product-sell figure{
    float: right;
    margin-left: 15px;
}
.other-ban .product-sell figure img{
    max-width: 75px;
    border-radius: 20px;
    margin-top: 28px;
}
.other-ban .product-sell h2{
line-height: 25px;
height: 35px;
overflow: hidden;
margin-top: 6px;
}
.other-ban .product-sell h2 a{
color: #ffffff;
}
.other-ban .product-sell .down{
display: flex;
justify-content: space-between;
height: 50px;
align-items: center;
}
.other-ban .product-sell .down .number{
background: rgb(12, 0, 149);
width: 25px;
height: 25px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.2s ease-in;
}
.other-ban .product-sell .down .price{
    display: flex;
    font-size: 16px;
    flex-direction: column;
    align-items: start;
    position: relative;
    margin-left: 20px;
}
.other-ban .product-sell .down .price del{
    color: rgb(12, 0, 149);
    opacity: 0.7;
    margin-left: 13px;
    font-size: 16px;
}
.other-ban .product-sell .down .price ins{
    text-decoration: rgb(255, 255, 255);
    font-size: 16px;
    color: rgb(149, 0, 0);
    font-weight: bolder;
}
.other-ban .product-sell .down .price ins span{
    position: absolute;
    rotate: 269deg;
    font-size: 13px;
    top: 16px;
    left: -19px;
    opacity: 0.7;
}
.container-had {
    display: flex;
}
.other-ban .product-sell-2{
    background-color: #ff4800;
}
.title-berand{
text-align: center;
}
.title-berand h4{
background: rgb(12, 0, 149);
color: #ffffff;
font-size: 20px;
border-radius: 25px 25px 0px 0px;
display: inline-block;
padding: 16px 20px;
}
.box-brand{
background: #ffffff;
box-shadow: 4px 5px 1px 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;
height: 180px;
margin-top: 10px;
}
.box-brand .inner-brand .item-brand .img{
max-width: 100px;
}
.box-brand .owl-carousel .owl-nav button{
    position: absolute;
    background-color: rgb(149, 0, 0);
    width: 55px;
    height: 45px;
    top: 50px;
    color: rgb(94, 80, 255);
}
.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: 50px 0px 0px 50px;
}
.box-brand .owl-carousel .owl-nav button.owl-prev::before{
content: "<";
}
.box-brand .owl-carousel .owl-nav button.owl-next::before{
    content: ">";
}
.kami-service{
display: flex;
gap: 54px;
padding: 30px 10px;
}
.kami-service .item-service{
display: flex;
flex-direction: column;
flex-grow: 1;
border-radius: 25px;
box-shadow: 0px 3px 10px 8px rgb(12, 0, 149);
text-align: center;
}
.kami-service .item-service img{
max-width: 90px;
margin: 0px auto 10px;
border-radius: 18px;
padding: 10px 0px;
}
.kami-service .item-service img span{
font-size: 14px;
}
footer{
    background: #000000;
    border-top: 2px solid rgb(12, 0, 149);
    margin-top: 40px;
    padding-top: 40px;
    box-shadow: 0px 0px 10px 0px;
}
.footer-bax{
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}
.footer-bax .footer-widget{
flex-grow: 1;
color: #ffffff;
}
.footer-widget.footer-about{
width: 30%;
}
.footer-widget .footer-about h3{
font-size: 16px;
color: #ffffff;
font-weight: 600;
margin-bottom: 15px;
}
.footer-widget .footer-about .f-w-content{
color: #ffffff;
font-size: 16px;
line-height: 45px;
text-align: justify;
}
.footer-widget .footer-about .f-w-content ul{
padding-right: 0px;
}
.footer-widget .footer-about .f-w-content ul li a{
    color: #ff1818;
}
.application{
    display: flex;
    justify-content: space-between;
    background-color: #00d9ff;
    border-radius: 15px;
    padding: 25px;
}
.application .right{
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
}
.application .right img{
max-width: 85px;
}
.application .right p{
padding-top: 20px;
}
.application .left{
display: flex;
gap: 12px;
align-items: center;
padding: 0px 15px;
}
.footer-line{
display: flex;
justify-content: space-between;
color: #ff0000;
border-bottom: #00d9ff;
padding: 20px 0px;
}
.footer-line .left span{
border-radius: 14px;
padding: 7px 7px;
border: 2px solid #ff0000;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
border-bottom: #00d9ff;
}
.fosele{
    color: #ff0000;
}
.hoghogh{
    color: #ff0000; 
  display: flex;
}

.hoghogh .right{
    padding-left: 750px;
}

/*12*/

/* 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: auto; /* 15% from the top and centered */
    padding: 39px;
    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{
    from{top:-300px;opacity: 0;}
    to{top:0px;opacity: 1;}
  }
  
  /* The Close Button */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    top: 13px;
    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-kami .logo-rig img{
    max-width: 120px;
    margin-right: 12px;
    margin-top: -42px;
    border-radius: 30px;
  }
  .form-register-kami {
    position: relative;
    z-index: 1;
    max-width: 360px;
    padding: 30px;
    text-align: center;
  }
  .form-register-kami input {
    font-family: "Roboto", sans-serif;
    outline: 0;
    background: #f2f2f2;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
  }
  .form-register-kami button {
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: rgb(12, 0, 149);
    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-kami button:hover,.form button:active,.form button:focus {
    background: rgb(12, 0, 149);
  }
  .form-register-kami .message {
    margin: 15px 0 0;
    color: #b3b3b3;
    font-size: 12px;
  }
  .form-register-kami .message a {
    color: rgb(255, 140, 0);
    text-decoration: none;
  }
  .form-register-kami .register-form {
    display: none;
  }
  /*صفحه محصول */
  .kami-breadcrumb{
    font-size: 14px;
    margin: 0px 20px;
    color: #ff1818;
  }
  .kami-breadcrumb a{
    color: #ff1818;
  }
  .product-intro{
background: #43b2e6;
border-radius: 16px;
box-shadow: 0px 4px 4px 0px #034ce7;
padding: 22px;
margin-bottom: 50px;
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 rgb(21, 0, 255);
  }
  .product-intro .right header h1{
font-size: 16px;
font-weight: 700;
color: rgb(12, 0, 149);
  }
  .product-intro .right header  span{
font-weight: 300;
color: aqua;
margin-top: 12px;
display: block;
  }
.product-intro .right .product-meta{
display: flex;
justify-content: space-between;
}
.product-intro .right .product-meta .meta-pro{
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 20px;
}
.product-intro .right .product-meta .meta-pro i{
    color: chartreuse;
    font-size: 18px;
    margin-left: 6px;
}
.product-intro .right .product-delivery{
    display: flex;
    gap: 10px 25px;
    margin-bottom: 25px;

}
.product-intro .right .product-delivery span i{
    color: #ff4800;
    margin-left: 6px;
    font-size: 16px;
}
.product-intro .right .additional-product{
display: flex;
flex-wrap: wrap;
gap: 14px 20px;
max-height: 90px;
overflow: hidden;
margin-bottom: 50px;
font-size: 14px;
gap: 90px;
}
.product-intro .right .additional-product .property-item{
display: flex;
}
.product-intro .right .additional-product .property-item span{
color: chartreuse;
font-weight: 400;
}
.product-intro .right .additional-product .property-item span i{
font-size: 14px;
color: chartreuse;
}
.product-intro .right .p-q{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.product-intro .right .p-q .quantity{
display: flex;
border: 1px solid #ff4800;
border-radius: 100px;
height: 45px;
}
.product-intro .right .p-q .quantity button{
font-size: 18px;
background: transparent;
padding: 0 20px;
cursor: pointer;
margin: 14px auto;
}
.product-intro .right .p-q .quantity button.plus{
border-left: 1px solid #ff4800;
}
.product-intro .right .p-q .quantity button.minus{
border-right: 1px solid #ff4800;
}
.product-intro .right .p-q .quantity .qty{
width: 100%;
height: 100%;
font-size: 20px;
text-align: center;
font-weight: 600;
appearance: textfield;
background: none;
}
.product-intro .right .p-q .single-price {
display: flex;
gap: 12px;
}
.product-intro .right .p-q .single-price .price{
    display: flex;
    gap: 12px;
}
.product-intro .right .p-q .single-price .price del{
opacity: 0.6;
color: chartreuse;
font-size: 14px;
}
.product-intro .right .p-q .single-price .price ins{
font-size: 20px;
color: #00ff73;
font-weight: 600;
text-decoration: none;
}
.product-intro .right .p-q .single-price .price ins span{
font-size: 14px;
}
.product-intro .right .p-q .single-price .discount{
background: #ff4800;
width: 30px;
height: 30px;
font-size: 16px;
color: chartreuse;
display:flex;
justify-content: center;
align-items: center;
font-weight: 700;
clip-path: polygon(70.71% 100%, 100% 70.71%, 100% 29.29%, 70.71% 0%, 29.29% 0%, 0% 29.29%, 0% 70.71%, 29.29% 100%);
background-color: #eb8b47
}
.product-intro .right .single-add-to-cart{
    background: rgb(12, 0, 149);
    color: rgb(255, 255, 255);
    border-radius: 14px;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    padding: 9px 0px;
}
.product-intro .left{
    display: flex;
    justify-content: space-between;
    width: 47%;
    position: relative;
    padding: 20px;

}
.product-intro .left::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #0026a4;
opacity: 0.1;
border-radius: 12px;
top: 0;
right: 0;
left: 0;
bottom: 0;
pointer-events: none;
}
.product-intro .left .product-action{
display: flex;
margin-top: 15%;
flex-direction: column;
gap: 10px;
max-width: 6%;
z-index: 3;
}
.product-intro .left .product-action .item-action button{
background: rgb(255, 140, 0);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
height: 45px;
min-width: 45px;
}
.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{
color: rgb(255, 255, 255);
font-size: 14px;
width: 45px;
line-height: 45px;
}
.product-intro .left .product-action .item-action button span{
white-space: nowrap;
max-width: 0;
overflow: hidden;
transition: all 0.2s ease-in-out;
}
.product-intro .left .product-imge{
    width: 75%;
    flex-shrink: 0;

}
.product-intro .left .product-imge figure img{
max-width: 150px;
margin-top: 12px;
margin: 84px 180px;
}
.product-intro .left .product-imge .countdown-timer {
    display: flex;
    justify-content: center;

}
.product-intro .left .product-imge .countdown-timer .number {
    background: rgb(12, 0, 149);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.product-intro .left ol{
display: flex;
flex-direction: column;
gap: 15px;
margin-left: 12px;
}
.product-intro .left ol li{
    background: rgb(255, 255, 255);
    height: 135px;
    width: 90px;
    padding: 4px;
}
.product-intro .left ol li img{
    height: 135px;
    width: 90px;
    opacity: 0.4;
    filter: blur(1px);
}
.product-intro .left ol li img.active{
    opacity: 1;
    filter: unset;
}

#modal_video .modal-content{
    width: 700px;
}
.modal_body video{
    max-width: 100%;
}
.modal-header i{
    font-size: 18px;
    color: #990000;
}
.modal-header h4{
    color: #c20000;
    font-size: 20px;
    margin-top: 10px;
}
#modal_video .modal-header h4{
    color: #c20000; 
    font-size: 20px;
    margin-top: 10px;
    margin-left: 210px;
}
#modal_share .modal-content{
width: 500px;
text-align: center;
background-color: cyan;
border-radius: 10px;
}
#modal_share .modal-header h4{
    margin-left: 98px;
}
.modal-body .short-link{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #00d9ff;
    border-radius: 12px;
    padding: 10px;
    font-size: 22px;
    margin-bottom: 20px;
}
.modal-body .short-link span{
    margin-top: 20px;
}
.modal-body .short-link textarea{
    text-align: left;
    width: 300px;
    height: 35px;
    padding: 8px;
    font-weight: 600;
    top: 20px;
    border-radius: 12px;
    font-size: 13px;
}
.modal-body .social-sharing{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    background: #00d9ff;
    border-radius: 12px;
}
.modal-body .social-sharing p{
margin-right: 14px;
margin-top: 14px;
}
.modal-body .box-sharing{
display: flex;
gap: 20px;
justify-content: center;
}
.modal-body .box-sharing a{
font-size: 22px;
display: flex;
}
.modal-body .box-sharing a,.telegram{
    color: #006c12;
}
.product-tab .product-description{
font-size: 16px;
line-height: 2.5;
box-shadow: 5px 5px 5px 0px blue;
border-radius: 12px;
padding: 10px;
color: #008897;
margin-bottom: 12px;
}
.product-tab .additional-product {
    margin-top: 34px;
    box-shadow: 5px 5px 5px 0px blue;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 34px;
}
.product-tab .additional-product h2{
color: #008897;
font-size: 20px;
}
.product-tab .additional-product .property-item{
display: flex;
gap: 15px;
font-weight: 350;
margin-bottom: 15px;
}
.product-tab .additional-product .property-item span{
    background:#008897;
    padding: 20px 10px;
    min-width: 200px;
    border-radius: 14px;
    color: #ffff;
}
.product-tab .additional-product .property-item span i{
    color: #ffffff;
    font-size: 25px;
    margin-left: 5px;
}
.product-tab .additional-product .property-item p{
    background:#008897;
    padding: 20px 10px;
    border-radius: 14px;
    color: #ffff;
    flex-grow: 1;
}
.floating-button{
    position: fixed;
    font-size: 30px;
    right: 50px;
    bottom: 40px;
    background: #43b2e6;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    z-index: 100;
    cursor: pointer;
}
.floating-button i{
transition: all 0.4s ease-in-out;
}
.floating-contact .contact-list{
width: 200px;
position: fixed;
right: 50px;
bottom: 120px;
background: #43b2e6;
box-shadow: 5px 5px 10px 0px #001f61; 
border-radius: 15px;
    z-index: 100;
    display: none;
}
.floating-contact .contact-list a{
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
border-radius: 15px;
}
.floating-contact .contact-list a img{
    height: 35px;
    width: 35px;
}
.floating-contact .contact-list a span{
    color: #ffffff;
    font-size: 14px;
}
.floating-contact .contact-list a:hover{
    background: #64e8ff;
}
/*page*/
.kami-single{
    background: #008897;
    font-size: 16px;
    line-height: 2.5;
    box-shadow: 5px 5px 5px 0px blue;
    border-radius: 12px;
    padding: 10px;
    color: #ffffff;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
}
.kami-single header h1{
    font-size: 32px;
    margin-bottom: 20px;
    margin-right: 20px;
}
.kami-single .side-single{
    width: 26%;
    margin: 10px;
    background: #008897;
}
.kami-single .widget{
    background: #0aa3eb;
    box-shadow: 5px 5px 5px 0px blue;
    border-radius: 22px;
    padding: 15px;
    margin-bottom: 16px;
    border:2px solid #000;
}
.kami-single .widget .widget-header h3{
    font-size: 18px;
    border-bottom: 2px solid #000;
    padding-bottom: 12px;
    margin-bottom: 12px;
    display: inline-block;
}
.kami-single .widget form{
    position: relative;
}
.kami-single .widget form input[type="text"]{
    background: #6bd0ff;
    box-shadow: 5px 5px 5px 0px blue;
    border:2px solid #000;
    border-radius: 12px;
}
.kami-single .widget form input[type="submit"]{
    background: #000670;
    color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 12px;
    font-size: 20px;
    padding: 6px;
    line-height: 2;
}
.kami-single .widget ul li{
    padding-bottom: 10px;
}
.kami-single .widget ul li a{
    color: #64e8ff;
    font-size: 20px;
}
.kami-single  .main-single{
    width: 70%;
}
.kami-single  .main-single .kami-arshive{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.main-single .kami-product{
    margin-top: 0px;
}
.kami-single .kami-product .product-item figure a img{
width: 180px;
height: 180px;
object-fit: contain;
}
.kami-single .error-page{
    text-align: center;
    margin: 40px auto;
}
#zuck-modal-content{
    direction: ltr;
}

.btns{
    margin: 20px 0;
}

.btn{
    padding: 10px 25px;
    margin: 0 10px;
    border: none;
    border-radius: 8px;
    background: #0d6efd;
    color: white;
    text-decoration: none;
    cursor: pointer;
}

.error-img{
    width: 460px;
    height: 210px;
    max-width: 100%;
    margin-top: 25px;
}