/* start global */

@font-face {
    font-family: "IRANSansWebFaNum";
    src: url('../fonts/IRANSansWebFaNum.woff2') format('woff2'), 
    url('../fonts/IRANSansWebFaNum.ttf') format('woff'), 
    url('../fonts/IRANSansWebFaNum.ttf') format('truetype');
}

body {
    font-family: 'IRANSansWebFaNum', sans-serif;
}

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

a {
    text-decoration: none !important;
    color: #212529 !important;
}

.button.button-primary{
    background: #ef414e;
    padding: 0.8rem 2rem !important;
    border-radius: 0.5rem;
    color: whitesmoke !important;
}

.button:hover {
    background-color: #212529 !important;
}

.button:focus,
.button:active {
    outline: none;
    box-shadow: none;
    border: none;
}

.mfp-counter {
    right: 50%;
    transform: translateX(50%);
}

/* end global */

/* ======================================================== */

/* start header */

.header {
    background-color: #F3F3F3 !important;
}

.header .container-fluid {
    min-height: 50px;
    padding: 0 10vw;
}

.header .container-fluid span {
    font-size: 18px;
    color: #212529;
    ;
}

/* end header */

/* ======================================================== */

/* start search area */

.search-area .search {
    min-height: 80px;
}

@media (max-width: 1000px) {
    .search-area > .search-div {
        flex-direction: column-reverse !important;
    }
}

/* end search area */

/* ======================================================== */

/* start navbar area */

.navbar-area {
    padding: 0;
    background: #ef414e;
    min-height: 80px;
    position: sticky;
    top: 0;
    z-index: 10000;
}

.navbar-area nav.navbar .container-fluid div ul.navbar-nav li a {
    color: white !important;
    font-size: 18px;
    font-weight: 600;
    margin: 0 10px;
}

.navbar-area nav.navbar .container-fluid div ul.navbar-nav li a:hover {
    background: transparent !important;
    color: black !important;
}

.navbar-area nav.navbar .container-fluid button:focus,
button:active,
button:hover {
    outline: 0px !important;
    box-shadow: none !important;
}

@media (max-width: 1000px) {
    .navbar-area nav.navbar .container-fluid div {
        margin: 0 !important;
    }
}

/* end navbar area */

/* ======================================================== */

/* start carousel area */

.carousel-area .container-fluid {
    padding: 0;
}

.carousel-area .carousel .carousel-inner .carousel-item h5 {
    font: normal 700 45px/70px "IRANSansWebFaNum";
    color: white !important;
    animation: zoomIn;
    animation-duration: 2s;
}

.carousel-area .carousel .carousel-inner .carousel-item p {
    font: normal 500 20px/35px "IRANSansWebFaNum";
    margin-bottom: 40px;
    color: rgba(204, 204, 204, 0.479) !important;
    animation: bounceInUp;
    animation-duration: 2s;
}

.carousel-area .carousel .carousel-inner .carousel-item a {
    animation: bounceInRight;
    animation-duration: 2s;
}

.carousel-area .carousel .carousel-inner .carousel-item > img {
    filter:brightness(30%) !important;
}

.carousel-area .carousel .carousel-inner .carousel-item .carousel-caption {
    top: 50%;
    transform: translateY(-50%);
    bottom: initial;
}

.carousel-area .carousel .carousel-icon span {
    display: flex;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.carousel-area .carousel .carousel-icon span:hover {
    background-color: #ef414e;
}

/* end carousel area */

/* ======================================================== */

/* start showcase area */

.showcase-area .vertical-line {
    border-left: thick solid black;
    margin-left: 15px;
    height: 30px;
    align-self: center;
}

.showcase-area .showcase-title {
    font: normal 700 25px/30px "IRANSansWebFaNum";
    align-self: center;
}

.showcase-area .title-indicators .indicators a {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; 
    width: 40px; 
    height: 40px; 
    background-color: black;
    margin-left: 5px;
}

.showcase-area .title-indicators .indicators a:hover {
    background-color: #ef414e;
}

.showcase-area .carousel .owl-carousel .item {
    background-color: #F8F8F8;
    margin: 0 10px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid rgb(236, 236, 236);
}

.showcase-area .carousel .owl-carousel .item .col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.showcase-area .carousel .owl-carousel .item .price {
    margin:0 10px 0 0; 
    color: gray;
    text-decoration: line-through !important;
}

.showcase-area .carousel .owl-carousel .item span {
    border-radius: 50%; 
    background-color: black; 
    color: white; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    width: 50px; 
    height: 50px;
}

@media (max-width: 800px) {
    .showcase-area .carousel .owl-carousel .item {
        display: flex !important;
        flex-wrap: wrap;
        flex-direction: column !important;
    }
    .showcase-area .carousel .owl-carousel .item .text-area {
        align-items: center;
    }
}

.showcase-area .carousel .owl-carousel .item div > * {
    margin: 10px 0;
}

.showcase-area .carousel .owl-carousel .item div + div {
    margin-right: 5px;
}

.showcase-area .carousel .owl-carousel .item .remaining-time {
    margin: 0;
}

.showcase-area .carousel .owl-carousel .item p {
    align-self: center;
    color: rgb(180, 180, 180);
    font-size: 13px;
    font-weight: lighter;
}

.showcase-area .carousel .owl-carousel .item span > p {
    padding: 0;
    margin: 0;
    font: normal 700 25px/30px "IRANSansWebFaNum";
    color: white;
}

.showcase-area .showcase-fixed .text-area {
    align-self: center;
    text-align: end;
}

.showcase-area .showcase-fixed .fixed-item {
    padding: 5px;
    margin: 0;
    background-color: #F0F0F0;
    border-radius: 10px;
}

.showcase-area .showcase-fixed .fixed-item .text-area *:not(span) {
    margin: 10px;
}

.showcase-area .showcase-fixed .fixed-item .text-area h4 {
    font: normal 700 25px/35px "IRANSansWebFaNum";
}

.showcase-area .showcase-fixed .fixed-item .text-area span {
    color: #ef414e;
}

/* end showcase area */

/* ======================================================== */

/* start products area */

.Products-area .vertical-line {
    border-left: thick solid black;
    margin-left: 15px;
    height: 30px;
    align-self: center;
}

.Products-area .showcase-title {
    font: normal 700 25px/30px "IRANSansWebFaNum";
    align-self: center;
}

.Products-area .title-indicators .button-group button {
    background: black;
    color: white;
    border: none;
    padding: 5px 15px;
    border-radius: 15px;
    min-width: 100px;
}

.Products-area .title-indicators .button-group button:hover {
    background-color: #ef414e;
}

.Products-area .title-indicators .button-group button:focus {
    border: none;
    outline: none;
}

.Products-area .title-indicators .button-group button.active {
    background-color: #ef414e;
}

.Products-area .title-indicators .button-group button + button {
    margin-right: 7px;
}

.Products-area .products-list > div {
    margin: 20px 0px;
}

.Products-area .products-list .product-item {
    padding: 10px;
    margin: 10px;
    height: 100%;
    background-color: #F8F8F8;
    border-radius: 10px;
    border: 1px solid rgb(236, 236, 236);
    justify-content: center;
}

.Products-area .products-list .product-item .product-badge-img {
    position: relative;
}

.Products-area .products-list .product-item .product-badge-img a {
    display: flex;
    margin: 0px auto;
}

.Products-area .products-list .product-item .product-badge-img img {
    display: flex;
    margin: 0 auto;
}

.Products-area .products-list .product-item .product-badge-img .badge {
    position: absolute; 
    top: 10%; 
    left: 10%; 
    transform: translate(-50%, -50%);
}

.Products-area .products-list .product-item .product-badge-img .badge-none {
    display: none;
}

.Products-area .products-list .product-item .product-badge-img .badge-new {
    background-color: #ef414e;
}

.Products-area .products-list .product-item .product-badge-img .badge-off {
    background-color: #212529;
}

.Products-area .products-list .product-item h5 {
    margin: 20px auto 10px auto;
}

.Products-area .products-list .product-item .product-price .off-price {
    font: normal 500 20px/35px "IRANSansWebFaNum";
}

.Products-area .products-list .product-item .product-price .real-price {
    font: lighter 300 18px/35px "IRANSansWebFaNum";
    margin-right: 5px;
    text-decoration: line-through;
    color: #8e8e8f;
}

/* end products area */

/* ======================================================== */

/* start bestselling area */

.Bestselling-area .title-indicators .vertical-line {
    border-left: thick solid black;
    margin-left: 15px;
    height: 30px;
    align-self: center;
}

.Bestselling-area .title-indicators .title {
    font: normal 700 25px/30px "IRANSansWebFaNum";
    align-self: center;
}

.Bestselling-area .title-indicators .button-group button {
    background: black;
    color: white;
    border: none;
    padding: 5px 15px;
    border-radius: 15px;
    min-width: 100px;
}

.Bestselling-area .title-indicators .button-group button:hover {
    background-color: #ef414e;
}

.Bestselling-area .title-indicators .button-group button:focus {
    border: none;
    outline: none;
}

.Bestselling-area .title-indicators .button-group button.active {
    background-color: #ef414e;
}

.Bestselling-area .title-indicators .button-group button + button {
    margin-right: 7px;
}

.Bestselling-area .Bestselling-list > div {
    margin: 20px 0px;
}

.Bestselling-area .Bestselling-list .Bestselling-item {
    padding: 10px;
    margin: 10px;
    height: 100%;
    background-color: #F8F8F8;
    border-radius: 10px;
    border: 1px solid rgb(236, 236, 236);
    justify-content: center;
}

.Bestselling-area .Bestselling-list .Bestselling-item h5 {
    margin: 20px auto 10px auto;
}

.Bestselling-area .Bestselling-list .Bestselling-item .Bestselling-price .off-price {
    font: normal 500 20px/35px "IRANSansWebFaNum";
}

.Bestselling-area .Bestselling-list .Bestselling-item .Bestselling-price .real-price {
    font: lighter 300 18px/35px "IRANSansWebFaNum";
    margin-right: 5px;
    text-decoration: line-through;
    color: #8e8e8f;
}

/* end bestselling area */

/* ======================================================== */

/* start discount area */

@media (max-width: 1000px) {
    .Discount-area div div:nth-of-type(2n+1) {
        display: none;
    }
}

/* end discount area */

/* ======================================================== */

/* start blog area */

.blog-area .title-indicators .vertical-line {
    border-left: thick solid black;
    margin-left: 15px;
    height: 30px;
    align-self: center;
}

.blog-area .title-indicators .title {
    font: normal 700 25px/30px "IRANSansWebFaNum";
    align-self: center;
}

.blog-area .title-indicators a {
    background: #ef414e;
    color: white;
    border: none;
    padding: 5px 15px;
    border-radius: 15px;
    min-width: 100px;
}

.blog-area .title-indicators a:hover {
    background-color: black;
}

.blog-area .title-indicators a:focus {
    border: none;
    outline: none;
}

.blog-area .blog .card {
    position: relative;
    border: none;
    border-bottom: thin solid gainsboro;
    margin-bottom: 25px;
}

.blog-area .blog .card span {
    background-color: black; 
    color: white; 
    width: 70px; 
    height: 70px; 
    border-radius: 50%; 
    position: absolute; 
    top: 10px; 
    left: 10px;
}

.blog-area .blog .card span p {
    color: aliceblue;
    font-size: 16px; 
    margin: 2px auto;
    font: normal 200 18px/22px "IRANSansWebFaNum";
}

.blog-area .blog .card .card-body p {
    color: #666666;
    margin-top: 15px;
    font: normal 300 18px/28px "IRANSansWebFaNum";
}

/* end blog area */

/* ======================================================== */

/* start subscription area */

.subscription-area .row {
    background-color: #ef414e;
    padding: 7vw 15vh;
}

.subscription-area .row h2, h6 {
    color: white;
    margin: 5px 5px 10px 5px;
}

.subscription-area .row form {
    height: 70px; 
    border-radius: 50px; 
    background-color: white; 
    padding: 5px;
    margin: 5px;
}

.subscription-area .row form button {
    min-width: 130px; 
    border: none; 
    border-radius: 50px; 
    background:#4FCC72; 
    color:white;
}

.subscription-area .row form input {
    border: none; 
    border-radius: 50%; 
    outline: none !important; 
    direction: ltr;
}

/* end subscription area */

/* ======================================================== */

/* start about us area */

.about-us-area .vertical-line {
    border-left: thick solid black;
    margin-left: 15px;
    height: 25px;
    align-self: center;
}

.about-us-area .title {
    font: normal 700 22px/25px "IRANSansWebFaNum";
    align-self: center;
    margin-bottom: 30px;
}

.about-us-area .info {
    color: #666666;
    font-size: 18px;
    margin-bottom: 15px;
}

.about-us-area .info i {
    margin-bottom: 15px;
}

.about-us-area .list ul li {
    color: #666666;
    font-size: 18px;
    margin-bottom: 15px;
}

.about-us-area .list ul li::after {
    position: absolute;
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
    content: '\f0da';
    font-weight: 510;
}

/* end about us area */

/* ======================================================== */

/* start footer area */

.footer-area {
    background-color: #F0F0F0; 
    border-top: 3px solid #ECECEC !important;
}

.footer-area h5 {
    color: #8e8e8f;
}

/* end footer area */

/* start backtotop area */

@keyframes border-transform{
    0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
	14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
	28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
	42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
	56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
	70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
	84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}

.progress-wrap {
	position: fixed;
	right: 30px;
	bottom: 30px;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	box-shadow: inset  0 0 0 2px rgba(36, 36, 36, 0.2);
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
    transition: all 200ms linear;
}

.progress-wrap.active-progress {
	opacity: 1;
	visibility: visible;
}

.progress-wrap::after {
	position: absolute;
	font-family: "Font Awesome 5 Free";
    content: '\f062';
    font-weight: 510;
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	color: black;
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 1;
    transition: all 200ms linear;
}

.progress-wrap svg path { 
	fill: none; 
}

.progress-wrap svg.progress-circle path {
	stroke: black;
	stroke-width: 5;
	box-sizing:border-box;
    transition: all 200ms linear;
}

/* end backtotop area */