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

1. FONTS
2. GENERAL
3. PRELOADER
4. HEADER
5. FOOTER
6. SECTION0:MENU
7. SECTION1:HERO
8. SECTION2:HomePage
9. SECTION3:HomePage
10. SECTION4:HomePage
11. SUBHEADER
12. BLOGVIEW
13. BLOGSEARCH
14. BLOGDETAIL
15. ADDPRODUCT
16. SERVICES
17. TRANSACTIONS
18. ORDERS
19. PAGEINATION
20. ERROR
21. DROPDOWN
22. ORDERCOMMENT
23. BANNERS
24. OFFERS
-1. ENGLISHMODE
-2. NIGHTMODE

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

/* ================================================== 1. FONTS : */
@font-face {
    font-family: "IranYekanBlack";
    src: url("../Fonts/IRANYekanBlack.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IranYekanBold";
    src: url("../Fonts/IRANYekanBold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IranYekanExtraBlack";
    src: url("../Fonts/IRANYekanExtraBlack.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IranYekanExtraBold";
    src: url("../Fonts/IRANYekanExtraBold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IranYekanLight";
    src: url("../Fonts/IRANYekanLight.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IranYekanMedium";
    src: url("../Fonts/IRANYekanMedium.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IranYekanRegular";
    src: url("../Fonts/IRANYekanRegular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IranYekanThin";
    src: url("../Fonts/IRANYekanThin.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "YekanPlus";
    src: url("../Fonts/YEKAN PLUS.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "IRANSansWeb";
    src: url("../Fonts/IRANSansWeb_FaNum.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

/* ================================================== 2. GENERAL : */
body {
    margin: 0;
    padding: 0;
    font-family: "IranYekanBold", "IRANSansWeb";
    overflow-x: hidden;
}

.fa--text {
    text-align: justify;
    direction: rtl;
}

.en--text {
    text-align: justify;
    direction: ltr;
}

.font__en {
    font-family: Arial;
}

.sms {
    display: flex;
    justify-content: center;
    align-content: center;
    cursor: pointer;
    border-radius: 10px;
    border: #0392fb solid 1px;
    padding: 15px 5px;
    margin: 5px;
    background-color: ghostwhite;
}

.sms a {
    text-decoration: none;
    color: black;
}

.flickity-page-dots {
    /*display: none;*/
}

.carousel:focus {
    border: none !important;
    outline: none;
    box-shadow: none;
}

.pattern-top-light {
    background: url("../Img/pattern_2.png") white 50% -12.5% /450px repeat;
}

.pattern-mid-light {
    background: url("../Img/pattern_2.png") white 50% 10% /450px repeat;
}

.pattern-top-night {
    background: url("../Img/pattern_2_night.png") white 50% -12.5% /450px repeat;
}

.pattern-mid-night {
    background: url("../Img/pattern_2_night.png") white 50% 10% /450px repeat;
}


/* ================================================== 3. PRELOADER : */
#preloader {
    background-color: #d1ecff;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 10;
}

#loader {
    background: url("../Img/site-logo.png") no-repeat center #d1ecff;
    background-size: 150px;
    height: 200px;
    width: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    z-index: 10;
    border-radius: 100%;
    animation: loader infinite 10s;
}

@keyframes loader {
    0% {
        background-size: 0;
    }
    10% {
        background-size: 150px;
    }
    50% {
        box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
    }
    90% {
        background-size: 150px;
    }
    100% {
        background-size: 0;
    }
}

/* ================================================== 4. HEADER : */
.header {
    position: absolute;
    width: 100%;
    z-index: 2;
}

.head {
    align-items: center;
    background-color: #d1ecff;
    /*border-radius: 20px;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /*margin: 10px;*/
    padding: 0 15px;
}

.img-logo img {
    height: 75px;
}

.easy-access {
    text-decoration: none;
}

.easy-access img {
    background-color: white;
    border-radius: 8px;
    margin: 2px 1px;
    padding: 3px;
    width: 25px;
    transition: 0.3s;
}

.easy-access img:hover {
    background-color: #ff7900;
}

.sm img {
    padding: 4px;
    width: 25px;
    border-radius: 8px;
}

.menu-btn {
    background-color: #0090fe;
    border-radius: 12px;
    cursor: pointer;
    height: 46px;
    width: 46px;
    transition: 0.3s;
    position: relative;
}

.menu-btn:hover {
    opacity: 0.5;
}

.menu-btn span {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    border-radius: 5px;
    display: block;
    height: 4px;
    width: 25px;
}

.menu-btn span:nth-child(1) {
    transform: translate(40%, 325%);
}

.menu-btn span:nth-child(2) {
    transform: translate(40%, 525%);
}

.menu-btn span:nth-child(3) {
    transform: translate(40%, 725%);
}

/* ================================================== 5. FOOTER : */
.footer {
    background-color: #0050d0;
    padding: 0;
    position: relative;
}

.telegram {
    background-color: #0184ff;
}

.instagram {
    background-color: #b71368;
}

.eita {
    background-color: #f6a21a;
}

.telegram img:nth-child(2n + 1) {
    background-color: #0184ff;
}

.instagram img:nth-child(2n + 1) {
    background-color: #b71368;
}

.eita img:nth-child(2n + 1) {
    background-color: #f6a21a;
}

.contactus {
    align-items: center;
    direction: rtl;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
    text-decoration: none;
}

.contactus img {
    width: 45px;
    height: 45px;
}

.contactus img:nth-child(2n) {
    opacity: 0.6;
}

.contactus__img {
    background-color: rgb(255, 255, 255);
    border-radius: 100%;
    position: absolute;
    right: 0;
    z-index: 9;
}

.contactus.tell .contactus__img {
    box-shadow: -5px 0px 15px rgba(0, 0, 0, 0.75),
    -4px 4px 5px 0px rgba(255, 255, 255, 1) inset,
    4px -4px 5px 0px rgba(255, 255, 255, 1) inset,
    -5px -5px 5px 0px rgba(11, 130, 254, 1) inset,
    5px 5px 5px 0px rgba(11, 130, 254, 1) inset;
}

.contactus.insta .contactus__img {
    box-shadow: -5px 0px 15px rgba(0, 0, 0, 0.75),
    -4px 4px 5px 0px rgba(255, 255, 255, 1) inset,
    4px -4px 5px 0px rgba(255, 255, 255, 1) inset,
    -5px -5px 5px 10px rgba(217, 35, 99, 1) inset,
    5px 5px 5px 10px rgba(217, 35, 99, 1) inset;
}

.contactus.eit .contactus__img {
    box-shadow: -5px 0px 15px rgba(0, 0, 0, 0.75),
    -4px 4px 5px 0px rgba(255, 255, 255, 1) inset,
    4px -4px 5px 0px rgba(255, 255, 255, 1) inset,
    -5px -5px 5px 0px rgba(249, 179, 52, 1) inset,
    5px 5px 5px 0px rgba(249, 179, 52, 1) inset;
}

.contactus__bgimg {
    border-radius: 100%;
    border: solid white 10px;
    margin: 4px;
    padding: 10px;
}

.contactus__detail {
    align-items: center;
    border-radius: 25px 5px 5px 25px;
    color: white;
    display: flex;
    flex-direction: row;
    height: 80px;
    justify-content: end;
    margin: 25px 0;
    padding: 15px;
    position: relative;
    width: 75%;
}

.contactus__detail img,
p {
    z-index: 8;
}

.contactus__detail p {
    margin: auto;
    font-size: 14px;
}

.contactus__detail p span {
    font-family: "IranYekanExtraBold";
    font-size: 16px;
}

.flash {
    border-radius: 5px 30px 0px 30px;
    height: 74px;
    left: -8%;
    position: absolute;
    transform: rotate(-45deg);
    width: 74px;
}

.namad {
    position: relative;
}

.namad__ruban {
    background-color: #fcd004;
    height: 75px;
    position: absolute;
    top: 50%;
    transform: translateY(-65%);
    width: 100%;
}

.namad__size img {
    width: 60px;
    height: 85px;
    border-radius: 6px;
    background-color: white;
}

.namad__detail {
    background-color: #2d2d2d;
    border-radius: 15px;
    border: solid #fcd004 5px;
    color: white;
    direction: rtl;
    font-size: 14px;
    margin: 25px;
    padding: 10px;
    text-align: center;
}

.namad__detail p {
    font-family: "IranYekanLight";
    margin: 5px;
    padding: 0;
}

.namad__detail span {
    color: #fcd004;
}

.namad__img {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.namad__img img {
    margin: 20px 10px;
}

.footer h6 {
    color: white;
    font-family: "IranYekanLight";
    font-size: 15px;
    text-align: center;
}

/* ================================================== 6. SECTION0:MENU : */
.section0 {
    background-color: #d1ecff;
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
    width: 75vw;
    z-index: 9;
    overflow: hidden;
    transition: 1s;
    max-width: 0;
}

.openMenu {
    max-width: 100%;
}

.menu {
    background-image: url("../Img/bg-menu.png");
    background-position: center;
    background-repeat: repeat;
    background-size: 800px 1100px;
    height: 100vh;
    overflow-y: scroll;
    width: 75vw;
}

.menu::-webkit-scrollbar {
    display: none;
}

.menu--header {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.menu--head {
    background-color: #0091ff;
    border-radius: 0 0 50px 50px;
    height: 10vh;
    width: 95%;
}

.menu--closebtn img {
    float: left;
    margin: 7px;
    width: 35px;
    transition: 0.3s;
}

.menu--closebtn img:hover {
    opacity: 0.5;
}

.menu--avatar img {
    border-radius: 100%;
    border: solid #0091ff 1px;
    transform: translateY(-50%);
    width: 75px;
}

.menu--avatar {
    transition: 0.5s;
}

.menu--avatar:hover {
    transform: scale(1.5);
}

.menu--date {
    align-items: center;
    background-color: #0090fe;
    border-radius: 12px;
    color: #004ece;
    display: flex;
    flex-direction: row;
    font-family: "IranYekanRegular";
    justify-content: center;
    padding: 0.5px 5px;
    font-weight: 600;
    transform: translateY(-33%);
}

.menu--day {
    background-color: white;
    border-radius: 12px;
    margin: 4px 1px;
    padding: 4px 7px;
}

.menu--ch {
    background-color: white;
    border-radius: 12px;
    margin: 4px 5px;
    padding: 4px 7px;
}

.menu--mounth {
    background-color: white;
    border-radius: 12px;
    margin: 4px 1px;
    padding: 4px 10px;
}

.menu--detail {
    background-color: white;
    border-radius: 20px;
    margin: 0 15px;
    width: 90%;
}

.menu__username h1 {
    font-size: 15px;
    margin: 10px 0px;
}

.menu__balance span {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.menu__balance {
    display: flex;
    flex-direction: row;
    font-size: 15px;
    justify-content: center;
}

.menu__balance img {
    background-color: #004ece;
    border-radius: 10px;
    height: 30px;
    padding: 3px;
    transform: translateX(15%);
    width: 30px;
}

.spbal1 {
    color: #004ece;
    margin: 0 0 10px 5px;
    padding: 5px;
}

.spbal2 {
    background-color: #0090fe;
    border-radius: 0 10px 10px 0px;
    color: white;
    height: 30px;
    margin: 0 10px 15px 5px;
    padding: 5px;
}

.menu--cart {
    background-color: white;
    border-radius: 25px;
    font-family: "IranYekanRegular";
    font-size: 15px;
    margin: 10px 15px;
    padding: 5px 12px;
    width: 90%;
}

.menu--cart a {
    text-decoration: none;
    color: black;
    border-radius: 15px;
}

.top-margin {
    margin-top: 20px;
}

.menu__cartdeatil {
    background-color: #e3f3ff;
    border-radius: 15px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: right;
    margin: 10px 0px;
    transition: 0.5s;
}

.menu__cartdeatil img {
    height: 35px;
    margin: 7px 12px;
    padding: 4px;
    width: 35px;
}

.menu__cartdeatil:hover {
    background-color: #d1ecff;
    border: solid #0075cf 2px;
}

.menu--cart h1 {
    color: #81a9c7;
    font-size: 20px;
    margin: 40px 0px;
}

@media screen and (min-width: 768px) {
    .section0 {
        width: 20vw;
    }

    .menu {
        width: 20vw;
    }
}

/* ================================================== 7. SECTION1:HERO : */
.section1 {
    background-color: #d1ecff;
    height: 56vh;
    position: relative;
    border-bottom: 3px solid #19294b;
}

.hero {
    position: absolute;
    margin: 15px 20px 0 20px;
    top: 20%;
}

.hero__title {
    font-family: "IranYekanExtraBold";
    font-size: 20px;
}

.hero__caption {
    font-family: "IranYekanRegular";
    font-size: 11px;
    width: 60%;
}

.hero__link {
    background-color: #ff7900;
    border-radius: 7px;
    color: #ffffff;
    font-family: "IranYekanBold";
    font-size: 12px;
    padding: 3px 40px;
    text-decoration: none;
    transition: 0.3s;
}

.hero__link:hover {
    opacity: 0.5;
}

.hero--image {
    display: flex;
    justify-content: left;
    position: absolute;
    bottom: 0;
    left: 0;
}

.hero--image img {
    width: 90%;
}

/* ================================================== 8. SECTION2:HomePage : */
.section2 {
    padding: 25px 20px 30px 20px;
    position: relative;
    z-index: 3;
}

.row {
    align-items: center;
    justify-content: center;
}

.cardash {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-family: "IranYekanBold";
    justify-content: center;
    margin: 10px 0;
    color: black;
    text-decoration: none;
    transition: 0.3s;
    cursor: pointer;
}

.card__img:hover {
    background-color: #d1ecff;
    border: solid #0075cf 2px;
}

.card__img {
    border-radius: 17px;
    background-color: white;
    padding: 15px;
}

.card__img img {
    margin-top: -5px;
    padding: 5px;
    width: 120px;
}

.card__title h2 {
    font-size: 22px;
    margin-top: 10px;
    text-wrap: nowrap;
}

.moshavere {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 75px;
    text-align: center;
}

.moshavere__img {
    height: 15px;
    position: relative;
}

.moshavere__img img {
    width: 140px;
    position: absolute;
    top: -765%;
    right: 0;
}

.moshavere__card {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(270deg, #e94f05, #ff6808);
    border-radius: 20px;
    padding: 15px;
    width: 100%;
    height: 127px;
    box-shadow: 0 5px 20px gray;
}

.mcard__title {
    width: 50%;
}

.moshavere__card h3,
.moshavere__card h6 {
    color: white;
}

.moshavere__card h6 {
    word-spacing: 1px;
}

.moshavere__card a {
    background-color: white;
    border-radius: 8px;
    color: orangered;
    font-size: 14px;
    padding: 0 30px;
    margin-top: 5px;
    box-shadow: inset 0 -1px 2px 0 #6a6a6a;
    text-decoration: none;
    transition: 0.3s;
}

.moshavere__card a:hover {
    opacity: 0.5;
}

/* ================================================== 9. SECTION3:HomePage : */
.section3 {
    position: relative;
    padding-bottom: 25px;
}

.ccards {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.ccard {
    text-align: center;
}

.ccard__detail {
    align-items: center;
    background: linear-gradient(
            180deg,
            rgba(0, 86, 209, 1) 10%,
            rgba(1, 143, 253, 1) 90%
    );
    border-radius: 25px;
    box-shadow: 0 5px 10px rgba(92, 92, 92, 0.6);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0px 25px;
    padding: 25px 5px;
    width: 250px;
    height: max-content;
}

.ccard__image img {
    border-radius: 100%;
    width: 40px;
    border: black solid 2px;
    transform: translateY(50%);
}

.ccard__title {
    padding-top: 8px;
}

.ccard__title h4 {
    background-color: #0075cf;
    border-radius: 15px;
    font-family: "IranYekanExtraBold";
    font-size: 8px;
    padding: 8px 8px;
}

.ccard__caption {
    font-family: "IranYekanRegular";
    font-size: 12px;
    line-height: 15px;
    margin-bottom: -25px;
    padding: 0px 15px;
}

.section3 .carousel-cell {
    margin-top: 5px;
    margin-bottom: 50px;
}

.flickity-button {
    display: none;
}

.section3 .carousel-cell.is-selected {
    transform: scale(1.2);
}

.carousel-cell {
    transition: transform 0.3s ease;
}

.dot {
    transition: 0.3s;
}

.dot:hover {
    background-color: #ff7900;
}

.flickity-page-dots {
    bottom: 0;
}

.flickity-page-dots .dot {
    margin: 0 3px;
}

.dot.is-selected {
    background-color: #ff7900;
}

/* ================================================== 10. SECTION4:HomePage : */
.section4 {
    position: relative;
    padding: 0 35px 30px 35px;
}

.scard {
    align-items: center;
    background-color: #d1ecff;
    border-radius: 30px;
    direction: rtl;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 10px 20px;
    padding: 9px 25px;
}

.scard__title h5 {
    color: #0058d3;
    font-family: "IranYekanExtraBold";
    font-size: 15px;
}

.Scard__caption {
    font-family: "IranYekanRegular";
    font-size: 12px;
    line-height: 20px;
}

.Scard__caption p {
    margin: 0px;
}

.scard__img img {
    height: 75px;
    margin-left: -20px;
    margin-right: 10px;
}

/* ================================================== 11. SUBHEADER : */
.subheader {
    align-items: end;
    background-color: #d1ecff;
    display: flex;
    font-family: "IranYekanExtraBold";
    height: 20vh;
    justify-content: center;
    padding: 15px 25px;
    position: relative;
}

.subheader h1 {
    font-size: 20px;
    font-family: "IRANSansWeb";
    font-weight: bold;
}

.subheader.detailheader.subheader {
    font-family: "IRANSansWeb";
    height: 23vh;
    align-items: center;
    flex-direction: column;
    justify-content: end;
}

.subheader.detailheader a {
    text-decoration: none;
    color: black;
    font-size: 11px;
}

.subheader__detail span {
    font-size: 10px;
    margin: 0px 8px;
}

/* ================================================== 12. BLOGVIEW : */
.serachbar {
    align-items: center;
    display: flex;
    height: 10vh;
    justify-content: center;
    padding: 50px 0 0 0;
    position: relative;
    z-index: 1;
}

.serachbar form {
    align-items: center;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.75);
    direction: rtl;
    display: flex;
    justify-content: center;
    padding: 1px 5px;
    width: 90%;
}

.serachbar input {
    border-radius: 8px;
    border: none;
    font-family: "IranYekanBold";
    height: 35px;
    margin: 5px;
    padding: 0 10px;
    transition: 0.5s;
    width: 90%;
}

.serachbar button {
    background-color: #ff7900;
    border-radius: 8px;
    border: none;
    height: 35px;
    transition: 0.5s;
    width: 10%;
}

.serachbar svg {
    transform: translateY(-2px);
    text-align: center;
    align-self: center;
}

.serachbar button:hover {
    opacity: 0.5;
}

.blog {
    position: relative;
    padding: 50px 0px;
}

.blog a {
    text-decoration: none;
    color: black;
}

.blog__card {
    border-radius: 8px;
    border: darkgray solid 1px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    margin: 10px 10px;
    width: 95%;
}

.blog__img {
    position: relative;
}

.blog__img img {
    border-radius: 8px 8px 0 0;
    width: 100%;
}

.blog__img span {
    color: white;
    left: 3%;
    position: absolute;
    bottom: 5%;
}

.blog__img span:last-child {
    position: absolute;
    font-size: 10px;
    left: 88%;
    bottom: 6%;
    font-family: "IRANSansWeb";
}

.blog__img p {
    position: absolute;
    background-color: #ff7900;
    border-radius: 100%;
    color: white;
    font-size: 9px;
    height: 12px;
    left: 1.5%;
    position: absolute;
    text-align: center;
    bottom: 1%;
    width: 12px;
    z-index: 1;
}

.blog__detail {
    direction: rtl;
    padding: 10px 20px 10px 20px;
}

.blog__detail h1 {
    color: black;
    font-family: "IranYekanMedium";
    font-size: 20px;
    padding: 10px 0px;
}

.blog__detail span {
    color: gray;
    font-family: "IranYekanLight";
    font-size: 10px;
    font-weight: 100;
}

.blog__detail p {
    color: gray;
    font-size: 12px;
    text-align: justify;
}

.hashtag {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    direction: rtl;
}

.hashtag p {
    font-size: 12px;
    padding: 3px 5px;
    margin: 0px 5px 10px 5px;
    border-radius: 1px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.hashtag span {
    padding: 1px;
}

/* ================================================== 13. BLOGSEARCH : */
.blog__searchcard {
    border-radius: 8px;
    border: darkgray solid 1px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    margin: 10px 10px;
    width: 95%;
}

.blog__searchimg {
    font-family: "IRANSansWeb";
    position: relative;
}

.blog__searchimg img {
    border-radius: 8px 8px 0 0;
    width: 100%;
}

.blog__searchimg p {
    background-color: white;
    border-radius: 5px;
    padding: 2px 5px;
    position: absolute;
    right: 3%;
    top: 5%;
}

.blog__searchimg span {
    display: block;
    font-size: 10px;
    text-align: center;
}

.blog__searchimg span:first-child {
    font-size: 24px;
    margin-bottom: -6px;
}

.blog__searchimg span:nth-child(3) {
    background-color: #ff7900;
    border-radius: 3px;
    bottom: -5%;
    font-size: 10px;
    padding: 1px 5px;
    position: absolute;
    right: 50%;
    transform: translateX(50%);
}

.blog__searchdetail {
    font-size: 11px;
    padding: 18px 10px;
    text-align: center;
}

.blog__searchdetail p {
    color: gray;
    font-family: "IRANSansWeb";
    font-size: 11px;
    font-weight: lighter;
    margin: 0;
}

.blog__searchdetail h1 {
    font-size: 14px;
    padding-bottom: 20px;
}

.commentnumbr {
    position: relative;
    top: 0;
    transform: scale(0.9);
}

.commentnumbr span {
    color: gray;
    left: 44%;
    position: absolute;
    transform: translate(-50%, -120%);
}

.commentnumbr p {
    background-color: gray;
    border-radius: 100%;
    color: white;
    font-size: 9px;
    height: 12px;
    left: 41.5%;
    margin: 0;
    position: absolute;
    transform: translate(-50%, -200%);
    width: 12px;
    z-index: 1;
}

.commentnumbr span:last-child {
    left: 58%;
    position: absolute;
}

/* ================================================== 14. BLOGDETAIL : */
.borderradius {
    box-shadow: none;
    border: none;
}

.borderradius img {
    border-radius: 5px;
}

.nonepadding h1 {
    margin: 0;
    padding: 10px 0 0 0;
}

.nonepadding {
    padding: 20px 10px 0 0;
}

.nonepadding span:first-child {
    background-color: #ff7900;
    border-radius: 3px;
    bottom: -5%;
    color: white;
    font-size: 10px;
    padding: 1px 5px;
    right: 50%;
}

.blogcontent {
    direction: rtl;
    font-family: "IRANSansWeb";
    padding: 0px 10px 50px 10px;
    text-align: justify;
}

.blogcontent img {
    width: 100%;
}

.otherqustions {
    font-family: "IRANSansWeb";
    margin-bottom: 100px;
    padding: 0px 20px;
    text-align: justify;
}

.otherqustions h2 {
    font-size: 24px;
    font-weight: bold;
    padding: 0 3px 0 0;
    text-align: right;
}

.question {
    border-radius: 10px;
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
    margin: 10px 0px;
}

.costomecollapse {
    margin: 5px 0px;
    padding: 0;
    width: 100%;
}

.costomecollapse a {
    background-color: white;
    border: none;
    box-shadow: none;
    color: black;
    text-align: right;
    width: 100%;
}

.costomecollapse span {
    color: gray;
    float: left;
}

.costomecollapse a:hover {
    background-color: white;
    color: #ff7900;
}

.collapse {
    height: max-content;
    width: 100%;
}

.card {
    border: none;
    color: gray;
    direction: rtl;
    font-size: 12px;
    height: max-content;
    text-align: justify;
    width: 94%;
}

.card:hover {
    background-color: white;
    border: none;
}

.comments {
    font-family: "IRANSansWeb";
    margin-bottom: 100px;
    padding: 0px 20px;
    text-align: justify;
    direction: rtl;
}

.comments h2 {
    font-size: 24px;
    font-weight: bold;
    padding: 0 3px 10px 0;
    text-align: right;
    direction: ltr;
}

.comment {
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
    margin: 10px;
    border-radius: 10px;
    padding: 15px;
}

.comment h3 {
    font-size: 14px;
    font-weight: bold;
    padding: 0 3px 10px 0;
    text-align: right;
    padding-bottom: 0;
}

.subcomment {
    width: 85%;
    margin: 0 auto;
}

.sender {
    display: flex;
    font-size: 14px;
}

.sender span {
    padding: 0 5px 0 0;
    color: gray;
}

.date {
    font-size: 12px;
    color: gray;
    padding-bottom: 15px;
}

.comment p {
    color: gray;
    font-size: 12px;
}

#replay {
    text-decoration: none;
    font-size: 12px;
    color: #ff7900;
    cursor: pointer;
}

.commentform {
    font-family: "IRANSansWeb";
    border-radius: 5px;
}

.commentform h2 {
    font-size: 24px;
    font-weight: bold;
    padding: 25px 20px 10px 0;
    text-align: right;
}

.commentform #form {
    direction: rtl;
    display: flex;
    flex-direction: column;
    padding: 0px 10px 35px 10px;
}

.commentform textarea {
    border-radius: 5px;
    border: rgb(214, 214, 214) solid 2px;
    transition: 0.5s;
}

#form a {
    align-self: center;
    background-color: #ff7900;
    border-radius: 5px;
    border: none;
    text-decoration: none;
    cursor: pointer;
    color: white;
    margin: 5px 0px;
    padding: 5px 15px;
    width: max-content;
    transition: 0.5s;
}

.commentform a:hover {
    opacity: 0.5;
}

/* ================================================== 15. ADDPRODUCT : */
.addproduct {
    position: relative;
    margin: 50px 10px;
    direction: rtl;
    border: rgb(245, 245, 245) solid 1px;
    border-radius: 25px;
    background-color: ghostwhite;
    padding: 15px 10px;
    font-family: "IRANSansWeb";
}

.step {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 15px;
    margin: 25px 0px;
}

.step img {
    transform: translateY(-200%);
}

.chooseservice {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0 20px;
}

.chooseservice h2 {
    color: rgb(196, 196, 196);
    font-size: 12px;
    margin: 25px 0 0 0;
    text-wrap: nowrap;
}

.chooseservice span {
    background-color: rgb(221, 221, 221);
    border-radius: 9px;
    height: 35px;
    padding: 8px;
    position: relative;
    transform: rotate(45deg);
    width: 35px;
}

.chooseservice svg {
    height: 17px;
    left: 50%;
    opacity: 0.4;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 17px;
}

.activestep.chooseservice span {
    background-color: #eafdfd;
    border: #e0ffff solid 2px;
    color: #36c7c7;
    opacity: 1;
}

.activestep.chooseservice h2 {
    color: #36c7c7;
}

.product {
    margin: 20px 0px;
}

.product select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 12px;
    background-color: rgb(251, 251, 251);
    border-radius: 8px;
    border: rgb(224, 224, 224) solid 1px;
    color: rgb(161, 161, 161);
    font-size: 13px;
    margin: 5px 0px;
    padding: 13px 10px;
    width: 100%;
}

.service-description {
    background-color: #eef4ff;
    border-radius: 10px;
    border: #bbc7ff solid 2px;
    margin: 5px 0;
    padding: 15px 20px;
}

.service-description h5 {
    font-size: 15px;
}

.service-description li {
    font-size: 13px;
    font-weight: 300;
    list-style: none;
    margin-top: 3px;
}

.commentfixing {
    color: rgb(105, 105, 105);
    position: relative;
    text-decoration: none;
}

.commentfixing p {
    background-color: #ff7900;
    border-radius: 5px;
    top: 0;
    color: white;
    font-size: 10px;
    height: 14px;
    left: 0;
    position: absolute;
    text-align: center;
    transform: translate(-50%, -100%);
    width: 13px;
    z-index: 1;
}

.commentfixing span {
    top: 0;
    left: 0;
    transform: translate(0%, -50%);
    position: absolute;
}

.commentfixing span:last-child {
    font-size: 10px;
    transform: translate(15%, -50%);
}

.modal {
    direction: rtl;
}

.commentproduct {
    align-items: start;
    border-bottom: gray solid 1px;
    display: flex;
    flex-direction: column;
    font-family: "IRANSansWeb";
    font-size: 15px;
    justify-content: center;
    margin: 15px 0;
    padding: 0 0 10px 0;
}

.commenttext {
    align-items: start;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.commenttext span {
    background-color: rgb(0, 185, 0);
    border-radius: 5px;
    color: white;
    margin: 0 5px;
    padding: 0 6px;
}

.commentdetail span:first-child {
    background-color: orange;
    border-radius: 5px;
    padding: 1px 3px;
}

.commentdetail span {
    color: rgb(101, 101, 101);
    font-size: 12px;
    margin: 0px 5px;
}

.service-number input {
    background-color: rgb(251, 251, 251);
    border-radius: 10px;
    border: #f8f5fb solid 1px;
    border: none;
    color: gray;
    font-size: 12px;
    margin: 5px 0;
    padding: 15px 10px;
    width: 100%;
}

.service-price {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 20px 0px;
}

.price-detail {
    display: flex;
    flex-direction: row;
    font-size: 13px;
    justify-content: space-between;
    text-align: right;
    margin: 10px 0;
}

.activeopcity {
    opacity: 0.5;
}

.price-detail span:last-child {
    color: #1da7a7;
    font-family: "IRANSansWeb";
    font-size: 13px;
}

.flexcol {
    flex-direction: column;
}

.justifyend {
    justify-content: end;
}

.service-price button {
    background-color: #36c7c7;
    border-radius: 10px;
    border: none;
    color: #fff;
    font-size: 12px;
    padding: 12px 15px;
}

.service-detail {
    margin: 20px 0px;
    color: rgb(87, 87, 87);
}

.shop_table td,
tr,
th {
    background-color: rgb(255, 255, 255);
    font-size: 13px;
    font-weight: 300;
    padding: 10px 10px;
}

.shop_table th:first-child {
    border: rgb(195, 195, 195) solid 1px;
    text-align: right;
}

.shop_table th:last-child {
    border: rgb(195, 195, 195) solid 1px;
    text-align: left;
}

.shop_table td:first-child {
    border: rgb(195, 195, 195) solid 1px;
    text-align: right;
}

.shop_table td:last-child {
    border: rgb(195, 195, 195) solid 1px;
    color: #7ccc77;
    text-align: left;
}

.shop_table th {
    background-color: rgb(242, 242, 252);
}

.order-total th:nth-child(1) {
    background-color: #f4fff3;
    color: #7ccc77;
}

.order-total td:nth-child(2) {
    background-color: #f4fff3;
    color: #7ccc77;
}

.shop_table th:nth-child(1) {
    font-weight: 300;
    text-align: right;
}

.product textarea {
    border: rgb(195, 195, 195) solid 1px;
    color: rgb(121, 120, 120);
    font-size: 12px;
    height: 100px;
    padding: 10px;
    width: 100%;
}

.accept_rules {
    font-size: 15px;
    color: rgb(121, 120, 120);
    text-decoration: none;
}

.accept_rules span {
    color: rgb(93, 93, 254);
}

.service-price .cancelbuy {
    background-color: red;
}

.cancelbuy svg {
    background-color: red;
}

/* ================================================== 16. SERVICES : */
.service {
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(163, 163, 163, 0.5);
    direction: rtl;
    font-family: "IRANSansWeb";
    margin: 25px 10px;
}

.servicecategory {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.servicecategory select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 12px;
    border-radius: 2px;
    border: rgb(229, 229, 229) solid 1px;
    color: gray;
    cursor: pointer;
    font-size: 12px;
    margin: 10px 0px;
    padding: 5px 5px;
    width: 100%;
}

.servicecategory input {
    background: #7ccc77;
    border-radius: 5px;
    border: none;
    color: white;
    font-size: 12px;
    margin: 10px 0px;
    padding: 12px 7px;
    width: 50%;
}

.borderadius {
    border-radius: 20px;
}

.service h2 {
    border-bottom: rgb(240, 240, 240) solid 1px;
    margin: 25px 25px 0 25px;
    padding: 0px 20px 15px 0;
}

.detail {
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(163, 163, 163, 0.5);
    color: rgb(128, 128, 128);
    display: grid;
    font-size: 13px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(7, 1fr);
    margin: 10px 0;
    padding: 15px;
    width: 100%;
}

.detail button:nth-child(1) {
    background-color: #f58;
    border-radius: 2px;
    border: none;
    color: white;
    font-size: 13px;
    margin-bottom: 7px;
    padding: 5px 8px;
}

.detail span:nth-child(2n) {
    direction: ltr;
}

.detail span:nth-child(12) {
    color: #7ccc77;
}

.spcard {
    box-shadow: 0 0 10px rgba(163, 163, 163, 0.5);
    background-color: #eef4ff;
    border-radius: 10px;
    border: #bbc7ff solid 2px;
    margin: 10px auto;
}

/* ================================================== 17. TRANSACTIONS : */
.transaction {
    margin: 50px 0;
    padding: 12px;
    position: relative;
}

.transactioncard {
    align-items: center;
    background-color: #fafafa;
    border-radius: 15px;
    border: #eaeaea solid 1px;
    direction: rtl;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.transactioncard svg {
    color: #3fd2da;
    margin-top: 25px;
}

.transactioncard h1 {
    font-family: "IRANSansWeb";
    font-size: 22px;
    margin: 15px 5px;
}

.transactioncard h1 span {
    background-color: #ecfcfb;
    border-radius: 5px;
    color: #00b1ccdb;
    display: inline-block;
    height: 25px;
}

.transactioncard h2 {
    font-size: 14px;
    font-weight: 100;
    color: gray;
}

.transactionbtn {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.transactionbtn a {
    border-radius: 5px;
    color: white;
    font-size: 14px;
    margin: 5px 3px;
    padding: 10px 8px;
    text-decoration: none;
}

.transactionbtn a:first-child {
    background-color: #63aaf8;
}

.transactionbtn a:last-child {
    background-color: #7acd73;
}

.transactiontable {
    border: rgb(223, 223, 223) solid 1px;
    color: rgb(146, 146, 146);
    display: grid;
    font-size: 14px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    margin: 25px;
    text-align: right;
    width: 100%;
}

.transactiontable span:nth-child(4n + 1) {
    background-color: white;
    border-bottom: rgb(209, 209, 209) solid 1px;
    padding: 15px 10px;
}

.transactiontable span:nth-child(4n + 2) {
    background-color: white;
    border-bottom: rgb(209, 209, 209) solid 1px;
    padding: 15px 10px;
}

.transactiontable span:nth-child(4n + 3) {
    background-color: #fafafa;
    border-bottom: rgb(209, 209, 209) solid 1px;
    padding: 15px 10px;
}

.transactiontable span:nth-child(4n + 4) {
    background-color: #fafafa;
    border-bottom: rgb(209, 209, 209) solid 1px;
    padding: 15px 10px;
}

.losepay svg {
    color: red;
}

.losepay h1 span {
    background-color: rgb(240, 240, 240);
    color: red;
}

.statustransaction {
    background-color: ghostwhite;
    border-radius: 5px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
    color: #6f6f6f;
    direction: rtl;
    display: grid;
    font-family: "IRANSansWeb";
    font-size: 14px;
    font-weight: 400;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    padding: 15px 0;
    text-align: right;
}

.statustransaction a {
    align-content: center;
    color: #6f6f6f;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 3px 10px;
    text-decoration: none;
}

.statustransaction svg {
    margin-left: 1px;
}

.statustransaction span {
    border-radius: 4px;
    color: white;
    display: inline-block;
    height: 18px;
    margin-right: 1px;
    text-align: center;
    width: 20px;
}

/* ================================================== 18. ORDERS : */
.order {
    margin-top: 25px 0;
    padding: 20px 15px;
    position: relative;
    text-align: center;
}

.status {
    background-color: ghostwhite;
    border-radius: 5px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
    color: #6f6f6f;
    direction: rtl;
    display: grid;
    font-family: "IRANSansWeb";
    font-size: 14px;
    font-weight: 400;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 15px 0;
    text-align: right;
}

.status a {
    align-content: center;
    color: #6f6f6f;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 3px 10px;
    text-decoration: none;
}

.status svg {
    margin-left: 1px;
}

.status span {
    border-radius: 4px;
    color: white;
    display: inline-block;
    height: 18px;
    margin-right: 1px;
    text-align: center;
    width: 20px;
}

.spbgc1 {
    background-color: #f0f2f7;
}

.spbgc2 {
    background-color: lightsalmon;
}

.spbgc3 {
    background-color: red;
}

.spbgc4 {
    background-color: lightgreen;
}

.spbgc5 {
    background-color: orange;
}

.spbgc6 {
    background-color: green;
}

.orderdetail {
    background-color: ghostwhite;
    border-radius: 25px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
}

.ordertitle {
    align-items: center;
    border-bottom: rgb(153, 153, 153) solid 1px;
    direction: rtl;
    display: flex;
    flex-direction: row;
    font-family: "IRANSansWeb";
    justify-content: right;
    margin: 10px;
    padding: 10px;
}

.ordertitle h1 {
    color: rgb(74, 74, 74);
    font-size: 20px;
    margin: 0 10px;
}

.ordertitle svg {
    color: #ac82a4;
}

.ordercard {
    border-bottom: rgb(228, 228, 228) solid 1px;
    direction: rtl;
    display: grid;
    font-size: 10px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr);
    padding: 10px;
    text-align: center;
}

.ordercard h1 {
    font-size: 12px;
    text-align: center;
}

.bordernone {
    border: none;
}

.spbgo {
    height: max-content;
    width: max-content;
    padding: 3px 5px;
    border-radius: 5px;
    margin: 0 auto;
    z-index: 5;
}

/* ================================================== 19. PAGEINATION : */
.pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.pagination li {
    background-color: #d1ecff;
    width: 25px;
    height: 25px;
    text-align: center;
    list-style: none;
    text-decoration: none;
    border-radius: 5px;
    border: #1d6ea1 solid 1px;
    margin: 2px;
}

.pagination a {
    text-decoration: none;
    color: #1d6ea1;
}

.filter {
    color: red;
    cursor: pointer;
}

/* ================================================== 20. ERROR: */
.error {
    color: red;
    margin: 150px 50px;
    background-color: ghostwhite;
    padding: 25px 0;
    border-radius: 15px;
    direction: rtl;
    text-align: center;
    position: relative;
}

.error h1 {
    font-family: "YekanPlus";
}

/* ================================================== 21. DROPDOWN : */
.dropdown-item {
    display: flex;
    align-items: center;
}

.dropdown-item img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.selected-option {
    display: flex;
    align-items: center;
}

.dropdown {
    width: 100%;
}

.dropdown ul {
    width: 100%;
}

.dropdown button {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    width: 100%;
    background-color: ghostwhite;
    border: rgb(224, 224, 224) solid 1px;
    margin: 5px 0px;
    font-size: 13px;
    padding: 13px 10px;
    color: #2d2d2d;
}

.selected-option p {
    margin: 0;
    padding: 0;
}

.dropdown-menu p {
    margin: 0;
    padding: 0;
    font-size: 12px;
    text-wrap: wrap;
}

.dropdown-menu {
    font-size: 12px;
    text-wrap: warp;
}

.dropdown-toggle::after {
    transform: translateY(225%);
}

/* ================================================== 22. ORDERCOMMENT : */
/* استایل فرم منحصر به فرد */
#unique-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

#unique-form h6 {
    text-align: center;
}

#unique-form .form-group {
    margin-bottom: 15px;
}

#unique-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

#unique-form input,
#unique-form textarea,
#unique-form select {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#unique-form textarea {
    resize: none;
    height: 100px;
}

#unique-form #ratingValue {
    text-align: center;
    font-size: 16px;
    margin-top: 5px;
    font-weight: bold;
}

#unique-form input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    background: #ddd;
    outline: none;
    border-radius: 5px;
    overflow: hidden;
}

#unique-form input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: orange;
    cursor: pointer;
    border-radius: 50%;
}

#unique-form button {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    color: #fff;
    background-color: orange;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#unique-form button:hover {
    background-color: #ff6600;
}

#unique-form .padding {
    padding: 25px 0;
}

/* ================================================== 23. BANNERS : */
.banners {
    position: relative;
    display: flex;
    flex-direction: row;
    direction: rtl;
    justify-content: center;
    align-items: center;
    padding: 75px 0;
    overflow: hidden;
}

.wide_banners {
    display: flex;
    flex-direction: column;
    padding: 25px;
    gap: 10px;
    z-index: 1;
}

.banner img {
    border-radius: 25px;
    width: 100%;
}

.small_banner {
    border-radius: 0 25px 25px 25px;
    padding: 15px;
    z-index: 1;
}

.small_banner h1 {
    font-family: "IranYekanBlack";
    color: #004ece;
    margin: 3px 10px;
}

.small_banner h6 {
    font-family: "IranYekanBlack";
    color: #0090fe;
    margin: 3px 10px;
}

.small_banner p {
    color: #6e6e6e;
    font-size: 12px;
    font-weight: lighter;
    margin: 3px 10px;
}

.small_banner span {
    color: #6e6e6e;
    font-size: 15px;
    font-weight: bold;
}

.banner_button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 20px;
}

.banner_button img {
    width: 100%;
}

.bubble-1 {
    position: absolute;
    background: #0054dc;
    border-radius: 100%;
    width: 500px;
    height: 500px;
    top: 10%;
    left: -20%;
    z-index: -1;

}

.bubble-2 {
    position: absolute;
    background: #0054dc;
    border-radius: 100%;
    width: 400px;
    height: 400px;
    top: 25%;
    right: -10%;
    z-index: -1;

}

@media screen and (max-width: 768px) {
    .banners {
        padding: 15px 15px;
    }

    .banner img {
        border-radius: 25px;
    }

    .small_banner {
        width: 95%;
        border-radius: 25px 0 25px 25px;
        padding: 5px;
    }

    .banner_button {
        gap: 10px;
    }

    .banner_button img {
        border-radius: 15px;
    }


    .small_banner h1 {
        font-weight: bold;
        font-size: 42px;
        padding-right: 5px;
        margin-bottom: 5px;

    }

    .small_banner h6 {
        font-size: 14px;
        padding-right: 5px;
        margin-bottom: 5px;
    }

    .small_banner p {
        font-size: 15.3px;
        padding-right: 5px;
        padding-bottom: 0;
        margin-bottom: 0;
        font-weight: lighter;
    }

    .small_banner span {
        font-size: 15.3px;
    }

    .bubble-1 {
        width: 400px;
        height: 400px;
        top: 6%;
        left: -65%;
    }

    .bubble-2 {
        width: 300px;
        height: 300px;
        top: 33%;
        right: -35%;
    }
}

/* ================================================== 24. offers : */
.offers {
    background-image: url("/static/Img/pattern_1.png"), linear-gradient(180deg, #ff6000, #ff6000);
    background-repeat: repeat;
    background-size: 750px 750px;

    position: relative;
    direction: rtl;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 25px 0 20px 0;
    overflow: hidden;
    width: 100%;
    z-index: 1;
}

.offers::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background: #FF6000;
    background: linear-gradient(45deg,
    rgba(255, 96, 0, 1) 0%,
    rgba(255, 96, 0, 0.9) 20%,
    rgba(255, 96, 0, 0.9) 80%,
    rgba(255, 96, 0, 1) 100%);
    z-index: 1;
}

.offers > * {
    position: relative;
    z-index: 2;
}

.offers h1 {
    font-family: 'IranYekanMedium';
    font-size: 35px;
    color: white;
    text-align: center;
}

.offers h1 span {
    display: inline-block;
    width: max-content;
    height: max-content;
    border-radius: 10%;
    padding: 0 6px;
    margin: 0 12px;
    margin-bottom: 10px;
    background-color: white;
    color: rgba(255, 96, 0, 1);
    box-shadow: 5px 5px 10px rgba(97, 97, 97, 0.5);
}

.offer {
    background-color: white;
    border-radius: 15px;
    padding: 8px 8px 5px 8px;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    font-size: 10px;
    width: min-content;
}

.offer img {
    width: 140px;
    border-radius: 15px;
}

.offer__detail {
    position: relative;
    margin: 5px 5px 5px 0;
}

.offer__detail::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 120%;
    top: 50%;
    right: -17%;
    border-radius: 5px;
    background-color: #0090fe;
    margin: 5px 15px;
    transform: translateY(-70%);
}

.offer__detail h6,
.offer__detail h5,
.offer__detail h4,
.offer__detail h3,
.offer__detail h2,
.offer__detail h1,
.offer__detail p,
.offer__detail a {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px !important;
    margin-bottom: 0;
    padding-bottom: 0;
}

.offer__price {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
}

.offer__price * {
    margin: 0;
    padding: 0;
    font-family: 'IRANSansWeb';

}

.offer__price p {
    font-size: 15px;
    color: #717171;
    direction: ltr;
    margin-bottom: 2px;
    text-decoration: line-through;
    text-decoration-color: orange;
}

.offer__price span {
    display: inline-block;
    color: white;
    background-color: rgba(255, 96, 0, 1);
    border-radius: 3px;
    padding: 0 2px;
    margin: 0 2px 0 0;
}

.offer__price h6 {
    font-family: 'IranYekanMedium';
    font-size: 15px;
}

.offer_actions {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 4px;

    width: 105%;
}

.offer_actions a:nth-child(1) {
    margin-top: 5px;
    font-family: 'IranYekanLight';
    font-size: 12px;
    direction: ltr;

    background: linear-gradient(90deg, rgba(255, 67, 2, 0.99), rgb(255, 160, 103));
    border-radius: 15px;
    padding: 0 4px 2px 4px;
    color: white !important;

}

.offer_actions * {
    padding: 0;
    margin: 0;
}

.offer_actions a {
    font-size: 12px;
    direction: ltr;

    width: 100%;
    background: linear-gradient(90deg, #7ac5fe, #7ac5fe);
    border-radius: 15px;
    padding: 0 4px 2px 4px;
    color: #003a66 !important;
}

.offer_actions p {
    color: #717171;
    font-size: 15px;
}

.offers .carousel {
    width: 90%;
    overflow: hidden;
}

.offers .carousel-cell {
    margin: 5px;
}

.offers .flickity-button {
    display: none;
}

.offers .carousel-cell.is-selected {
    transform: scale(1);
}

.offers .flickity-page-dots {
    display: none;
}

.offers .carousel-cell {
    transition: transform 0.3s ease;
}

@media screen and (max-width: 768px) {
    .offers {
        padding-top: 20px;
    }

    .offers h1 {
        font-size: 20px;
    }

    .offers h1 span {
        height: 25px;
    }

    .offers .carousel {
        width: 100%;
    }

    .offers .flickity-viewport {
        overflow: visible;
    }

    .offer__detail h6,
    .offer__detail h5,
    .offer__detail h4,
    .offer__detail h3,
    .offer__detail h2,
    .offer__detail h1,
    .offer__detail p,
    .offer__detail a {
        font-size: 10px !important;
    }

    .offer__detail img {
        width: 15px !important;
        height: 15px !important;
    }

    .offer__detail::before {
        width: 4px;
        border-radius: 5px;
    }

    .offer__detail h6 {
        font-size: 12px;
    }

    .offer__detail p {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .offer__price p {
        font-size: 8px;
    }

    .offer__price h6 {
        font-size: 15px;
    }

    .offer_actions a {
        font-size: 12px;
        padding: 1px 0;
    }

}


/* ================================================== -1. ENGLISHMODE : */
body.en .section1 {
    direction: ltr;
    text-align: justify;
}

body.fa .section1 {
    direction: rtl;
    text-align: justify;
}

body.en .ccard__caption {
    direction: ltr;
    text-align: justify;
}

body.fa .ccard__caption {
    direction: rtl;
    text-align: justify;
}

body.en .Scard__caption {
    direction: ltr;
    text-align: justify;
}

body.fa .Scard__caption {
    direction: rtl;
    text-align: justify;
}

body.en .scard {
    direction: ltr;
    text-align: justify;
}

body.fa .scard {
    direction: rtl;
    text-align: justify;
}

body.en .scard__img img {
    margin-left: 10px;
    margin-right: -20px;
}

body.fa .scard__img img {
    margin-left: -20px;
    margin-right: 10px;
}

body.en .header {
    direction: rtl;
    text-align: justify;
}

body.fa .header {
    direction: ltr;
    text-align: justify;
}

body.en .menu--closebtn img {
    float: right;
    transform: rotate(180deg);
}

body.fa .menu--closebtn img {
    float: left;
    transform: rotate(360deg);
}

body.en .section0 {
    left: 0;
}

body.fa .section0 {
    right: 0;
}

body.en .menu__cartdeatil {
    direction: rtl;
    justify-content: left;
}

body.fa .menu__cartdeatil {
    direction: ltr;
    justify-content: right;
}

body.en .serachbar form {
    direction: ltr;
    justify-content: right;
}

body.fa .serachbar form {
    direction: rtl;
    justify-content: left;
}

body.en .blog__detail {
    direction: ltr;
    justify-content: right;
}

body.fa .blog__detail {
    direction: rtl;
    justify-content: left;
}

body.en .hashtag p {
    direction: ltr;
    justify-content: right;
}

body.fa .hashtag p {
    direction: rtl;
    justify-content: left;
}

body.en .blog__searchimg p {
    left: 3%;
    right: auto;
}

body.fa .blog__searchimg p {
    right: 3%;
    left: auto;
}

body.en .blogcontent {
    direction: ltr;
    justify-content: right;
}

body.fa .blogcontent {
    direction: rtl;
    justify-content: left;
}

body.en .otherqustions h2 {
    text-align: left;
}

body.fa .otherqustions h2 {
    text-align: right;
}

body.en .costomecollapse a {
    text-align: left;
}

body.fa .costomecollapse a {
    text-align: right;
}

body.en .costomecollapse span {
    float: right;
}

body.fa .costomecollapse span {
    float: right;
}

body.en .card {
    text-align: left;
}

body.fa .card {
    text-align: right;
}

body.en .comments h2 {
    text-align: left;
}

body.fa .comments h2 {
    text-align: right;
}

body.en .comment {
    direction: ltr;
}

body.fa .comment {
    direction: rtl;
}

body.en .commentform h2 {
    text-align: left;
}

body.fa .commentform h2 {
    text-align: right;
}

body.en #form {
    text-align: left;
}

body.fa #form {
    text-align: right;
}

body.en #cate_id {
    text-align: left;
    background-position: right 10px center;
}

body.fa #cate_id {
    text-align: right;
    background-position: left 10px center;
}

body.en .detail {
    direction: ltr;
}

body.fa .detail {
    direction: rtl;
}

body.en .detail span:nth-child(2n) {
    text-align: right;
}

body.en .detail span:nth-child(2n + 1) {
    text-align: left;
}

body.fa .detail span:nth-child(2n) {
    text-align: left;
}

body.fa .detail span:nth-child(2n + 1) {
    text-align: right;
}

body.en .spcard {
    text-align: left;
}

body.fa .spcard {
    text-align: right;
}

body.en .contactus {
    direction: ltr;
}

body.fa .contactus {
    direction: rtl;
}

body.en .contactus__img {
    left: 0;
    right: auto;
}

body.fa .contactus__img {
    right: 0;
    left: auto;
}

body.en .flash {
    right: -8%;
    left: auto;
}

body.fa .flash {
    left: -8%;
    right: auto;
}

body.en .namad__text {
    direction: ltr;
}

body.fa .namad__text {
    direction: rtl;
}

body.en .dropdown button {
    text-align: left;
    background-position: right 10px center;
}

body.fa .dropdown button {
    text-align: right;
    background-position: left 10px center;
}

body.en .service-description {
    text-align: left;
    direction: ltr;
}

body.fa .service-description {
    text-align: right;
    direction: rtl;
}

body.en .service-number {
    text-align: left;
    direction: ltr;
}

body.fa .service-number {
    text-align: right;
    direction: rtl;
}

body.en .price-detail {
    text-align: left;
    direction: ltr;
}

body.fa .price-detail {
    text-align: right;
    direction: rtl;
}

body.en .service-price {
    text-align: left;
    direction: ltr;
}

body.fa .service-price {
    text-align: right;
    direction: rtl;
}

body.en .modal-header {
    text-align: left;
    direction: ltr;
}

body.fa .modal-header {
    text-align: right;
    direction: rtl;
}

body.en .commentproduct {
    text-align: left;
    direction: ltr;
}

body.fa .commentproduct {
    text-align: right;
    direction: rtl;
}

body.en .modal-footer {
    text-align: left;
    direction: ltr;
}

body.fa .modal-footer {
    text-align: right;
    direction: rtl;
}

body.en .step {
    text-align: left;
    direction: ltr;
}

body.fa .step {
    text-align: right;
    direction: rtl;
}

body.en .step img {
    transform: translateY(-200%) rotate(180deg);
}

body.fa .step img {
    transform: translateY(-200%) rotate(0deg);
}

body.en .shop_table {
    text-align: left;
    direction: ltr;
}

body.fa .shop_table {
    text-align: right;
    direction: rtl;
}

body.en .product-name {
    text-align: left;
    direction: ltr;
}

body.fa .product-name {
    text-align: right;
    direction: rtl;
}

body.en .shop_table th:nth-child(1), td:first-child, th:first-child {
    text-align: left;
    direction: ltr;
}

body.fa .shop_table td:last-child, th:last-child {
    text-align: right;
    direction: rtl;
}

body.en textarea {
    text-align: left;
    direction: ltr;
}

body.fa textarea {
    text-align: right;
    direction: rtl;
}

body.en .product {
    text-align: left;
    direction: ltr;
}

body.fa .product {
    text-align: right;
    direction: rtl;
}

body.en .dropdown button {
    text-align: left;
    direction: ltr;
}

body.fa .dropdown button {
    text-align: right;
    direction: rtl;
}

body.en .dropdown ul {
    text-align: left;
    direction: ltr;
}

body.fa .dropdown ul {
    text-align: right;
    direction: rtl;
}

body.en .bi-chevron-right {
    transform: rotate(180deg);
}

body.fa .bi-chevron-right {
    transform: rotate(0deg);
}

body.en .status {
    text-align: left;
    direction: ltr;
}

body.fa .status {
    text-align: right;
    direction: rtl;
}

body.en .ordertitle {
    text-align: left;
    direction: ltr;
    justify-content: left;
}

body.fa .ordertitle {
    text-align: right;
    direction: rtl;
    justify-content: right;
}

body.en .ordercard {
    direction: ltr;
}

body.fa .ordercard {
    direction: rtl;
}

body.en .statustransaction {
    text-align: left;
    direction: ltr;
}

body.fa .statustransaction {
    text-align: right;
    direction: rtl;
}

body.en .banners {
    text-align: left;
    direction: ltr;
}

body.fa .banners {
    text-align: right;
    direction: rtl;
}


body.en .small_banner {
    text-align: left;
    direction: ltr;
}

body.fa .small_banner {
    text-align: right;
    direction: rtl;
}

body.en .offers h1 {
    text-align: center;
    direction: ltr;
}

body.fa .offers h1 {
    text-align: center;
    direction: rtl;
}

body.en .offer {
    text-align: center;
    direction: ltr;
}

body.fa .offer {
    text-align: center;
    direction: rtl;
}

body.en .offer {
    text-align: center;
    direction: ltr;
}

body.fa .offer {
    text-align: center;
    direction: rtl;
}

body.en .offer_actions a {
    direction: rtl;
}

body.fa .offer_actions a {
    direction: ltr;
}

body.en .offer__detail::before {
    left: 0;
}

body.fa .offer__detail::before {
    left: 0;
}

body.en .offer__detail {
    direction: ltr;
    margin: 5px 0 5px 15px;
}

body.fa .offer__detail {
    direction: rtl;
    margin: 5px 15px 5px 0;
}

body.en .offer__detail h6, body.en .offer__detail p {
    text-align: left;

}

body.fa .offer__detail h6, body.fa .offer__detail p {
    text-align: right;
}


/* ================================================== -2. NIGHTMODE : */
body.darkTheme .section1,
body.darkTheme .card,
body.darkTheme .spbtn,
body.darkTheme .subheader,
body.darkTheme .subheader__detail a,
body.darkTheme .transactioncard,
body.darkTheme .transactiontable span,
body.darkTheme .status,
body.darkTheme .status a,
body.darkTheme .orderdetail,
body.darkTheme .orderdetail h1,
body.darkTheme .service,
body.darkTheme .statustransaction,
body.darkTheme .statustransaction a,
body.darkTheme .service span,
body.darkTheme .service h2,
body.darkTheme select,
body.darkTheme .addproduct,
body.darkTheme .question,
body.darkTheme .question a,
body.darkTheme .product-total,
body.darkTheme .comment,
body.darkTheme .commentform,
body.darkTheme .commentform form,
body.darkTheme .commentfixing p,
body.darkTheme .modal-header,
body.darkTheme .modal-body,
body.darkTheme .modal-footer,
body.darkTheme .error,
body.darkTheme .head {
    background-color: #182842;
    color: white;
}

body.darkTheme .menu--mounth,
body.darkTheme .menu--day,
body.darkTheme .menu--ch,
body.darkTheme .menu--detail,
body.darkTheme .spbal1,
body.darkTheme .menu--cart,
body.darkTheme .blog,
body.darkTheme .serachbar,
body.darkTheme form,
body.darkTheme input,
body.darkTheme button,
body.darkTheme textarea,
body.darkTheme .blog__card,
body.darkTheme .blog__detail p,
body.darkTheme .blog__searchcard,
body.darkTheme .blog__searchcard p,
body.darkTheme .blog__searchcard span,
body.darkTheme .blog__detail span,
body.darkTheme .blog__detail h1,
body.darkTheme .blog__searchimg p,
body.darkTheme .blogdetail,
body.darkTheme select,
body.darkTheme .service-description,
body.darkTheme th,
body.darkTheme td,
body.darkTheme #replay,
body.darkTheme .product-name,
body.darkTheme .order-total th,
body.darkTheme .order-total td,
body.darkTheme .product-total,
body.darkTheme .cancelbuy,
body.darkTheme .cancelbuy svg {
    background-color: #12213f;
    color: #d1ecff;
}

body.darkTheme .section0,
body.darkTheme .scard,
body.darkTheme .scard h5,
body.darkTheme .blog__searchimg span:nth-child(3),
body.darkTheme .blog__img p,
body.darkTheme .hashtag p,
body.darkTheme .hashtag span,
body.darkTheme .commentnumbr p,
body.darkTheme .blog__searchimg p,
body.darkTheme .blog__searchimg span,
body.darkTheme .nonepadding span:first-child {
    background-color: #2f4e80;
    color: #d1ecff;
}

body.darkTheme .dot {
    background-color: white;
    opacity: 0.5;
}

body.darkTheme .dot.is-selected {
    background-color: #ff7900;
}

body.darkTheme .menu__cartdeatil,
body.darkTheme .menu__cartdeatil a {
    background-color: #182c54;
    color: #d1ecff;
}

body.darkTheme .chooseservice span {
    background-color: rgb(243, 243, 243);
    color: gray;
}

body.darkTheme .chooseservice.activestep span {
    background-color: #eafdfd;
    border: #e0ffff solid 2px;
    color: #36c7c7;
}

body.darkTheme .blog__img span,
body.darkTheme .blog__img svg {
    color: #d1ecff;
}

body.darkTheme .blog__searchcard,
body.darkTheme .serachbar form,
body.darkTheme input,
body.darkTheme button,
body.darkTheme .blog__card,
body.darkTheme .service,
body.darkTheme .detail,
body.darkTheme .comment,
body.darkTheme .commentform,
body.darkTheme .question,
body.darkTheme .card,
body.darkTheme .service-description {
    border: #d1ecff solid 2px;
}

body.darkTheme .service,
body.darkTheme .moshavere__card,
body.darkTheme .ccard__detail {
    box-shadow: none;
}

body.darkTheme .card-body,
body.darkTheme .serachbar input,
body.darkTheme .detail {
    border: none;
}

body.darkTheme .detail,
body.darkTheme .section1 {
    border-bottom: #d1ecff solid 2px;
}

body.darkTheme .detail.bordernone {
    border: none;
}

body.darkTheme .menu {
    background-image: url("../Img/bg-menu_night.png");
}

body.darkTheme .closeimg {
    content: url("../Img/close-menu_night.png");
}

body.darkTheme .small_banner h1,
body.darkTheme .small_banner h6,
body.darkTheme .cardash .card__title {
    color: white;
}

body.darkTheme .small_banner p,
body.darkTheme .small_banner span {
    color: #3a6d98;
}