﻿@import url('font-awesome.min.css');

@font-face {
    font-family: IRANSansfanum;
    font-style: normal;
    font-weight: 900;
    src: url('/Content/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_Black.eot');
    src: url('/Content/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_Black.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/Content/fonts/iransansfanum/woff2/IRANSansWeb(FaNum)_Black.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/Content/fonts/iransansfanum/woff/IRANSansWeb(FaNum)_Black.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/Content/fonts/iransansfanum/ttf/IRANSansWeb(FaNum)_Black.ttf') format('truetype');
}

@font-face {
    font-family: IRANSansfanum;
    font-style: normal;
    font-weight: bold;
    src: url('/Content/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_Bold.eot');
    src: url('/Content/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/Content/fonts/iransansfanum/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/Content/fonts/iransansfanum/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/Content/fonts/iransansfanum/ttf/IRANSansWeb(FaNum)_Bold.ttf') format('truetype');
}

@font-face {
    font-family: IRANSansfanum;
    font-style: normal;
    font-weight: 500;
    src: url('/Content/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_Medium.eot');
    src: url('/Content/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/Content/fonts/iransansfanum/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/Content/fonts/iransansfanum/woff/IRANSansWeb(FaNum)_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/Content/fonts/iransansfanum/ttf/IRANSansWeb(FaNum)_Medium.ttf') format('truetype');
}

@font-face {
    font-family: IRANSansfanum;
    font-style: normal;
    font-weight: 300;
    src: url('/Content/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_Light.eot');
    src: url('/Content/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/Content/fonts/iransansfanum/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/Content/fonts/iransansfanum/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/Content/fonts/iransansfanum/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
}

@font-face {
    font-family: IRANSansfanum;
    font-style: normal;
    font-weight: 200;
    src: url('/Content/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_UltraLight.eot');
    src: url('/Content/fonts/iransansfanum/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/Content/fonts/iransansfanum/woff2/IRANSansWeb(FaNum)_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/Content/fonts/iransansfanum/woff/IRANSansWeb(FaNum)_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/Content/fonts/iransansfanum/ttf/IRANSansWeb(FaNum)_UltraLight.ttf') format('truetype');
}

@font-face {
    font-family: IRANSansfanum;
    font-style: normal;
    font-weight: normal;
    src: url('/Content/fonts/iransansfanum/eot/IRANSansWeb(FaNum).eot');
    src: url('/Content/fonts/iransansfanum/eot/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/Content/fonts/iransansfanum/woff2/IRANSansWeb(FaNum).woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/Content/fonts/iransansfanum/woff/IRANSansWeb(FaNum).woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/Content/fonts/iransansfanum/ttf/IRANSansWeb(FaNum).ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 900;
    src: url('/Content/fonts/iransans/eot/IRANSansWeb_Black.eot');
    src: url('/Content/fonts/iransans/eot/IRANSansWeb_Black.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/Content/fonts/iransans/woff2/IRANSansWeb_Black.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/Content/fonts/iransans/woff/IRANSansWeb_Black.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/Content/fonts/iransans/ttf/IRANSansWeb_Black.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('/Content/fonts/iransans/eot/IRANSansWeb_Bold.eot');
    src: url('/Content/fonts/iransans/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/Content/fonts/iransans/woff2/IRANSansWeb_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/Content/fonts/iransans/woff/IRANSansWeb_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/Content/fonts/iransans/ttf/IRANSansWeb_Bold.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('/Content/fonts/iransans/eot/IRANSansWeb_Medium.eot');
    src: url('/Content/fonts/iransans/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/Content/fonts/iransans/woff2/IRANSansWeb_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/Content/fonts/iransans/woff/IRANSansWeb_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/Content/fonts/iransans/ttf/IRANSansWeb_Medium.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('/Content/fonts/iransans/eot/IRANSansWeb_Light.eot');
    src: url('/Content/fonts/iransans/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/Content/fonts/iransans/woff2/IRANSansWeb_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/Content/fonts/iransans/woff/IRANSansWeb_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/Content/fonts/iransans/ttf/IRANSansWeb_Light.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('/Content/fonts/iransans/eot/IRANSansWeb_UltraLight.eot');
    src: url('/Content/fonts/iransans/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/Content/fonts/iransans/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/Content/fonts/iransans/woff/IRANSansWeb_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/Content/fonts/iransans/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('/Content/fonts/iransans/eot/IRANSansWeb.eot');
    src: url('/Content/fonts/iransans/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/Content/fonts/iransans/woff2/IRANSansWeb.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/Content/fonts/iransans/woff/IRANSansWeb.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/Content/fonts/iransans/ttf/IRANSansWeb.ttf') format('truetype');
}


@font-face {
    font-family: IRANYekan;
    font-style: normal;
    font-weight: 100;
    src: url("/Content/fonts/iranyekan/thin/iranyekan.eot");
    src: url("/Content/fonts/iranyekan/thin/iranyekan.eot?#iefix") format("embedded-opentype"),url("/Content/fonts/iranyekan/thin/iranyekan.woff") format("woff"),url("/Content/fonts/iranyekan/thin/iranyekan.ttf") format("truetype");
}

@font-face {
    font-family: IRANYekan;
    font-style: normal;
    font-weight: 300;
    src: url("/Content/fonts/iranyekan/light/iranyekan.eot");
    src: url("/Content/fonts/iranyekan/light/iranyekan.eot?#iefix") format("embedded-opentype"),url("/Content/fonts/iranyekan/light/iranyekan.woff") format("woff"),url("/Content/fonts/iranyekan/light/iranyekan.ttf") format("truetype");
}

@font-face {
    font-family: IRANYekan;
    font-style: normal;
    font-weight: normal;
    src: url("/Content/fonts/iranyekan/regular/iranyekan.eot");
    src: url("/Content/fonts/iranyekan/regular/iranyekan.eot?#iefix") format("embedded-opentype"),url("/Content/fonts/iranyekan/regular/iranyekan.woff") format("woff"),url("/Content/fonts/iranyekan/regular/iranyekan.ttf") format("truetype");
}

@font-face {
    font-family: IRANYekan;
    font-style: normal;
    font-weight: 500;
    src: url("/Content/fonts/iranyekan/medium/iranyekan.eot");
    src: url("/Content/fonts/iranyekan/medium/iranyekan.eot?#iefix") format("embedded-opentype"),url("/Content/fonts/iranyekan/medium/iranyekan.woff") format("woff"),url("/Content/fonts/iranyekan/medium/iranyekan.ttf") format("truetype");
}

@font-face {
    font-family: IRANYekan;
    font-style: normal;
    font-weight: bold;
    src: url("/Content/fonts/iranyekan/bold/iranyekan.eot");
    src: url("/Content/fonts/iranyekan/bold/iranyekan.eot?#iefix") format("embedded-opentype"),url("/Content/fonts/iranyekan/bold/iranyekan.woff") format("woff"),url("/Content/fonts/iranyekan/bold/iranyekan.ttf") format("truetype");
}

@font-face {
    font-family: IRANYekan;
    font-style: normal;
    font-weight: 800;
    src: url("/Content/fonts/iranyekan/extrabold/iranyekan.eot");
    src: url("/Content/fonts/iranyekan/extrabold/iranyekan.eot?#iefix") format("embedded-opentype"),url("/Content/fonts/iranyekan/extrabold/iranyekan.woff") format("woff"),url("/Content/fonts/iranyekan/extrabold/iranyekan.ttf") format("truetype");
}

@font-face {
    font-family: IRANYekan;
    font-style: normal;
    font-weight: 900;
    src: url("/Content/fonts/iranyekan/black/iranyekan.eot");
    src: url("/Content/fonts/iranyekan/black/iranyekan.eot?#iefix") format("embedded-opentype"),url("/Content/fonts/iranyekan/black/iranyekan.woff") format("woff"),url("/Content/fonts/iranyekan/black/iranyekan.ttf") format("truetype");
}

@font-face {
    font-family: Lalezar;
    font-style: normal;
    font-weight: normal;
    src: url("/Content/fonts/lalezar/Lalezar-Regular.ttf") format('truetype');
}

* {
    outline: none !important;
}

html,
body {
    font-family: IRANSans, IRANSansfanum, IRANYekan, Font Awesome, Font Awesome Brands, Lalezar;
}

img {
    width: 100%;
    height: 100%;
    display: block;
    user-select: none;
}

body {
    background-image: url('../images/back.png');
}

a {
    text-decoration: none;
}

.main-header {
    width: 100%;
/*    padding: 20px 0;
*/    background-color: #fff;
}

.main-header-right {
    display: flex;
    flex-direction: column;
}

.main-header-top {
/*    margin-bottom: 22px;*/
}

.main-header-top,
.main-header-bottom {
    display: flex;
    align-items: center;
}

    .main-header-top > a {
        font-size: 14px;
        font-weight: 500;
        color: #7f848f;
        text-decoration: none;
        display: flex;
        align-items: center;
    }

        .main-header-top > a > img {
            width: 20px;
            height: 20px;
            margin-left: 6px;
        }

    .main-header-bottom > .cart {
        border: 1px solid #34b4b3;
        color: #34b4b3;
        height: 50px;
        display: flex;
        align-items: center;
        padding-left: 18px;
        border-radius: 5px;
        overflow: hidden;
        font-size: 15px;
        font-weight: bold;
        text-decoration: none;
    }

        .main-header-bottom > .cart > i {
            width: 60px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 27px;
            color: #e27635
        }

        .main-header-bottom > .cart > span {
            width: 29px;
            height: 29px;
            display: block;
            text-align: center;
            line-height: 34px;
            border-radius: 30%;
            margin-right: 17px;
            font-size: 15px;
            background-color: #34b4b3;
            color: white
        }

    .main-header-bottom > .search {
        display: flex;
        align-items: center;
    }

        .main-header-bottom > .search > input {
            width: 100%;
            height: 35px;
            background-color: #f1ffff;
            border-radius: 0 18px 18px 0;
            padding: 0 11px;
            color: #4a4a4a;
            font-size: 14px;
            font-weight: 400;
            border: 1px solid #34b4b3;
            border-left: none;
        }

            .main-header-bottom > .search > input::placeholder {
                opacity: 1;
                user-select: none;
                color: #999;
            }

        .main-header-bottom > .search > button {
            width: 60px;
            /*            height: 50px;
*/ color: #fff;
            font-size: 24px;
            border: none;
            border-radius: 18px 0 0 18px;
            background-color: #4ad4cc;
            background-image: url('../images/pattern-koli-backround.png');
        }

.navigation {
    width: 100%;
    background-color: #f7f8fa;
    border-top: 1px solid #eff0f2;
    border-bottom: 1px solid #e3e4e5;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.12);
}

    .navigation ul {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        list-style: none;
    }

        .navigation ul a {
            padding: 14px 18px;
            display: block;
            text-decoration: none;
            color: #555;
            font-size: 14px;
            font-weight: 500;
        }

            .navigation ul a:hover {
                background-color: #fff;
                color: #ff5252;
            }

.header__bars {
    font-size: 24px;
    color: #555;
    margin: 16px;
    line-height: normal;
    display: none;
    text-decoration: none !important;
}

.sidemenu {
    width: 260px;
    height: 100vh;
    display: block;
    position: fixed;
    top: 0;
    right: -260px;
    bottom: 0;
    z-index: 201;
    overflow-y: auto;
    transition: all .3s ease-in-out;
    background-color: #fff;
}

    .sidemenu.is-active {
        right: 0;
        box-shadow: -10px 0 10px 0 rgba(0,0,0,.1);
    }

.sidemenu__logo {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-bottom: 1px solid #dfe2ec;
}

    .sidemenu__logo > img {
        width: 100%;
        height: 100%;
    }

.sidemenu__menu {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    list-style: none;
}

    .sidemenu__menu li a {
        display: block;
        text-decoration: none;
        color: #7b7da3;
        font-size: 15px;
        font-weight: 400;
        position: relative;
        padding: 20px 40px 20px 0;
    }

    .sidemenu__menu > li > a:active {
        background-color: #eef0f5;
    }

    .sidemenu__menu li.has-sub > a > i {
        position: absolute;
        left: 24px;
        top: 50%;
        transform: translateY(-50%);
        color: #7b7da3;
        font-size: 20px;
    }

    .sidemenu__menu li ul {
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        display: none;
        box-shadow: inset 0 4px 4px 0 rgba(0,0,0,.05);
        background-color: #eef0f5;
    }

.sidemenu__btn {
    max-width: 90%;
    padding: 12px 0;
    display: block;
    text-align: center;
    color: #fff !important;
    font-size: 15px;
    font-weight: bold;
    border-radius: 8px;
    margin: 10px auto 30px;
    text-decoration: none !important;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);
    background-color: #417ae8;
    user-select: none;
}

.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0,0,0,.5);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    transition: all .3s ease-in-out;
    opacity: 0;
    pointer-events: none;
}

    .overlay.is-active {
        opacity: 1;
        pointer-events: all;
    }

.main-topside {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    /*box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);*/
    border-radius: 10px;
}

    .main-topside .title {
        width: 100%;
        text-align: center;
        padding: 0px 0 14px 0;
        border-bottom: 1px solid #e0e0e0;
    }

        .main-topside .title h3 {
            font-size: 16px;
            font-weight: bold;
            margin: 0;
            color: #555;
        }

.main-topside-item {
    padding: 20px;
    text-decoration: none !important;
}

    .main-topside-item > .price {
        width: 100%;
        font-size: 18px;
        font-weight: bold;
        color: #00a1b1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 16px;
    }

        .main-topside-item > .price > span {
            margin-right: 4px;
            font-size: 15px;
        }

.main-sidebar {
    width: 100%;
    height: 220px;
    overflow: hidden;
    display: block;
    border-radius: 10px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);
}

    .main-sidebar > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.main-slider {
    width: 100%;
    /*height: 320px;*/
    overflow: hidden;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);
    border-radius: 10px;
}

.main-slider-item {
    /*height: 320px;*/
    display: block;
}

    .main-slider-item > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.main-banners {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

    .main-banners > div {
        width: 49%;
        border-radius: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 30px;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);
        background-color: #fff;
    }

        .main-banners > div > a {
            /*width: 49%;
    height: 180px;*/
            overflow: hidden;
            margin-bottom: 18px;
            /*border-radius: 50%;*/
        }

            .main-banners > div > a > img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

.footer {
    width: 100%;
    padding-top: 50px;
    background-color: #e6e7e9;
    margin-top: 40px;
}

.footer__row {
    display: flex;
    align-items: center;
}

.footer__row--1 {
    justify-content: space-between;
}

.footer__logo {
    width: 194px;
    height: 57px;
    color: transparent;
    text-indent: -9999em;
    display: block;
    text-decoration: none;
    background: no-repeat 100% 100%;
    background-size: contain;
    background-image: url('../images/logo.png');
}

.footer__newsletter {
    width: 500px;
}

    .footer__newsletter > form {
        width: 100%;
        position: relative;
    }

.footer__newsletter-title {
    width: 90px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 8px 8px 0;
    color: #7f848f;
}

    .footer__newsletter-title::after {
        width: 1px;
        display: block;
        position: absolute;
        top: 12px;
        bottom: 12px;
        left: 0;
        background-color: #999;
        content: "";
    }

.footer__newsletter > form > input {
    width: 100%;
    height: 54px;
    color: #424242;
    font-size: 15px;
    font-weight: 400;
    padding: 0 110px 0 120px;
    background-color: #fff;
    border: 1px solid #d7d7d7;
    text-align: left;
    border-radius: 8px;
}

    .footer__newsletter > form > input::placeholder {
        color: #999;
        text-align: right;
    }

.footer__newsletter > form > button {
    width: 100px;
    color: #fff;
    display: block;
    border-radius: 8px;
    border: none;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    left: 6px;
    bottom: 6px;
    top: 6px;
    user-select: none;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);
    background-color: #2196f3;
    background: #f7941d url('../images/pattern-koli-backround.png');
}

.footer__row--2 {
    width: 100%;
    margin-top: 20px;
    justify-content: flex-start;
}

.footer__about {
    font-size: 15px;
    font-weight: 300;
    color: #4d4d4d;
    line-height: 40px;
    padding-left: 300px;
    margin: 0;
}

.footer__row--3 {
    justify-content: space-between;
    align-items: center;
    /*margin-top: 30px;*/
}

.footer__right {
    width: 100%;
}

.footer__contact,
.footer__social {
    width: 100%;
    display: flex;
    align-items: center;
}

.footer__contact {
    margin-bottom: 30px;
    flex-wrap: wrap;
    padding-left: 12px;
    flex-direction: column;
    place-content: flex-start;
}

    .footer__contact > span {
        display: flex;
        align-items: center;
        font-size: 15px;
        font-weight: 300;
        color: #4d4d4d;
    }

        /*.footer__contact > span:not(:first-of-type)::before {
            width: 1px;
            height: 30px;
            display: block;
            margin: 0 16px;
            background-color: #999;
            content: "";
        }*/

        .footer__contact > span > a {
            text-decoration: none;
            color: #4d4d4d;
            font-weight: bold;
            direction: ltr;
            margin-right: 6px;
            line-height: 30px;
        }

.footer__social > a {
    font-size: 30px;
    text-decoration: none;
    color: #4d4d4d;
}

    .footer__social > a:not(:last-of-type) {
        margin-left: 24px;
    }


.footer__left {
    display: flex;
    align-items: baseline;
    flex-direction: row-reverse;
    place-content: center;
}


    .footer__left > div {
        width: 140px;
        height: 140px;
        display: block;
        text-align: center;
        border-radius: 8px;
        padding: 18px;
        background-color: #fff;
        margin: 2px
    }

        .footer__left > div > img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
            user-select: none;
        }

.footer__copyright {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    font-size: 15px;
    font-weight: 400;
  /*  margin-top: 20px;*/
    color: #fff;
    background-color: #646871;
}

@media (max-width: 858px) {
    .footer {
        padding-top: 30px;
    }

    .footer__logo {
        display: none;
    }

    .footer__newsletter {
        width: 100%;
    }

    .footer__row--2 {
        margin-top: 30px;
    }

    .footer__about {
        padding-left: 0;
        text-align: center;
    }

    .footer__row--3 {
        flex-direction: column;
    }

    .footer__left {
        margin-top: 30px;
    }

    .footer__contact {
        padding-left: 0;
        flex-direction: column;
    }

        .footer__contact > span::before {
            display: none !important;
        }

        .footer__contact > span:not(:last-of-type) {
            margin-bottom: 16px;
        }

    .footer__social {
        justify-content: center;
    }

    .footer__copyright {
        margin-top: 30px;
        padding: 12px 30px;
        text-align: center;
        line-height: 30px;
    }

    .navigation ul {
        display: none;
    }

    .header__bars {
        display: block;
    }
}

@media (max-width: 500px) {
    .footer__left {
        flex-wrap: wrap;
        overflow: hidden
    }

    iframe {
        margin: 0;
    }

    .footer__contact {
        place-content: center
    }
}

.footer__app {
    background-image: url('../images/downloadsoorsatanwholesale.png');
    background-repeat: no-repeat;
    width: 92px;
    height: 30px;
    padding: 4px 35px 0 5px;
    font-size: 12px;
    color: white;
    margin-bottom: 10px;
    text-align: center;
    display: inline-block;
}
/*----------------- Product Box----------------------*/

.product-item {
    border: 1px solid #E1E1E1;
    border-radius: 10px 10px 21px 21px;
    background: #FFF;
}

    .product-item .photo img {
        margin: 0 auto;
        width: auto;
        max-height: 100%;
        max-width: 100%
    }

    .product-item .info {
        padding: 10px;
        border-radius: 0 0 5px 5px;
        margin-top: 1px;
        margin-bottom: 15px
    }

    .product-item .price {
        /*width: 50%;*/
        float: left;
        margin-top: 5px;
    }

        .product-item .price h5 {
            line-height: 20px;
            margin: 0;
        }

.price-text-color {
    color: #219FD1;
}

.product-item .info .rating {
    color: #777;
}

.product-item .rating {
    /*width: 50%;*/
    float: left;
    font-size: 17px;
    text-align: right;
    line-height: 52px;
    margin-bottom: 10px;
    height: 52px;
}

.product-item .separator {
    border-top: 1px solid #E1E1E1;
}

.clear-left {
    clear: left;
}

.product-item .separator p {
    line-height: 20px;
    margin-bottom: 0;
    margin-top: 10px;
    text-align: center;
}

    .product-item .separator p i {
        margin-right: 5px;
    }

.product-item .btn-add {
    width: 50%;
    float: left;
}

.product-item .btn-add {
    border-right: 1px solid #E1E1E1;
}

.product-item .btn-details {
    width: 50%;
    float: left;
    padding-left: 10px;
}

.controls {
    margin-top: 20px;
}

[data-slide="prev"] {
    margin-right: 10px;
}

/*----------------- End Product Box----------------------*/

/*------- ProductPageStyle -----------*/

.preview {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

@media screen and (max-width: 996px) {
    .preview {
        margin-bottom: 20px;
    }
}

.preview-pic {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.preview-thumbnail.nav-tabs {
    border: none;
    margin-top: 15px;
}

    .preview-thumbnail.nav-tabs li {
        width: 18%;
        margin-right: 2.5%;
    }

        .preview-thumbnail.nav-tabs li img {
            max-width: 100%;
            display: block;
        }

        .preview-thumbnail.nav-tabs li a {
            padding: 0;
            margin: 0;
        }

        .preview-thumbnail.nav-tabs li:last-of-type {
            margin-right: 0;
        }

.tab-content {
    overflow: hidden;
}

    .tab-content img {
        width: 100%;
        -webkit-animation-name: opacity;
        animation-name: opacity;
        -webkit-animation-duration: .3s;
        animation-duration: .3s;
    }

.card {
    /*margin-top: 50px;*/
    background: #eee;
    padding: 3em;
    line-height: 1.5em;
}

@media screen and (min-width: 997px) {
    .wrapper {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
}

.details {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.colors {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.product-title, .price, .sizes, .colors {
    text-transform: UPPERCASE;
    font-weight: bold;
}

    .checked, .price span {
        color: #ff9f1a;
    }

.product-title, .rating, .product-description, .price, .vote, .sizes {
    margin-bottom: 15px;
}

.product-title {
    margin-top: 0;
    font-size: 20px
}

.size {
    margin-right: 10px;
}

    .size:first-of-type {
        margin-left: 40px;
    }

.color {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    height: 2em;
    width: 2em;
    border-radius: 2px;
}

    .color:first-of-type {
        margin-left: 20px;
    }

.add-to-cart, .like {
    background: #ff9f1a;
    padding: 1.2em 1.5em;
    border: none;
    text-transform: UPPERCASE;
    font-weight: bold;
    color: #fff;
    -webkit-transition: background .3s ease;
    transition: background .3s ease;
}

    .add-to-cart:hover, .like:hover {
        background: #b36800;
        color: #fff;
    }

.not-available {
    text-align: center;
    line-height: 2em;
}

    .not-available:before {
        font-family: fontawesome;
        content: "\f00d";
        color: #fff;
    }

.orange {
    background: #ff9f1a;
}

.green {
    background: #85ad00;
}

.blue {
    background: #0076ad;
}

.tooltip-inner {
    padding: 1.3em;
}

@-webkit-keyframes opacity {
    0% {
        opacity: 0;
        -webkit-transform: scale(3);
        transform: scale(3);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes opacity {
    0% {
        opacity: 0;
        -webkit-transform: scale(3);
        transform: scale(3);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


/*------------------*/

.m-y-5 {
    margin: 5px 0px;
}

.padding-10 {
    padding: 10px 0px;
}

.font-17 {
    font-size: 17px !important;
}

.top-left-badge {
    position: absolute !important;
    top: -12px !important;
    right: -10px;
    border: 2px solid #62b965 !important;
    width: 25px;
    height: 25px;
    border-radius: 50px;
    padding: 5px 3px;
}

.position-relative-internal {
    position: relative !important;
}

 

.bg-blue {
    background-color: #27BBC0;
}

.bg-orange {
    background-color: #f7941d;
}

.noPadding {
    padding: 0;
}

a:hover {
    text-decoration: none
}

.addToCartLProductList {
    background-color: #27BDBE;
    padding: 10px;
    border-radius: 0 0 10px 10px !important;
    color: #58595B;
    transition: 200ms
}

    .addToCartLProductList:hover {
        background-color: #F37021;
        color: white
    }

.owl-dots .owl-dot {
    background-color: #d1d2d4 !important;
    border-radius: 20px;
    height: 12px;
    margin: 5px 7px;
    opacity: 0.5;
    width: 12px;
}

.owl-dots .active {
    background-color: #898989 !important;
}

.owl-dots {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 8px;
}

.owl-carousel {
    position: relative;
}


.archive-title {
    font-size: 18px;
}


.archicve-box a p {
    text-align: justify;
    text-decoration: none;
}

/*Flip CountDown CSS Start*/
.tick {
    font-size: 1.25rem;
    white-space: nowrap;
}

.tick-flip, .tick-text-inline {
    font-size: 2.5em;
}

.tick-label {
    margin-top: 1em;
    font-size: 1em;
    font-weight: bold;
}

.tick-char {
    width: 1.5em;
}

.tick-text-inline {
    display: inline-block;
    text-align: center;
    min-width: 1em;
}

    .tick-text-inline + .tick-text-inline {
        margin-left: -.325em;
    }

.tick-group {
    margin: 0 .5em;
    text-align: center;
}

.tick-text-inline {
    color: #595d63 !important;
}

.tick-label {
    color: #595d63 !important;
}

.tick-flip-panel {
    color: #fff !important;
}

.tick-flip {
    font-family: IRANYekan !important;
}

.tick-flip-panel-text-wrapper {
    line-height: 1.45 !important;
}

.tick-group:nth-child(1) .tick-flip-panel {
    background-color: #ed1c24 !important;
}

.tick-group:nth-child(2) .tick-flip-panel {
    background-color: #f37021 !important;
}

.tick-group:nth-child(3) .tick-flip-panel {
    background-color: #ffcb05 !important;
}

.tick-group:nth-child(4) .tick-flip-panel {
    background-color: #27bdbe !important;
}

.tick-flip {
    border-radius: 0.3em !important;
}

.tick-credits {
    display: none;
}

@media screen and (max-width: 991px) {
    .tick {
        font-size: 1rem;
    }
}

/*Flip CountDown CSS End*/

.main-menu-countdown {
    direction: ltr;
    margin: 1rem 0;
    float: left;
}

.discount-banner-section {
    float: left;
    max-height: 8rem;
}

.discount-banner-text {
    position: relative;
    color: white;
    text-align: center;
}

.discount-banner-title {
    left: -22px;
    top: -60px;
}

.discount-banner-percentage {
    left: 46px;
    top: -95px;
}


.whatsapp-icon {
    width: 54px;
    display: block;
    height: 54px;
    border-radius: 54px;
    position: fixed;
    bottom: 80px;
    z-index: 99;
    right: 14px;
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.04) !important;
}

.whatsapp-icon-img {
    width: 54px;
    height: 54px;
    border-radius: 54px;
}

.cart-customlocation span {
    color: #fff;
    border-radius: 25px;
    font-size: 12px;
    position: absolute;
    width: 20px;
    height: 20px;
    text-align: center;
    padding: 1px;
    background-color: red;
    animation: pulse 2s infinite;
    line-height: 20px;
    bottom: 150px;
    left: 0px;
}

.buttonbar-second {
    display: inline-block !important;
    text-align: center;
    height: auto;
    position: absolute;
    left: 0;
    padding: 0;
    margin: 0;
}

.help-whatsapp-section {
    width: 54px;
    display: block;
    height: 54px;
    border-radius: 54px;
    position: fixed;
    bottom: 150px;
    z-index: 99;
    right: 14px;
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.04) !important;
}

.animation-pulse-2s {
    animation: pulse 2s infinite;
}

.swiper {
    width: 100%;
    max-width: auto;
    height: auto;
    margin-top: 40px;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EEE;
}

.swiper-button-next, .swiper-button-prev {
    color: #f7941d;
}

.birthday-theme-back {
    background-color: white;
    border-radius: 15px;
}

.birthday-theme-h1 {
    font-size: 28px;
    font-weight: bold;
    color: #27BBC0;
}

@media (max-width: 575.98px) {
    .birthday-theme-top-h2 {
        font-size: 12px;
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-65%, -70%);
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .birthday-theme-top-h2 {
        font-size: 14px;
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-65%, -70%);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .birthday-theme-top-h2 {
        font-size: 16px;
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-65%, -70%);
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .birthday-theme-top-h2 {
        font-size: 18px;
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-65%, -70%);
    }
}

@media (min-width: 1200px) {
    .birthday-theme-top-h2 {
        font-size: 20px;
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-65%, -70%);
    }
}

.birthday-theme-hotpink {
    border: 1px solid;
    border-color: hotpink;
    border-radius: 15px;
}

.birthday-theme-deepskyblue {
    border: 1px solid;
    border-color: deepskyblue;
    border-radius: 15px;
}

.birthday-theme-red {
    border: 1px solid;
    border-color: red;
    border-radius: 15px;
}

.color-deeppink {
    color: deeppink;
}

.font-size-28 {
    font-size: 28px;
}

.font-size-12 {
    font-size: 12px;
}

.font-size-16 {
    font-size: 16px;
}

.font-size-15 {
    font-size: 15px;
}

.group-title-h1 {
    background: #f7941d url('../images/pattern-koli-backround.png');
    color: white;
    padding: 15px;
    margin: 0;
    font-size: 35px;
}

.dir-rtl {
    direction: rtl !important;
}

.wh-17 {
    width: 17px;
    height: 17px;
}

.text-blue-green {
    color: #52CACB;
}

.h-47 {
    height: 47px;
}



@media (max-width: 576px) {
    #SearchInput {
        margin: 0px !important;
        margin-top: 10px !important;
        outline: none;
        background-position: 10px 12px;
        background-repeat: no-repeat;
        width: 100%;
        font-size: 16px;
        padding: 12px 20px 12px 40px;
        border: 1px solid #ddd;
        display: inline-block;
        border-radius: 20px;
        color: black;
        height: 35px;
    }

    #searchResult {
        height: auto;
        max-height: 400px;
        overflow-y: scroll;
        display: none;
        list-style-type: none;
        padding: 0;
        margin: 0;
        border-radius: 20px !important;
        position: absolute !important;
        z-index: 999;
        width: 87% !important;
        background: #ddd !important;
    }
}

@media (min-width: 768px) {
    #SearchInput {
        outline: none;
        background-position: 10px 12px;
        margin-top: 10px !important;
        background-repeat: no-repeat;
        width: 33%;
        font-size: 16px;
        padding: 12px 20px 12px 40px;
        border: 1px solid #ddd;
        margin-bottom: 12px;
        border-radius: 20px;
        color: black;
        height: 35px;
        display: inline-block;
    }

    #searchResult {
        height: auto;
        max-height: 600px;
        overflow-y: scroll;
        display: none;
        list-style-type: none;
        padding: 0;
        margin: 0;
        border-radius: 20px !important;
        position: absolute !important;
        z-index: 999;
        width: 32% !important;
        background: #ddd !important;
    }
}

#searchResult * {
    display: flex;
    box-sizing: border-box;
    background-color: none;
    border-radius: 20px;
    margin: 5px 0px;
}


#searchResult li a {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    margin-top: -1px; /* Prevent double borders */
    background-color: #ddd;
    justify-content: end;
    padding: 0px 5px;
    text-decoration: none;
    font-size: 18px;
    color: #776f6f;
    border-bottom: 2px solid #fff;
    width: 100%;
}

#searchResult li :hover:not(.header) {
    background-color: #eee;
}

.sidebar-mobile {
    width: 80% !important;
    overflow-x: hidden;
}

.sidebar-link {
    display: block;
    padding: 15px 20px;
    font-size: 1.2rem;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    background-color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .sidebar-link:hover {
        background-color: #FF7F00;
        color: #fff;
        transform: translateX(-3px); 
    }

    .sidebar-link i {
        font-size: 1.1rem;
    }

.btn-close {
    position: absolute;
    top: 10px;
    right: 85%; 
}

#submenu1 .sidebar-link {
    padding-left: 35px;
    font-size: 1rem;
}

.sidebar-link[aria-expanded="true"] i.fa-chevron-down {
    transform: rotate(180deg);
    transition: transform 0.3s;
}

.sidebar-link[aria-expanded="false"] i.fa-chevron-down {
    transition: transform 0.3s;
}
#owlCarousel1 .owl-stage {
    display: flex;
    align-items: stretch !important; /* آیتم‌ها در یک راستا هم‌ارتفاع می‌شن */
}

#owlCarousel1 .owl-item {
    display: flex;
    height: auto !important;
}

.product-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    border-radius: 0 0 21px 21px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    padding: 8px;
    height: 100%; /* از ارتفاع آیتم تبعیت کنه */
}

.product-item .p-2 {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-item #btnCartProduct_5525,
.product-item [id^="btnCartProduct_"] {
    margin-top: auto; /* دکمه به پایین کارت بچسبد */
}


/* استایل برای اسکرول در منوی دراپ‌داون */
.dropdown-menu-scrollable {
    max-height: 300px; /* ارتفاع حداکثر قبل از اسکرول */
    overflow-y: auto;
    overflow-x: hidden;
}

/* برای راست‌چین مناسب‌تر (چون سایت فارسی است) */
.dropdown-menu-scrollable {
    text-align: right;
}

/* آیکون‌ها را کمی کوچک‌تر کنیم */
.dropdown-item i {
    font-size: 0.85em;
}
/* اسکرول برای منوی دسته‌بندی در هدر */
.header-dropdown-scrollable {
    max-height: 300px; /* ارتفاع حداکثر قبل از اسکرول */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0; /* فضای مناسب برای اسکرول */
}

/* برای راست‌چین بهتر در سایت فارسی */
.header-dropdown-scrollable {
    text-align: right;
}

#carouselExampleFade
.carousel-item img{
border-radius:15px;
}
    /* دکمه‌های کنترل اسلایدر */
    #carouselExampleFade .carousel-control-prev,
    #carouselExampleFade .carousel-control-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 60px;
        background-color: rgba(255, 255, 255, 0.3); /* پس‌زمینه سفید نیمه‌شفاف */
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        transition: all 0.3s ease;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

        /* وقتی موس روش میره */
        #carouselExampleFade .carousel-control-prev:hover,
        #carouselExampleFade .carousel-control-next:hover {
            background-color: rgba(255, 255, 255, 0.4);
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

    /* دکمه سمت چپ */
    #carouselExampleFade .carousel-control-prev {
        right: -5px; /* فاصله از لبه چپ */
    }

    /* دکمه سمت راست */
    #carouselExampleFade .carousel-control-next {
        left: -5px; /* فاصله از لبه راست */
    }

    /* تغییر جهت آیکن‌ها (بوت‌استرپ پیش‌فرض برعکسه) */
    #carouselExampleFade .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3e%3cpath d='M5 1l8 7-8 7'/%3e%3c/svg%3e");
        background-size: 60%;
    }

    #carouselExampleFade .carousel-control-next-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3e%3cpath d='M11 1L3 8l8 7'/%3e%3c/svg%3e");
        background-size: 60%;
    }

@media (max-width: 768px) {
    #carouselExampleFade .carousel-control-prev,
    #carouselExampleFade .carousel-control-next {
        width: 25px;
        height: 44px;
        background-color: rgba(255, 255, 255, 0.5);
    }

    #carouselExampleFade .carousel-control-prev {
        right: -15px; /* کمتر بیرون بزنه */
    }

    #carouselExampleFade .carousel-control-next {
        left: -15px;
    }

    /* می‌تونی آیکون رو هم کوچیک‌تر کنی */
    #carouselExampleFade .carousel-control-prev-icon,
    #carouselExampleFade .carousel-control-next-icon {
        width: 18px;
        height: 18px;
    }
}

