/*
Theme Name: سایت برتر
Theme URI: http://sbartar.ir/themes/amir ali
Author: امیرعلی گلچین
Author URI: http://sbartar.ir
Description: اگر شما یک طراح هستین و یا با طراحی های گرافیکی سروکار دارید به متن های برخورده اید که با نام لورم ایپسوم شناخته می‌شوند. لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) متنی ساختگی و بدون معنی است که برای امتحان فونت و یا پر کردن فضا در یک طراحی گرافیکی و یا صنعت چاپ استفاده میشود. طراحان وب و گرافیک از این متن برای پرکردن صفحه و ارائه شکل کلی طرح استفاده می‌کنند.

طراحان سایت هنگام طراحی قالب سایت معمولا با این موضوع رو برو هستند که محتوای اصلی صفحات آماده نیست. در نتیجه طرح کلی دید درستی به کار فرما نمیدهد. اگر طراح بخواهد دنبال متن های مرتبط بگردد تمرکزش از روی کار اصلی برداشته میشود و اینکار زمان بر خواهد بود. همچنین طراح به دنبال این است که پس از ارایه کار نظر دیگران را در مورد طراحی جویا شود و نمی‌خواهد افراد روی متن های موجود تمرکز کنند.

از آنجا که لورم ایپسوم، شباهت زیادی به متن های واقعی دارد، طراحان معمولا از لورم ایپسوم استفاده میکنند تا فقط به مشتری یا کار فرما نشان دهند که قالب طراحی شده بعد از اینکه متن در آن قرار میگرد چگونه خواهد بود و فونت ها و اندازه ها چگونه در نظر گرفته شده است.



Tested up to: 7.0
Requires PHP: 7.2
Version: 1.5
Text Domain: sbartar
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */


* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: 0;
}

@font-face {
    font-family: 'yekanbakh';
    src: url("font/YekanBakhFaNum-VF.woff");
    src: url("font/YekanBakhFaNum-VF.woff2");
}

img {
    max-width: 100%;
    height: auto;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

body {
    direction: rtl;
    font-size: 18px;
    text-align: right;
    font-family: "yekanbakh";
    font-weight: 400;
}

.header {
    margin-bottom: 20px;
    box-shadow: 0px 4px 8px 0px rgb(0, 217, 255);
}

.top-header {
    background: rgb(0, 217, 255);
    padding: 5px;
    margin-top: 5px;
    font-weight: 300;
}

.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: rgb(0, 0, 0);
    margin-right: 10px;
}

.main-header {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.main-h-right {
    display: flex;
    align-items: center;
    width: 60%;
}

.main-h-right .logo {
    max-width: 136px;
}

.main-h-right .logo a {
    display: flex;
    color: #09ff00;
}

.main-h-right .logo a img {
    max-width: 136px;
}

.main-h-right .search-main {
    width: 100%;
    margin-right: 50px;
}

.main-h-right .search-main form {
    position: relative;
}

.main-h-right .search-main form input[type="search"] {
    background-color: rgb(0, 217, 255);
    border-color: lightgray;
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    padding-right: 40px;
}

.main-h-right .search-main form button {
    position: absolute;
    right: 10px;
    top: 15px;
    font-size: 20px;
    cursor: pointer;
    border-color: transparent;
}

.main-h-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.main-h-left .favortie-btn-header {
    background: rgb(0, 195, 255);
    padding: 5px;
    border-radius: 10px;
}

.main-h-left .favortie-btn-header a {
    color: rgb(0, 0, 0);
    text-decoration: none;
    display: flex;
    align-items: center;
}

.main-h-left .favortie-btn-header a i {
    font-size: 19px;
    margin-left: 5px;
}

.main-h-left .cart-btn-header a {
    background: rgb(0, 195, 255);
    color: rgb(0, 0, 0);
    text-decoration: none;
    padding: 5px;
    border-radius: 10px;
}

.main-h-left .cart-btn-header a .cart-btn-text {
    padding-left: 10px;
    border-left: 1px solid rgb(0, 217, 255);
}

.main-h-left .cart-btn-header a .cart-btn-num {
    margin-right: 5px;
}

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

.main-menu {
    display: flex;
    align-items: center;
}

.megamenu {
    border-left: 2px solid hotpink;
    padding-left: 10px;
    font-weight: 450;
    margin-right: 5px;
    cursor: pointer;
    position: relative;
}

.megamenu .title-menu {
    color: rgb(0, 195, 255);
}

.menu-header>ul>li {
    list-style: none;
    display: inline-block;
    margin: 0px 10px;
    padding-top: 15px;
    position: relative;
}

.menu-header>ul>li a {
    text-decoration: none;
    color: rgb(0, 217, 255);
    padding: 4px;
}

.menu-header>ul>li>a:hover {
    text-shadow: 1px 1px 6px rgb(0, 0, 0);
    color: red;
    border-bottom: 1px solid darkblue;
}

.register-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 5px;
    color: rgb(0, 0, 0);
    border: 3px dotted rgb(0, 195, 255);
    box-shadow: 2px 2px 6px rgb(0, 217, 255);
}

.menu-header>ul>li ul {
    position: absolute;
    width: 133px;
    top: 30px;
    box-shadow: 3px 3px 10px 0px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 7px 0px;
    right: -17px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    z-index: 999;
    background-color: #000000;
}

.menu-header>ul>li>ul>li>a {
    padding: 7px 14px;
    display: block;
}

.menu-header>ul>li:hover>ul {
    visibility: visible;
    opacity: 1;
    top: 57px;
}

.menu-header>ul>li>ul>li>a:hover {
    color: red;
    font-size: 19px;
}

.mok-megamenu>ul {
    position: absolute;
    width: 250px;
    box-shadow: 0px 3px 10px rgb(0, 217, 255);
    padding-right: 0px;
    visibility: hidden;
    opacity: 0;
    z-index: 1000;
    background-color: lightcyan;
}

.megamenu:hover>.mok-megamenu>ul {
    visibility: visible;
    opacity: 1;
    top: 45px;
}

.mok-megamenu>ul::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 40px;
    top: -20px;
}

.mok-megamenu>ul>li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mok-megamenu>ul>li:hover {
    background-color: rgb(255, 0, 0);
}

.mok-megamenu>ul>li:hover>a {
    color: rgb(0, 217, 255)
}

.mok-megamenu>ul>li>a {
    padding: 5px;
    color: rgb(255, 136, 0);
}

.mok-megamenu>ul>li>i {
    color: rgb(218, 167, 1);
    font-size: 14px;
}

.mok-megamenu>ul>li>ul {
    position: absolute;
    background-color: rgb(0, 217, 255);
    right: 100%;
    top: 0px;
    width: 900px;
    display: flex;
    padding: 10px;
    height: 100%;
    box-shadow: 0px 5px 10px 0px rgb(235, 0, 0);
    visibility: hidden;
    opacity: 0;
}

.mok-megamenu>ul>li:hover>ul {
    visibility: visible;
    opacity: 1;
}

.mok-megamenu>ul>li>ul>li {
    width: 33%;
}

.mok-megamenu>ul>li>ul>li>a {
    color: rgb(235, 0, 0);
    border-right: 3px solid red;
    padding-right: 5px;
}

.mok-megamenu>ul>li>ul>li>ul {
    padding-right: 0px;
    margin-top: 10px;
}

.mok-megamenu>ul>li>ul>li>ul li a:hover {
    color: rgb(235, 0, 0);
    display: block;
    padding: 5px;
    font-size: 16px;
}

.mok-megamenu>ul>li>ul>li>ul li a:hover {
    font-size: 18px;
}

.main-slider img {
    width: 100%;
    height: 300px;
}

.main-slider .owl-stage-outer {
    border: 3px solid darkgoldenrod;
    border-radius: 15px;
    box-shadow: 0px 5px 10px 0px rgb(0, 217, 255);
}

.main-slider .owl-theme .owl-dots {
    position: absolute;
    bottom: -35px;
    width: 100%;
}

.main-slider .owl-theme .owl-dots button .owl-dot span {
    background-color: tomato;
    width: 12px;
    height: 12px;
    margin: 2px 3px;
}

.main-slider .owl-theme .owl-dots button:active span {
    background-color: rgb(235, 0, 0);
    width: 18px;
}

.main-slider .owl-carousel .owl-nav button {
    position: absolute;
    background: rgb(0, 217, 255);
    color: rgb(235, 0, 0);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

.main-slider:hover .owl-carousel .owl-nav button {
    opacity: 1;
}

.main-slider .owl-carousel .owl-nav button:hover {
    background-color: rgb(255, 0, 0);
    color: black;
}

.main-slider .owl-carousel .owl-nav button.owl-next {
    right: 80px;
}

.main-slider .owl-carousel .owl-nav button.owl-prev {
    right: 35px;
}

.main-slider.owl-theme .owl-nav {
    margin-top: -55px;
}

.mok-product {
    margin-top: 115px;
}

.mok-product .title-pro h5 {
    margin-bottom: 20px;
}

.mok-product .title-pro h5 a {
    color: rgb(0, 217, 255);
    border-bottom: 3px solid rgb(255, 0, 0);
    padding: 5px;
}

.product-item {
    background: rgb(0, 217, 255);
    box-shadow: 5px 5px 10px 0px rgb(255, 0, 0);
    margin: 13px 15px;
    padding: 10px 15px;
    border-radius: 20px;
    border: 2px solid rgb(255, 0, 0);
}

.product-item .color-dis .color ul li span {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    float: right;
    margin-left: 5px;
}

.product-item .color-dis .color ul {
    padding-right: 0px;
}

.product-item .color-dis {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-item .color-dis .color ul li {
    float: right;
}

.product-item .color-dis .discount {
    background: red;
    color: rgb(0, 0, 0);
    border-radius: 5px;
    font-size: 14px;
    padding: 2px;
}

.product-item h2 {
    font-size: 19px;
    margin-top: 20px;
    overflow: hidden;
    height: 60px;
    line-height: 20px;
}

.product-item h2 a {
    color: rgb(0, 0, 0);
    word-wrap: break-word;
}

.product-item .down {
    display: flex;
    justify-content: space-between;
}

.product-item .down .addtocart-btn>a {
    display: flex;
    color: rgb(255, 0, 0);
    font-size: 20px;
    margin-top: 14px;
    margin-right: 13px;
}

.product-item .down .price {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-left: 30px;
}

.product-item .down .price del {
    font-size: 16px;
    color: rgb(0, 0, 0);
    opacity: 0.7;
}

.product-item .down ins {
    text-decoration: none;
    color: #000000;
    font-weight: bold;
    font-size: 18px;
}

.product-item .down .price ins span {
    position: absolute;
    rotate: 270deg;
    opacity: 0.7;
    left: -35px;
    top: 13px;
    font-size: 15px;
}

.amazing-product {
    background: rgb(0, 0, 0);
    border-radius: 20px;
    box-shadow: 5px 5px 10px 0px rgb(0, 217, 255);
}

.amazing-product .amazing-thumbnail img {
    max-width: 220px;
    margin: 15px auto;
}

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

.amazing-product .amazing-btn a {
    background: rgb(255, 0, 0);
    color: rgb(0, 0, 0);
    font-weight: bold;
    padding: 10px 30px;
    display: inline-flex;
    align-items: center;
    border-radius: 15px;
}

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

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

.amazing-product .countdown-timer .number {
    background: rgb(255, 0, 0);
    color: #000;
    width: 25px;
    height: 25px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.amazing-product .countdown-timer span.dot {
    font-size: 24px;
    color: #e6c6c6;
    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: #000000;
}

.special-box h4 {
    font-size: 19px;
    color: #000000;
}

.mok-special {
    margin-top: 50px;
}

.special-box {
    position: relative;
    padding: 20px 10px 50px 0px;
}

.special-box::before {
    content: "";
    background: rgb(0, 68, 255);
    width: 40%;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 30px;
    z-index: -1;
}

.special-box::after {
    content: "";
    background: rgb(255, 0, 0);
    width: 40%;
    position: absolute;
    top: 0px;
    right: 7%;
    bottom: 0px;
    border-radius: 30px;
    z-index: -1;
    transform: translate(-55px, 0px) skew(-15deg, 0deg);
}

.special-box .owl-stage-outer {
    background: rgb(0, 217, 255);
    border: 1px solid rgb(0, 0, 0);
    border-radius: 16px;
    box-shadow: 5px 5px 10px 0px rgb(255, 0, 0);
    width: 70%;
}

.special-box .special-item {
    display: flex;
    padding: 25px;
    width: 1000px;
    position: relative;
}

.special-box .special-item figure {
    width: 20%;
}

.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: 13px;
    height: 13px;
    border-radius: 50%;
    float: left;
    margin-left: 5px;
}

.special-box .special-item figure img {
    max-width: 250px;
}

.special-box .special-item .det-special {
    width: 77%;
}

.special-box .special-item .det-special h2 {
    font-size: 21px;
    margin-bottom: 20px;
}

.special-box .special-item .det-special h2 a {
    color: #000000;
}

.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: 6px;
    color: rgb(0, 0, 0);
}

.special-box .special-item .det-special .additional-product .property-item i {
    font-size: 10px;
    margin-left: 10px;
    color: rgb(255, 0, 0);
}

.special-box .special-item .det-special .down {
    display: flex;
    gap: 10px;
    align-items: center;
}

.special-box .special-item .det-special .down a {
    background: rgb(255, 0, 0);
    color: #000000;
    border-radius: 10px;
    padding: 10px;
    margin-right: 12px;
}

.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-box .special-item .det-special .down .price ins {
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    color: #000000;
}

.special-box .special-item .det-special .down .price ins span {
    font-size: 15px;
}

.special-box .special-item .discount {
    position: absolute;
    background: rgb(255, 0, 0);
    left: 300px;
    top: 0;
    width: 60px;
    height: 60px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: center;
    color: rgb(0, 0, 0);
    padding-top: 5px;
}

.special-slider {
    display: flex !important;
    justify-content: space-between;
}

.special-box .owl-dots {
    width: 27%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0px !important;
    max-height: 310px;
    overflow: auto;
    align-items: end;
    padding-left: 15px;
}

.special-box .owl-dot {
    background: rgb(250, 251, 252);
    border-radius: 10px;
    width: 85%;
    padding: 15px;
    text-align: right;
}

.special-box .owl-dot button {
    background: transparent;
    cursor: pointer;
}

.special-box .owl-dot .list-special {
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.special-box .owl-dot .list-special figure {
    background: red;
    padding: 3px 5px;
}

.special-box .owl-dots .list-special figure img {
    max-width: 65px;
    border-radius: 10px;
}

.special-box .owl-dots .active {
    background: rgb(47, 0, 255);
    width: 90%;
}

.special-box .owl-dots .list-special .active b {
    color: rgb(255, 0, 0);
}

.box-sell {
    display: flex;
    justify-content: space-between;
}

.box-sell .best-sell {
    width: 275px;
    background: rgb(255, 0, 0);
    position: relative;
    border-radius: 20px;
    padding: 15px 20px;
}

.box-sell .best-sell .head {
    display: flex;
    justify-content: center;
    color: #000000;
}

.box-sell .best-sell .head p {
    font-weight: bold;
    font-family: "yakanbakh";
    font-size: 20px;
}

.box-sell .best-sell figure {
    border-radius: 50px;
    width: 170px;
    height: 170px;
    margin: 15px auto;
    padding: 15px;
    overflow: hidden;
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 5px 5px rgb(0, 255, 242);
    }

    100% {
        box-shadow: 0 0 10px 10px rgb(0, 255, 242);
    }
}

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

.box-sell .best-sell h2 {
    overflow: hidden;
    line-height: 23px;
}

.box-sell .best-sell h2 a {
    font-size: 16px;
    color: rgb(0, 0, 0);
    font-weight: 450;
}

.box-sell .best-sell .price {
    display: flex;
    gap: 20px;
    color: #000;
    justify-content: space-evenly;
    margin: 13px 0px;
}

.box-sell .best-sell .price del {
    font-size: 15px;
    font-weight: 450;
}

.box-sell .best-sell .price ins {
    text-decoration: none;
    font-weight: 700;
    font-size: 19px;
}

.box-sell .best-sell .price ins span {
    font-size: 15px;
}

.box-sell .best-sell .add-cart {
    position: absolute;
    left: 112px;
    bottom: -24px;
}

.box-sell .best-sell .add-cart a i {
    font-size: 40px;
    background: #000000;
    color: rgb(199, 197, 207);
    border-radius: 50px;
    padding: 5px;
}

.other-sell {
    display: flex;
    align-content: start;
    flex-wrap: wrap;
    margin-right: 20px;
    padding: 10px;
    gap: 15px;
}

.other-sell .product-sell {
    width: 30%;
    background: rgb(0, 217, 255);
    box-shadow: 0px 0px 10px 0px hotpink;
    padding: 15px;
    height: 145px;
    flex-grow: 1;
    border-radius: 20px;
}

.other-sell .product-sell:hover .down .number {
    background-color: rgb(255, 0, 0);
    color: rgb(0, 0, 0);
}

.other-sell .product-sell figure {
    float: right;
    margin-left: 10px;
}

.other-sell .product-sell figure img {
    max-width: 70px;
}

.other-sell .product-sell h2 {
    line-height: 23px;
    height: 46px;
    overflow: hidden;
    margin-top: 10px;
}

.other-sell .product-sell h2 a {
    color: #000;
    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-color: rgb(255, 255, 255);
    height: 32px;
    width: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    transition: all 0.2s ease-in-out;
}

.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: 16px;
    color: #000000;
    opacity: 0.7;
}

.other-sell .product-sell .down .price ins span {
    text-decoration: none;
    rotate: 267deg;
    position: absolute;
    top: 17px;
    left: -32px;
    opacity: 0.7;
}

.k {

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.a {
    background: #ff0000;
    width: 33%;
    border-radius: 20px;
    box-shadow: 0px 0px 10px 0px rgb(0, 217, 255);

    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    margin-top: 10px;
    margin: 14px;

}

.a figure img {
    max-width: 79px;
}

.title-brand {
    text-align: center;
}

.title-brand h4 {
    background-color: rgb(0, 217, 255);
    display: inline-block;
    color: rgb(0, 0, 0);
    padding: 15px 30px;
    border-radius: 30px 30px 0px 0px;
    font-weight: 700;
    font-size: 18px;
}

.box-brand {
    background: rgb(0, 217, 255);
    box-shadow: 5px 5px 10px 0px;
}

.box-brand .inner-brand {
    width: 88%;
    margin: auto;
}

.box-brand .inner-brand .item-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    margin-top: 10px;
}

.box-brand .inner-brand .item-brand img {
    max-width: 120px;
}

.box-brand .owl-carousel .owl-nav button {
    background: rgb(255, 0, 0);
    position: absolute;
    width: 65px;
    height: 45px;
    top: 50px;
    color: rgb(0, 0, 0);
}

.box-brand .owl-carousel .owl-nav button:hover {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 0, 0);
}

.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: 10px;
    background: rgb(0, 217, 255);
}

.mok-service .service-item {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: center;
    box-shadow: 0px 0px 9px 0px rgb(255, 0, 0);
    border-radius: 10px;
}

.mok-service .service-item img {
    max-width: 70px;
    margin: 0 auto 0px;
}

.mok-service .service-item span {
    font-size: 13px;
    font-weight: 300;
    color: #000000;
}

footer {
    background: rgb(0, 217, 255);
    border-top: 2px solid rgb(255, 0, 0);
    margin-top: 40px;
    padding-top: 40px;
    box-shadow: 0px 0px 10px 0px rgb(255, 1, 1);
}

.footer-box {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.footer-box .footer-widget {
    flex-grow: 1;
}

.footer-widget.footer-about {
    width: 30%;
}

.footer-box .footer-widget h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
    color: rgb(0, 0, 0);
}

.footer-box .footer-widget .f-w-content {
    color: #000000;
    line-height: 45px;
    text-align: justify;
    font-size: 14px;
}

.footer-box .footer-widget .f-w-content ul {
    padding-right: 0px;
}

.footer-box .footer-widget .f-w-content ul li a {
    color: #000000;
}

.application {
    display: flex;
    justify-content: space-between;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    padding: 25px;
}

.application .right {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 16px;
    font-weight: 500;
}

.application .right img {
    max-width: 60px;
}

.application .right p {
    padding-top: 12px;
}

.application .left {
    display: flex;
    gap: 12px;
}

.footer-line {
    display: flex;
    justify-content: space-between;
    padding: 20px 0px;
    border-bottom: 1px solid rgb(255, 0, 0);
    color: #000000;
}

.footer-line .left span {
    border: 2px solid rgb(0, 0, 0);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 10px 10px;
}

.footer-line .left {
    max-width: 70px;
}

.footer-a {
    display: flex;
    justify-content: space-between;
    padding: 20px 0px;
    border-bottom: 1px solid rgb(255, 0, 0);
    color: #000000;
}

.footer-a .left span {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 10px 10px;
}

.footer-a .left {
    max-width: 70px;
}

/* 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: 0px;
    border: 1px solid #888;
    width: 460px;
    position: relative;
    animation-name: animatetop;
    animation-duration: 0.4s;

}

@keyframes animatetop {
    from {
        top: -150px;
        opacity: 0
    }

    to {
        top: 0px;
        opacity: 1
    }
}


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

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.login-page {
    width: 360px;
    padding: 8% 0 0;
    margin: auto;
}

.form-register-mok {
    position: relative;
    z-index: 1;
    max-width: 100%;
    padding: 30px;
    text-align: center;
}

.form-register-mok .logo {
    max-width: 150px;
    margin: auto;
}

.form-register-mok input {
    font-family: 'yekanbakh';
    outline: 0;
    background: #f2f2f2;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
}

.form-register-mok button {
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: #00ccff;
    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-register-mok button:active,
.form-register-mok button:focus {
    background: red;
}

.form-register-mok .message {
    margin: 15px 0 0;
    color: #ff0000;
    font-size: 12px;
}

.form-register-mok .message a {
    color: #fe0000;
    text-decoration: none;
}

.form-register-mok .register-form {
    display: none;
}

.mok-breadcrumb {
    font-size: 14px;
    margin: 20px 0;
    color: #000;
}

.mok-breadcrum a {
    color: #000000;
}

.product-intro {
    background: rgb(0, 217, 255);
    border-radius: 15px;
    box-shadow: 0px 5px 5px 0px rgb(255, 0, 0);
    padding: 25px;
    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 rgb(0, 0, 0);
}

.product-intro .right header h1 {
    font-size: 18px;
    font-weight: 700;
    color: #ff0000;
}

.product-intro .right header span {
    font-weight: 300;
    color: #000;
    margin-top: 10px;
    display: block;
}

.product-intro .right .product-meta {
    display: flex;
    justify-content: space-between;
}

.product-intro .right .product-meta .meta-pro {
    align-items: center;
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
}

.product-intro .right .product-meta .meta-pro i {
    color: #ff0000;
    font-size: 20px;
    margin-left: 5px;
}

.product-intro .right .product-delivery {
    display: flex;
    gap: 10px 25px;
    margin-bottom: 25px;
}

.product-intro .right .product-delivery span i {
    color: rgb(0, 0, 0);
    margin-left: 5px;
    font-size: 14px;
}

.product-intro .right .additional-product {
    display: flex;
    flex-wrap: wrap;
    gap: 15PX 20PX;
    max-height: 90px;
    overflow: hidden;
    margin-bottom: 50px;
    font-size: 16px;
}

.product-intro .right .additional-product .property-item {
    display: flex;
}

.product-intro .right .additional-product .property-item span {
    color: #ffffff;
    font-weight: 300;
}

.product-intro .right .additional-product .property-item span i {
    font-size: 10px;
    color: rgb(255, 0, 0);
}

.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 red;
    border-radius: 8px;
    width: 180px;
    height: 50px;
}

.product-intro .right .p-q .quantity button {
    font-size: 20px;
    background: #ff0000;
    padding: 0 20px;
    cursor: pointer;
    margin: 10px auto;
}

.product-intro .right .p-q .quantity button .plus {
    border-left: 1px solid rgb(0, 0, 0);
}

.product-intro .right .p-q .quantity button .minus {
    border-right: 1px solid rgb(0, 0, 0);
}

.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 .p-q    .single-price{
    display: flex;
    gap: 15px;
}
.product-intro .right .p-q    .single-price  .price{
    display: flex;
    gap: 15px;
}
.product-intro .right .p-q    .single-price  .price    del{
    font-size: 20px;
    font-weight: 400;
    color: #fafafa;
}

.product-intro .right .p-q    .single-price  .price    ins{
    font-size: 23px;
    text-decoration: none;
    font-weight: 700;
    color: #000;
}
.product-intro .right .p-q    .single-price  .price    ins  span{
    font-size:16px ;
    font-weight: 450;
}
.product-intro .right .p-q    .single-price  .discount{
    background: rgb(0, 0, 0);
    color: #ffffff;
    font-size: 16px;
    font-weight: 450;
    width: 40px;
    height:40px ;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}
.product-intro    .right   .single-add-to-cart{
    background: #000000;
    color: #00e5ff;
    font-size: 18px;
    font-weight: 450;
    width: 100%;
    padding: 8px 0px;
    cursor: pointer;
    border-radius: 8px;
}


.product-intro    .right   .single-add-to-cart  i{
    margin-left: 8px;
}

.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: #fff6f6;
    opacity: 0.4;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    border-radius: 15px;
}

.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: rgb(255, 0, 0);
    border: 1px solid rgb(0, 0, 0);
    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 span {
    white-space: nowrap;
    max-width: 0px;
    overflow: hidden;
    transition: all  0.3s   ease-in;
}

.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;
    color: #00e5ff;
}
.product-intro  .left  .product-image {
    width: 75%;
    flex-shrink: 0;
    margin-top: 10px;
}
.product-intro  .left  .product-image   .countdown-timer{
	display: flex;
	justify-content: center;
}
.product-intro  .left  .product-image   .countdown-timer   .number{
	background: crimson;
	color: white;
	width: 30px;
	height: 30px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}
.product-intro   .left  ol{
    display: flex;
    flex-direction: column;
    width: 75px;
    gap: 10px;
    margin-left: 10px;
}
.product-intro   .left  ol  li{
    background: rgb(0, 0, 0);
    height: 60px;
    width: 60px;
    border: 1px  solid  red;
    padding: 5px;
    cursor: pointer;
    border-radius: 10px;
    margin-left: 9px;
    z-index: 2;
}
.product-intro   .left  ol  li  img{
    opacity: 0.5;
    filter: blur(1px);
}

.product-intro   .left  ol  li  img.active{
    opacity: 1;
    filter: unset;
}
#modal_video    .modal-content{
    width: 750px;
}
.modal-body   video{
    max-width: 100%;
}
.modal-header  i{
    font-size: 18px;
    color: #fe0000;
}
.modal-header  h4{
   color: rgb(0, 217, 255) ;
   font-size: 18px;
   margin-top: 11px;
}



#modal_share   .modal-content{
    width: 500px;
}
.modal-body   .shortlink{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:  rgb(0, 217, 255);
    box-sizing: 5px;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}
.modal-body   .shortlink   textarea{
    text-align: left;
    width: 300px;
    height: 35px;
    padding: 7px;
    font-weight: 500;

}
.modal-body   .social-sharing{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

}
.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.whatsapp{
    color: green;
}

.product-tab  .product-description{
    font-size: 16px;
    line-height: 2.5;
    box-shadow: 5px  5px  10px   0px   rgb(235, 0, 0);
    padding: 25px;
    border-radius: 20px;
    margin-top: 40px;
    color: #000000;
    background-color: #00e5ff;
}

.product-tab  .additional-product {
    margin-top: 35px;
    box-shadow: 5pxs 5px 10px 0px  rgb(0, 0, 0);
    padding: 25px;
    border-radius: 20px;
}
.product-tab  .additional-product h2{
    color: rgb(255, 0, 0);
    font-size: 24px;
}
.product-tab  .additional-product    .property-item{
    display:flex;
    gap: 15px;
    font-weight: 450;
    margin-bottom: 15px;
    min-width: 200px;
    color: #000000;
}
.product-tab  .additional-product    .property-item  span{
    background: #00e5ff;
    padding: 20px 10px;
    border-radius: 18px;
}
.product-tab  .additional-product    .property-item  span i{
    color: #00ccff;
    font-size: 10px;
    margin-left: 5px;
}
.product-tab  .additional-product    .property-item  p{
    background: #ff0000;
    padding: 20px 10px;
    flex-grow: 1;
    border-radius: 10px;
}
.floating-button {
    font-size: 35px;
    position: fixed;
    right: 50px;
    bottom: 40px;
    background: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    cursor: pointer;
}
.floating-contact  .contact-list{
    width: 200px;
    position: fixed;
    right: 50px;
    bottom: 130px;
    background: #fe0000;
    box-shadow: 5px  5px  10px  0px  rgb(0, 217, 255);
    border-radius: 15px;
    z-index: 100;
    display: none;
}
.floating-contact  i{
    transition: all  0.2s   ease-in-out;
}
.floating-contact  .contact-list   a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    border-radius: 15px;
}
.floating-contact  .contact-list   a   img{
    width: 35px; 
    height: 35px;
}
.floating-contact  .contact-list   a  span{
    font-size: 14px;
    color: #000000;
}
.floating-contact  .contact-list   a:hover{
    background-color: rgb(0, 217, 255);
}

.mok-single {
    background: rgb(161, 242, 245);
    padding: 20px;
    border-radius: 20px;
    color: rgb(0, 0, 0);
    line-height: 2.5;
    box-shadow: 5px  5px  10px  0px  rgb(0, 0, 0);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}
.mok-single   .post-single  header   h3 {
    color: rgb(255, 0, 0);
    font-size: 24px;
    margin-bottom: 20px;
}
.mok-single   .post-single  p {
    margin-right: 25px;
}
.mok-single   .side-single{
    width: 27%;
    margin-top: 14px;
}



.widget{
    background: rgb(255, 0, 0);
    box-shadow: 5px  5px  10px  0px  rgb(0, 0, 0);
    border-radius: 15px;
    padding: 10px;
    margin-bottom: 22px;
    border: 2px  solid   rgb(255, 255, 255);
    margin-right: 20px;
}
.widget   .widget-header  h3{
    color: rgb(0, 255, 242);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 20px;
    padding: 10px;
    border-bottom:2px  solid #fe0000;
    display: inline-block;
}
.widget   form {
    position: relative;
}
.widget   form   input[type="text"] {
    border: 2px  solid  rgb(0, 0, 0);
    border-radius: 15px;
    background: rgb(0, 255, 234);
    width: 75%;
}
.widget   form  input[type="submit"] {
    background: rgb(8, 8, 8);
    color: white;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 15px;
    padding: 5px   8px;
    font-size: 14px;
}
.widget     ul   li {
    border-bottom: 1px  solid  rgb(255, 255, 255);
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.widget     ul   li:last-child {
    border-bottom: none;
}
.widget     ul   li   a {
    color: rgb(0, 0, 0);
    font-size: 18px;
}
.widget     ul   li   a:hover {
    font-size: 21px;
}


.mok-single   .main-single {
    width: 70%;
}
.mok-single   .main-single   .mok-archive {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.mok-single   .main-single   .mok-product {
    margin-top: 0px;
}
.mok-single .main-single .mok-product .product-item {
    flex: 0 0 calc(33.33% - 30px);
    max-width: calc(33.33% - 30px);
    margin: 13px 15px;
}

.page-not-found{
   background: #09ff00;
   border-radius: 15px;
   display: flex;
   
}

.wrapper{
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 15px;
    padding: 30px   8px;


}
.btn404{
   display: flex;
    align-items: center;
    justify-content: center;
    
}
.btn404  a{
   
    background: rgb(255, 0, 0);
    box-shadow: 5px  5px  10px  0px  rgb(0, 0, 0);
    border-radius: 15px;
    padding: 10px;
    margin-bottom: 22px;
   margin-top: 100px;
    margin-right: 20px;

}

.btn404  p{
    margin-top: 0px;
    color: #000000;
      margin-left: 10px;
  margin-right: 10px;
}

.main-slider  .mok-product{
    margin-top: 0px;
}
.main-slider  .mok-product  img{
    max-width: 200px;
}
#zuck-modal-content{
    direction: ltr;
    text-align: left;
}
#zuck-modal-content   .story-viewer   .slides-pagination   span{
    font-family: initial;
}

#zuck-modal-content   .story-viewer  .head  .right  .close{
    left: 1300px;
}
#zuck-modal-content   .story-viewer  .head .time{
    display: none  !important;
}
#stories{
    display: flex;
    justify-content: center;
}