@import url(./assets/fonts/Pro/YekanBakhFamily/Webfonts/fontiran.css);
@import url(./assets/fonts/Rokh_Economic/WebFonts/fontiran.css);
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    direction: rtl;
    font-family: Yekan Bakh !important;
    background-color: #f8f9fa !important;
    min-height: 100vh;
}

body.modal-open {
    padding-right: 17px !important;
    overflow-y: hidden !important;
}

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

a:hover {
    color: inherit;
}

input {
    font-family: Yekan Bakh;
    border: none;
    outline: none;
}

button {
    font-family: Rokh;
    border: none;
    outline: none;
    cursor: pointer;
    transition: all 0.3s;
}

button:hover {
    opacity: 0.78;
}

li a {
    width: 100% !important;
}

.d-flex {
    display: flex;
}

.rokh {
    font-family: Rokh !important;
}

:root {
    --blue-1: #225591;
    --blue-2: #3686e3;
    --green-1: #f79c1e;
}


/* Header */

header,
#headerDiv {
    z-index: 99;
    background-color: #fff;
}

header .line {
    background-color: var(--blue-1);
    width: 100%;
    padding: 14px;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 36px;
    text-align: center;
    color: #ffffff;
    position: relative;
    transition: 0.3s;
    overflow: hidden;
}

header .mob {
    display: none;
}

header .line span {
    height: 26px;
    padding: 0 6px;
    background: #ffffff;
    border-radius: 13px;
    color: #11375c;
}

header .line .close {
    position: absolute;
    right: 20px;
    top: 12px;
    font-size: 24px;
    cursor: pointer;
}

header .header-row-1 {
    width: 100%;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
}

header .header-row-1 .right {
    display: flex;
    align-items: center;
}

header .header-row-1 .right {
    width: 140px;
    height: 38px;
    width: 60%;
}

header .header-row-1 .right .search-div {
    width: 598px;
    max-width: 598px;
    height: 48px;
    position: relative;
    margin-right: 32px;
}

header .header-row-1 .right .search-div input {
    background: #f3f3f3;
    border: 1px solid #cfd8dc;
    border-radius: 6px;
    width: 100%;
    height: 100%;
    padding-right: 48px;
}

header .header-row-1 .right .search-div input ::placeholder {
    font-weight: 400;
    font-size: 14px;
    text-align: right;
    color: #cfd8dc;
}

header .header-row-1 .right .search-div svg {
    position: absolute;
    right: 16px;
    top: 12px;
}

header .header-row-1 .left {
    display: flex;
    align-items: flex-end;
}

header .header-row-1 .left .btns {
    display: flex;
    width: 240px;
    height: 56px;
    border-radius: 8px !important;
    overflow: hidden;
}

header .header-row-1 .left .btns button {
    width: 120px;
    color: #212529;
    font-weight: 400;
    font-size: 17px;
    line-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    background-color: var(--blue-2);
    color: #f8f9fa;
}

header .header-row-1 .left .btns .left-svg {
    margin-bottom: 4px;
}

header .header-row-1 .left .btns svg {
    margin: 0 3px;
}

header .header-row-1 .left .btns .active {
    background: var(--green-1);
}

header .header-row-2 {
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    display: flex;
    /* align-items: flex-end; */
    justify-content: space-between;
    position: relative;
    align-items: center;
}

header nav ul {
    display: flex;
    list-style: none;
    align-items: flex-end;
    margin-bottom: 0;
}

header nav ul li {
    display: flex;
    align-items: center;
    margin-left: 18px;
    cursor: pointer;
    padding-top: 8px;
    padding-bottom: 16px;
}

header nav ul li span {
    margin-right: 8px;
    margin-left: 8px;
}

.menu {
    background-color: #ffff;
    display: none;
    /* display: flex; */
    position: absolute;
    width: 100%;
    max-width: 1300px;
    height: calc(100vh);
    z-index: 9999999;
    top: 50px;
    overflow: auto;
    border-top: 1px solid #adb5bd;
}

.menu .right {
    width: 319px;
    min-width: 319px;
    background: #f8f9fa;
    padding: 20px;
    padding-left: 0;
    overflow: auto;
    direction: ltr;
}

.menu .right .head {
    direction: rtl;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
    text-align: right;
    color: #868e96;
    border-bottom: 2px solid #e2e8eb;
    padding-bottom: 10px;
    margin-left: 20px;
}

.menu {
    cursor: default;
}

.menu .right ul {
    direction: rtl;
    width: 100%;
    padding-left: 0;
    flex-direction: column;
}

.menu .right ul li {
    display: flex;
    align-items: center;
    padding: 8px;
    position: relative;
    width: 100%;
    margin: 6px 0;
    padding-left: 0;
    margin-left: 0;
}

.menu .right ul li:first-child {
    margin-top: 24px;
}

.menu .right ul li span {
    margin-right: 14px;
}

.menu .right ul li .li-arr {
    position: absolute;
    left: 20px;
    display: none;
}

.menu .right ul li:hover+.left-menu {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(219px, 4fr)) !important;
}

.menu .right ul li:hover .li-arr {
    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    position: absolute;
    justify-content: flex-start;
    align-items: flex-start;
    right: 319px;
    top: 0;
    width: calc(100% - 319px);
    height: 70vh;
    overflow: auto;
}

.menu .right ul li:hover {
    background: linear-gradient(90deg, #f8f9fa 10px, #e2e8eb 100%);
    border-radius: 8px;
}

.menu .left-menu {
    padding: 30px 20px;
    /* display: flex; */
    display: none;
    flex-direction: column;
    height: 110%;
    flex-wrap: wrap;
    position: absolute;
    justify-content: flex-start;
    align-items: flex-start;
    right: 319px;
    top: 0;
    width: calc(100% - 319px);
}

.menu .left-menu:hover {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(219px, 4fr)) !important;
}

.menu .left-menu .left-list {
    width: 219px;
    margin: 6px;
    margin-bottom: 20px;
}

@media (max-width: 1065px) {
    .menu .right {
        width: 289px;
        min-width: 289px;
    }
    .menu .left-menu .left-list {
        width: 199px;
    }
}

.menu .left-menu .left-list .head {
    text-decoration: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #bfbfca;
    padding-bottom: 8px;
    cursor: pointer;
}

.menu .left-menu .left-list ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.menu .left-menu .left-list ul li {
    margin: 0;
    padding: 0;
    margin: 4px 0;
}

.menu .left-menu .left-list ul li:first-child {
    margin-top: 14px;
}

.menu .left-menu .left-list ul li a {
    text-decoration: none;
    font-weight: 400;
    font-size: 15px;
    color: #6c757d;
}

.mob-menu-res {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999999;
    background-color: #fff;
    width: 0;
    transition: all 0.3s;
    overflow: hidden;
    padding: 20px 0;
    padding-top: 40px;
}

.mob-menu-res .box {
    overflow: auto;
    height: 100vh !important;
}

.closee {
    position: absolute;
    left: 20px;
    top: 20px;
}

@media (max-width: 992px) {
    .d-show {
        height: 100vh;
        overflow: auto !important;
        display: flex !important;
        flex-direction: column;
        width: 300px;
    }
}

header .header-row-2 .left {
    display: flex;
    align-items: flex-end;
    align-items: center;
}

header .header-row-2 .left .profile-btn {
    width: 200px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border: 1px solid #adb5bd;
    border-radius: 8px;
    padding: 8px 16px;
    margin-left: 16px;
}

header .header-row-2 .left .profile-btn svg {
    /* margin: 0 8px; */
    margin-left: 8px;
}

header .header-row-2 .left .profile-btn .name {
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: auto
}

header .header-row-2 .left .profile-btn img {
    width: 40px;
    border-radius: 50%;
    margin-left: 8px;
}

.pos-rel {
    position: relative;
}

.menu-btn,
.left-mobile {
    display: none;
    align-items: center;
}

.left-mobile .buy {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 19px;
    text-align: right;
    color: #f79c1e;
    margin-right: 8px;
}

.left-mobile .sell {
    margin-left: 8px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 19px;
    text-align: right;
    color: #adb5bd;
}

.left-mobile input[type="checkbox"] {
    background-color: #fff;
    -webkit-appearance: none;
    border-radius: 30px;
    outline: none;
    position: relative;
    font-weight: bolder;
    font-size: 22px;
    width: 44px;
    height: 30px;
    background: #f79c1e;
    border-radius: 30px;
}

.left-mobile input[type="checkbox"]:before {
    content: url("./assets/images/card-pos.png");
    position: absolute;
    width: 24px;
    height: 24px;
    line-height: 31px;
    text-align: center;
    border-radius: 50%;
    background-color: #fff;
    left: 16px;
    top: 2.5px;
    transition-duration: 0.3s;
}

.left-mobile input:checked[type="checkbox"] {
    background-color: #f79c1e;
}

.left-mobile input:checked[type="checkbox"]:before {
    content: url("./assets/images/card-pos.png");
    background-color: #ffff;
    left: 4px;
    transition-duration: 0.3s;
    color: #555;
}

@media (max-width: 1320px) {
    header .header-row-1 {
        padding: 16px 20px;
    }
    header .header-row-2 {
        padding: 0px 20px;
    }
}

@media (max-width: 992px) {
    header .line {
        display: none;
    }
    .d-none-mobe {
        display: none;
    }
    header .header-row-1 .right {
        width: unset;
    }
    header .header-row-1 .right .search-div {
        display: none;
    }
    .menu-btn,
    header .mob {
        display: block;
    }
    .left-mobile {
        display: flex;
    }
    header .header-row-1 .left {
        display: none;
    }
    header nav {
        display: none;
    }
    header .header-row-2 .left .profile-btn {
        padding: 0;
        border: none;
        margin-left: 0;
    }
    header,
    .profile-btn {
        background-color: #fff !important;
        padding: 0px !important;
    }
    header .header-row-1 {
        border-bottom: 1px solid #ddd;
    }
}


/* End Header */


/* Bg Blue */

.bg-blue {
    height: 748px;
    overflow: hidden !important;
    margin-bottom: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background: url("./assets/images/bg-blue.png");
    background-repeat: no-repeat;
    background-size: 100vw;
    background-position: 0 100%; */
    border-radius: 0 0 50% 50%;
    z-index: 5;
    clip-path: circle(69.7% at 50% 5%);
    overflow: hidden;
}

.bg-blue .bg-b {
    position: absolute;
    bottom: -32.7px;
    width: 140vw;
    right: 50%;
    transform: translateX(50%);
    z-index: 3;
}


/* .bg-blue::after{
    content: '';
    background: url("./assets/images/bg-over.png");
    bottom:-10px;
    left: 0;
    position: absolute;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 115% 100%;
    padding-top: 31%;
    z-index: 999999;
} */


/* .bg-blue .bg {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100vw !important;
} */

.bg-blue h2 {
    z-index: 22;
    font-family: Rokh;
    font-style: normal;
    font-weight: 700;
    font-size: 58px;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    margin-top: 72px;
}

.bg-blue h3 {
    z-index: 22;
    font-family: Rokh;
    font-weight: 500;
    font-size: 32px;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    margin-top: 25px;
}

.bg-blue h3 span {
    font-weight: 600;
}

.bg-blue .search-box {
    position: relative;
    width: 748px;
    z-index: 22;
    height: 68px;
    margin-top: 46px;
}

.bg-blue .search-box input {
    background: #ffffff;
    border: 1px solid #cfd8dc;
    border-radius: 12px;
    width: 100%;
    height: 100%;
    padding-right: 105px;
    font-family: "Rokh" !important;
    font-size: 20px;
}

.bg-blue .search-box input ::placeholder {
    font-weight: 500;
    line-height: 26px;
    text-align: center;
    color: #343a40;
}

.bg-blue .search-box .location-icon {
    position: absolute;
    top: 18px;
    right: 16px;
    z-index: 1;
}

.bg-blue .search-box select {
    position: absolute;
    top: 22px;
    right: 6px;
    width: 85px;
    border: none;
    outline: none;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    color: #343a40;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("./assets/images/arr.png");
    background-repeat: no-repeat;
    background-position-x: 0px;
    background-position-y: 0px;
    background-color: whitesmoke;
}

.bg-blue .search-box .space {
    margin: 0 18px;
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
    color: #343a40;
    position: absolute;
    top: 18px;
    right: 80px;
}

.bg-blue .circle {
    width: 1386.81px;
    height: 1386.81px;
    position: absolute;
    display: grid;
    grid-template-columns: 30px;
    grid-template-rows: 30px;
    place-content: center;
    border-radius: 50%;
    bottom: -1200px;
    z-index: 21;
    background-color: #f79c1e;
    transform: translateY(50px);
}

.bg-blue .circle .circle-2 {
    width: 1386.81px;
    height: 1386.81px;
    position: absolute;
    border-radius: 50%;
    bottom: 0px;
    z-index: 100;
    background-color: #f9ae4c;
    transform: translateY(50px);
}

.bg-blue .circle .circle-3 {
    width: 1386.81px;
    height: 1386.81px;
    position: absolute;
    border-radius: 50%;
    bottom: -50px;
    z-index: 120;
    background: #fbc078;
    transform: translateY(50px);
}

.bg-blue .circle .item {
    grid-area: 1/1;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    animation: spin 30s var(--d, 0s) linear infinite;
    /* duration = 12s, numbor of item = 6 so a delay of 12/6 = 2s */
    transform: translate(858px);
    cursor: pointer;
    z-index: 4;
}

.bg-blue .circle .item .item-div {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfd8dc;
    width: 118px;
    height: 108px;
    border-radius: 16px;
    background: #ffffff;
    transform: rotate(90deg);
    transition: 0.3s;
}

@keyframes spin {
    /* 100% {
        transform: rotate(1turn) translate(798px) rotate(-1turn);
    } */
    0% {
        transform: rotate(-1turn) translate(833px);
    }
    100% {
        transform: rotate(0turn) translate(833px);
    }
}

.bg-blue .circle:hover .item {
    animation-play-state: paused;
}

.bg-blue .circle .item:hover .item-div {
    background: #f79c1e;
    border: #f79c1e;
}

.bg-blue .circle .item:hover .item-div svg path {
    fill: #fff;
}


/* End Bg Blue */


/* How Work  */

.how-work {
    margin-top: 150px;
}

.index-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
}

.index-title h3 {
    margin: 0 50px;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 51px;
    text-align: center;
    color: #6c6b8d;
    z-index: 2;
}

.index-title h4 {
    white-space: nowrap;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 96px;
    line-height: 123px;
    direction: ltr;
    text-align: center;
    text-transform: capitalize;
    background-clip: text;
    text-fill-color: transparent;
    position: absolute;
    right: 50%;
    transform: translate(50%);
    bottom: -10px;
    background: -webkit-linear-gradient(rgba(54, 134, 227, 0.1), rgba(255, 255, 255, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
}

.how-work-cards {
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
}

.how-work-cards .owl-stage-outer {
    padding-top: 30px;
    padding-bottom: 30px;
}

.how-work-cards .cardd {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-direction: column;
}

.how-work-cards .cardd .card-blue {
    border-radius: 16px;
    height: 88px;
    width: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.how-work-cards .cardd .titr {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 31px;
    text-align: center;
    color: #212529;
    margin-top: 24px;
}

.how-work-cards .cardd p {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    color: #495057;
    margin-top: 10px;
    max-width: 420px;
    margin: 10px;
}

.how-work-cards .right-svg {
    position: absolute;
    right: 290px;
    top: 0;
}

.how-work-cards .left-svg {
    position: absolute;
    left: 300px;
    top: 0;
}

.owl-arr {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.owl-arr2 {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
}


/* End How Work  */


/* Categorys */

.categorys {
    margin-top: 130px;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
}

.under-title {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 41px;
    text-align: center;
    color: #123154;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.categorys .categorys-cards {
    padding: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-gap: 40px;
    align-items: center;
}

.categorys .categorys-cards .cat-card {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.categorys .categorys-cards .cat-card .img-div {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    /*background: linear-gradient(*/
    /*    180deg,*/
    /*    rgba(186, 206, 235, 0) 13.71%,*/
    /*    #baceeb 115.86%*/
    /*);*/
}

.categorys .categorys-cards .cat-card .orange {
    background: linear-gradient(180deg, rgba(244, 225, 199, 0) 0%, #f4e1c7 109.14%);
}

.categorys .categorys-cards .cat-card .title {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 31px;
    text-align: center;
    margin-top: 20px;
    color: #212529;
}

.categorys .categorys-cards .cat-card img {
    width: 140px;
}

.categorys .categorys-cards .cat-card .count {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 19px;
    /* identical to box height */
    text-align: center;
    /* Colors/Grayscale Colors/4 */
    color: #6c757d;
}


/* End Categorys */


/* Baner */

.baners {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 64px 0;
    max-width: 1300px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.baner img {
    border-radius: 16px;
}

.baners .baner {
    margin: 20px;
}


/* End Baner */


/* Materials */

.materials {
    margin-top: 20px;
    width: calc(100% - 60px);
    margin-right: auto;
    margin-left: auto;
    max-width: 1300px;
    height: 502px;
    left: 70px;
    top: 2831px;
    background: #ffffff;
    border: 1px solid #cfd8dc;
    border-radius: 24px;
    display: flex;
}

.materials .right {
    width: 330px;
    min-width: 330px;
    padding: 24px;
    border: 1px solid #cfd8dc;
    border-radius: 0 24px 24px 0;
    border-top: none;
    border-right: none;
}

.materials .right .head {
    border-bottom: 1px solid #cfd8dc;
    padding-bottom: 30px;
    display: flex;
    align-items: center;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 31px;
    text-align: right;
    color: #212529;
    margin-bottom: 25px;
}

.materials .right .head svg {
    margin-left: 16px;
}

.materials .right ul {
    list-style: none;
}

.materials .right li {
    transition: 0.3s all;
    display: flex;
    align-items: center;
    margin-top: 16px;
    cursor: pointer;
}

.materials .right li:hover {
    color: #15155b;
}

.materials .right .svg-none {
    display: none;
}

.materials .right .active .svg-none {
    display: block !important;
}

.materials .center {
    min-width: 310px;
    width: 310px;
    height: 100%;
}


/* Carousel */


/* .carousel {
    position: relative;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
    direction: ltr;
}

.carousel-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.carousel-open:checked + .carousel-item {
    position: static;
    opacity: 100;
}

.carousel-item {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
}

.carousel-item img {
    display: block;
    height: auto;
    max-width: 100%;
    max-height: 100%;
} */

.carousel-control.prev {
    left: 2%;
}

.carousel-control.next {
    right: 2%;
}

.carousel-control:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #aaaaaa;
}

#carousel-1:checked~.control-1,
#carousel-2:checked~.control-2,
#carousel-3:checked~.control-3 {
    display: block;
}

.carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

.carousel-indicators li {
    display: inline-block;
    margin: 0 5px;
}

.carousel-bullet {
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 35px;
}

.carousel-bullet:hover {
    color: #aaaaaa;
}

#carousel-1:checked~.control-1~.carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked~.control-2~.carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked~.control-3~.carousel-indicators li:nth-child(3) .carousel-bullet {
    color: #428bca;
}


/* Carousel */

.materials .left {
    align-content: flex-start;
    width: 660px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-radius: 24px 0 0 24px;
    overflow: hidden;
}

.materials .left .card {
    width: 33.31%;
    background: #fff;
    height: 167px;
    border: 1px solid #e2e8eb;
    transition: all 0.3;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    cursor: pointer;
}

.materials .left .card img {
    width: 84px;
}

.materials .left .card .titr {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #343a40;
    margin-top: 22px;
}

.materials .left .card:hover {
    box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
}


/* End Materials */


/* Sell Without Intermediaries */

.sell-without {
    margin: 64px 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    max-width: 1300px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.sell-without .right h6 {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 51px;
    text-align: right;
    color: #343a40;
}

.sell-without .right h6 span {
    color: #f79c1e;
}

.sell-without .right p {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 34px;
    text-align: right;
    color: #343a40;
    max-width: 530px;
}

.sell-without .right .avatars {
    display: flex;
    margin-top: 32px;
}

.sell-without .right .avatars .images {
    position: relative;
}

.sell-without .right .avatars .images img {
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    border-radius: 50%;
}

.sell-without .right .avatars .images img:nth-child(1) {
    right: 0;
}

.sell-without .right .avatars .images img:nth-child(2) {
    right: calc(24px * 1);
}

.sell-without .right .avatars .images img:nth-child(3) {
    right: calc(24px * 2);
}

.sell-without .right .avatars .images img:nth-child(4) {
    right: calc(24px * 3);
}

.sell-without .right .avatars .images img:nth-child(5) {
    right: calc(24px * 4);
}

.sell-without .right .avatars .images img:nth-child(6) {
    right: calc(24px * 5);
}

.sell-without .right .avatars .images img:nth-child(7) {
    right: calc(24px * 6);
}

.sell-without .right .avatars button {
    z-index: 99;
    width: 260.56px;
    height: 42px;
    background: #f79c1e;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px 24px 24px 16px;
    margin-right: calc(24px * 7);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 22px;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    text-align: right;
    padding-top: 8px;
    color: #ffffff;
}

.sell-without .right .avatars button svg {
    margin-right: 7px;
    margin-bottom: 4px;
}

.sell-without .right .avatars .number {
    position: absolute;
    right: -1px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #000;
    top: 0;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #e4e6ef;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sell-without .left {
    margin-top: 40px;
}

.sell-without .left .cardd {
    width: 237px;
    height: 187px;
    transition: all 0.3s;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    padding: 56px 32px;
    transition: all 0.3s;
    /* cursor: pointer; */
}

.sell-without .left .cardd span {
    display: block;
    margin-right: 8px;
}

.sell-without .left .cardd .price {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 51px;
    text-align: right;
    color: #495057;
    direction: ltr;
}

.sell-without .left .cardd .text {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: right;
    color: #343a40;
}

.sell-without .left .cardd svg {
    fill: #fff !important;
}

.sell-without .left .cardd:hover {
    background: #ffffff;
    box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
}

.sell-without .left .cardd:hover .price {
    color: #f79c1e;
}


/* End Sell Without Intermediaries */


/* Brands */

.brands {
    margin: 128px 0;
}

.outline__text {
    font-family: sans-serif;
    -webkit-text-stroke: 1px black;
    -webkit-text-fill-color: white;
}

.marquee {
    width: 100%;
    margin-top: 20px;
    pointer-events: none;
    overflow: hidden;
}

.marquee__inner-wrap {
    height: 100%;
    width: 100%;
}

.marquee .item {
    background: #e2e8eb;
    border-radius: 16px;
    width: 310px;
    height: 112px;
    color: #000;
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marquee .item:hover {
    background: #fff !important;
}

.marquee .item img {
    border: 1px solid #adb5bd;
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.marquee .item .titr {
    font-family: "Rokh" !important;
    margin-right: 12px;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    text-align: right;
    color: #212529;
}

.marquee .item .text {
    font-family: "Yekan Bakh" !important;
    margin-right: 12px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #212529;
}

.marquee__img {
    width: max(8rem, 12vw);
    height: 8rem;
    margin: 0 4vw;
    border-radius: 100rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #444;
    filter: grayscale(0.6);
}

.marquee__inner {
    height: 100%;
    width: fit-content;
    align-items: center;
    display: flex;
    position: relative;
    animation: marquee 22s linear infinite;
    will-change: transform;
}

@keyframes marquee {
    to {
        transform: translateX(50%);
    }
}


/*  */

.marquee2 {
    width: 100%;
    margin-top: 20px;
    pointer-events: none;
    overflow: hidden;
    direction: ltr;
}

.marquee2__inner-wrap {
    height: 100%;
    width: 100%;
}

.marquee2 .item {
    background: #e2e8eb;
    border-radius: 16px;
    width: 310px;
    height: 112px;
    color: #000;
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marquee2 .item img {
    border: 1px solid #adb5bd;
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.marquee2 .item .titr {
    font-family: "Rokh" !important;
    margin-right: 12px;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    text-align: right;
    color: #212529;
}

.marquee2 .item .text {
    font-family: "Yekan Bakh" !important;
    margin-right: 12px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #212529;
}

.marquee__inner2 {
    height: 100%;
    width: fit-content;
    align-items: center;
    display: flex;
    position: relative;
    animation: marquee2 22s linear infinite;
    will-change: transform;
}

@keyframes marquee2 {
    to {
        transform: translateX(-50%);
    }
}

.marquee2 .item:hover {
    background: #fff !important;
}


/* End Brands */


/* Iran */

.onmap {
    position: relative !important;
}


/* .on-logo {
    width: 260px;
    height: 40px;
    position: absolute;
    left: 190px;
    bottom: 0;
    background-color: #f8f9fa;
    z-index: 8;
} */

#map,
#map_holder,
#map_inner,
#map_inner svg {
    width: 420px !important;
    height: 420px !important;
}

#map_zoom {
    display: none !important;
}

#map_inner div a {
    display: none !important;
    opacity: 0 !important;
}

.map-det {
    left: 0;
}

#tt_sm_map {
    direction: ltr;
    /* bottom: auto !important; */
    z-index: 9999999 !important;
    /* left: auto !important; */
}

#tt_sm_map .tt_sm {
    height: 129px;
    min-width: 130px;
    background: rgba(0, 0, 0, 0.31);
    backdrop-filter: blur(2px);
    direction: rtl;
    text-align: right !important;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 30px;
    text-align: right;
    color: #ffffff;
}

#tt_sm_map .tt_name_sm {
    direction: rtl;
    float: right;
    text-align: right !important;
}

.iran {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    max-width: 1300px;
    width: 100%;
    margin: 128px auto;
}

.iran .right {
    width: 50%;
}

.iran .right h6 {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 800;
    font-size: 40px;
    line-height: 51px;
    text-align: right;
    color: #343a40;
}

.iran .right h6 span {
    background: rgb(239, 76, 76);
    background: linear-gradient(27deg, rgba(239, 76, 76, 1) 0%, rgb(196, 196, 196) 50%, rgba(16, 202, 135, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.iran .right .under-h6 {
    margin-top: 8px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 31px;
    text-align: right;
    margin-bottom: 32px;
    color: #6c757d;
}

.iran .right p {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 38px;
    leading-trim: both;
    text-edge: cap;
    text-align: right;
    color: #343a40;
}

.iran .right .btns {
    display: flex;
    align-items: center;
    margin-top: 40px;
}

.iran .right button {
    width: 225px;
    height: 52px;
    background: #f79c1e;
    border-radius: 16px;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 23px;
    align-items: center;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 7px;
    transition: all 0.3s;
}

.iran .right button svg {
    margin-right: 12px;
    margin-bottom: 4px;
}

.iran .right button:hover {
    opacity: 0.86;
}

.iran .right .btn-2 {
    background: #2e3b6a;
    margin-right: 24px;
    width: 245px;
}

.iran .left img {
    width: 600px;
}


/* Edn Iran */


/* Last Orders */

.last-orders {
    margin: 128px 0;
}

.last-orders .cards {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1300px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    padding: 20px;
}

.last-orders .cards .cardd {
    margin-bottom: 20px;
    padding: 20px;
    width: 310px;
    height: 218px;
    background: #fff !important;
    background-color: #fff !important;
    border: none;
    border-radius: 16px;
    transition: all 0.3s;
}

.last-orders .cards .cardd .head {
    display: flex;
    justify-content: space-between;
}

.last-orders .cards .cardd:hover {
    box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
}

.align-center {
    align-items: center;
}

.me-2 {
    margin-left: 8px;
}

.last-orders .cards .cardd span {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #6c757d;
}

.last-orders .cards .cardd p {
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    text-align: right;
    color: #212529;
    margin-top: 20px;
}

.last-orders .cards .cardd .span-red {
    color: #ef4c4c;
    display: inline;
}

.last-orders .cards .cardd .foot {
    padding-top: 24px;
    border-top: 1px solid #adb5bd;
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.last-orders .cards .cardd .right {
    display: flex;
    align-items: center;
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #6c757d;
}

.last-orders .cards .cardd .right svg {
    margin-left: 10px;
}

.last-orders .cards .cardd .left button {
    width: 132px;
    height: 40px;
    background: #2e3b6a;
    border-radius: 8px;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    color: #ffffff;
}


/* End Last Orders */


/* Services */

.services {
    margin: 128px 0;
}

.services .service-tabs {
    max-width: 1300px;
    width: 100%;
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
    border-bottom: 3px solid #cfd8dc;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 42px;
}

.services .service-tabs ul {
    display: flex;
    list-style: none;
    align-items: center;
    justify-content: space-between;
}

.services .service-tabs .owl-arr2,
.services .service-tabs .owl-arr {
    top: 16px !important;
    width: 30px;
}

.services .service-tabs ul li {
    margin: 0 auto;
    position: relative;
    bottom: -2px;
    cursor: pointer;
    padding-bottom: 12px;
    text-align: center;
}

.services ul {
    flex-wrap: nowrap;
}

.services ul .active2 {
    border-bottom: 4px solid #f79c1e;
    color: #fbc078;
}

.service-tabs .owl-item {
    /* width: unset !important; */
}

.services .cards {
    /* display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); */
    display: flex;
    grid-gap: 20px;
    align-items: center;
    max-width: 1300px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 48px;
}

.services .cards .cardd {
    margin-bottom: 19px;
    width: 310px;
    height: 454px;
    border: 1px solid #cfd8dc;
    background-color: #fff;
    border-radius: 16px;
    padding: 16px;
    position: relative;
}

.services .cards .cardd img {
    width: 278px;
    height: 278px;
    border-radius: 16px;
}

.services .cards .cardd .content .row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.services .cards .cardd .content .row1 img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 8px;
}

.services .cards .cardd .content .row1 .name {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #212529;
    display: block;
}

.services .cards .cardd .content .row1 .address {
    font-family: "Yekan Bakh" !important;
    display: block;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 19px;
    text-align: right;
    color: #495057;
}

.services .cards .cardd .content .row1 .rate {
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #6c757d;
}

.services .cards .cardd .content .row1 .rate svg {
    margin-bottom: 2px;
    margin-right: 2px;
}

.services .cards .cardd .content p {
    margin-top: 16px;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    text-align: justify;
    color: #495057;
}

.services .cards .cardd .content .foot {
    position: absolute;
    width: 310px;
    bottom: 23px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.services .cards .cardd .content .foot .text {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 19px;
    text-align: right;
    color: #868e96;
    margin-right: 8px;
}

.services .cards .cardd .content .foot button {
    width: 129px;
    height: 42px;
    background: #2e3b6a;
    border-radius: 8px;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
}

.services .service-banner {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    max-width: 1300px;
    height: 252px;
    background-image: url("./assets/images/banner.jpg");
    position: relative;
    margin-top: 120px;
    padding: 40px;
}

.services .service-banner img {
    position: absolute;
    left: 40px;
    bottom: -50px;
}

.services .service-banner h6 {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 51px;
    text-align: right;
    color: #123154;
}

.services .service-banner p {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 37px;
    text-align: right;
    color: #123154;
}

.services .service-banner .btns {
    display: flex;
    margin-top: 24px;
}

.services .service-banner .btns .btn-1 {
    width: 185px;
    height: 52px;
    background: #2e3b6a;
    border-radius: 16px;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
}

.services .service-banner .btns .btn-1 svg {
    margin-right: 12px;
    margin-bottom: 3px;
}

.services .service-banner .btns .btn-2 {
    width: 185px;
    height: 52px;
    background: #ffffff;
    border-radius: 16px;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 23px;
    color: #343a40;
}

.services .service-banner .btns .btn-2 svg {
    margin-right: 12px;
    margin-bottom: 3px;
}


/* End Services */

.fast-order {
    margin-top: 100px;
    width: 100%;
    height: 681px;
    margin-right: auto;
    margin-left: auto;
    background: url("./assets/images/order-bg.webp") no-repeat;
    background-size: cover;
    background-position: center;
    padding: 88px 70px;
    display: flex;
    justify-content: center;
}


/* .fast-order {
    margin-top: 100px;
    width: 100%;
    height: 681px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 64px;
    padding: 88px 70px;
    display: flex;
    justify-content: center;
    background: linear-gradient(270deg, #fbc078, #f9ad4b, #f79c1e);
} */

.fast-order .in-order {
    display: flex;
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    justify-content: flex-end;
}

.fast-order .form {
    width: 530px;
    min-height: 572px;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    padding-bottom: 24px;
}

.fast-order .form .head {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid #cfd8dc;
}

.fast-order .form .seller-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 26px;
    text-align: right;
    color: #868e96;
    position: relative;
    bottom: -2.5px;
    padding-bottom: 24px;
    cursor: pointer;
}

.fast-order .form .seller-btn svg {
    margin-left: 7px;
}

.fast-order .form .buyer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 26px;
    text-align: right;
    color: #868e96;
    position: relative;
    bottom: -2.5px;
    padding-bottom: 24px;
    cursor: pointer;
}

.fast-order .form .buyer-btn svg {
    margin-left: 7px;
}

.fast-order .form .active {
    color: #f79c1e;
    border-bottom: 3px solid #f79c1e;
}

.fast-order .form .active svg path {
    fill: #f79c1e;
    stroke: #f79c1e;
}

.fast-order .form .index-title {
    margin-top: 60px;
}

.fast-order .form .index-title h3 {
    line-height: 24px;
    font-size: 24px;
}

.fast-order .form .index-title h4 {
    font-size: 48px;
    bottom: -34px;
}

.fast-order .form .under-title {
    font-size: 16px;
    margin-top: 4px !important;
}

.fast-order .form select {
    margin-top: 40px;
    height: 70px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #adb5bd;
    border-radius: 9px;
    padding: 0 20px;
    color: #343a40;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("./assets/images/arr.png");
    background-repeat: no-repeat;
    background-position-x: 16px;
    background-position-y: 25px;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 23px;
    color: #adb5bd;
}

.fast-order .form select option {
    color: #000;
    margin: 10px;
}

.fast-order .form .pos-rel {
    position: relative;
}

.fast-order .form .pos-rel span {
    position: absolute;
    left: 10px;
    top: 45px;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 23px;
    color: #adb5bd;
}

.fast-order .form input {
    margin-top: 20px;
    height: 70px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #adb5bd;
    border-radius: 9px;
    padding: 0 20px;
    color: #343a40;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 23px;
}

.fast-order .form input::placeholder {
    color: #adb5bd;
}

.fast-order .form .btn-end {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.fast-order .form .btn-end button {
    margin-top: 26px;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    width: 162px;
    height: 52px;
    background: #2e3b6a;
    border-radius: 16px;
    margin-bottom: 14px;
}

.fast-order .form .btn-end button svg {
    margin-right: 12px;
    margin-bottom: 4px;
}


/* Fast Order */

.mt-100 {
    margin-top: 128px;
}


/* End Fast Order */


/* Mag */

.mag {
    margin-top: 256px;
}

.mag-cards {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 48px;
}

.mag-cards .card {
    width: 310px;
    height: 310px;
    padding: 73px 16px;
    border-radius: 24px;
    cursor: pointer;
}

.mag-cards .card:hover {
    background: url("./assets/images/bg-mag.png");
    color: #ffffff !important;
}

.mag-cards .card span {
    display: block;
    flex-direction: column;
}

.mag-cards .card:hover span {
    color: #ffffff !important;
}

.mag-cards .card:hover svg path {
    stroke: #ffffff !important;
}

.mag-cards .card .date {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 19px;
    text-align: right;
}

.mag-cards .card .title {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    display: flex;
    align-items: center;
    text-align: right;
    margin-top: 16px;
}

.mag-cards .card p {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: right;
    margin-top: 16px;
}

.mag-cards .card .read-more {
    display: flex;
    justify-content: center;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 19px;
    color: #2e3b6a;
    margin-top: 26px;
}

.mag-cards .card .read-more svg {
    margin-right: 8px;
}


/* End Mag */


/* Comments */

.comments {
    margin: 128px 0;
}

.comments .comment-divs {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 48px;
}

.comments .comment-divs .card {
    width: 310px;
    height: 303px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    position: relative;
    border-radius: 24px;
    transition: all 0.3s;
    background-color: transparent;
    border: none;
}

.comments .comment-divs .card:hover {
    background: #ffffff;
    box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
}

.comments .comment-divs .card .img-div {
    position: relative;
}

.comments .comment-divs .card .img-div img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.comments .comment-divs .card .img-div svg {
    position: absolute;
    right: -4px;
    top: 0;
}

.comments .comment-divs .card .name {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 25px;
    color: #274f76;
}

.comments .comment-divs .card p {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    color: #343a40;
    margin-top: 16px;
}

.comments .comment-divs .card .address {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    color: #868e96;
    position: absolute;
    bottom: 20px;
}

.index-about {
    max-width: 1300px;
    width: 100%;
    margin: 128px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.index-about p {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 31px;
    text-align: justify;
    color: #343a40;
    margin-top: 32px;
    transition: all 0.3s;
    height: 100%;
}

.d-none {
    display: none !important;
}

.index-about button {
    margin-right: auto;
    margin-left: auto;
    background-color: transparent;
    display: flex;
    align-items: center;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 23px;
    color: #868e96;
}

.index-about button svg {
    margin-left: 8px;
}

.index-about .no-more {
    height: 70px;
    overflow: hidden;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgb(124, 38, 38)), to(rgba(0, 0, 0, 0)));
    padding: 0 32px;
}

.show-mob-head {
    width: 100%;
    height: 76px;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

.show-mob-head h6 {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    text-align: right;
    color: #212529;
}

.show-mob-head span {
    display: flex;
    align-items: center;
}

.show-mob-head span svg {
    margin-right: 8px;
}

.show-mob {
    display: none;
}

.scroll-btn {
    position: relative;
    width: 64px;
    height: 64px;
    background: #ef4c4c;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: auto;
    margin-left: auto;
    top: -36px;
    cursor: pointer;
}

@media (max-width: 1320px) {
    .how-work-cards .right-svg {
        right: 250px;
    }
    .how-work-cards .left-svg {
        position: absolute;
        left: 250px;
    }
    .scrollable .baners {
        width: 1100px;
        flex-wrap: nowrap;
        display: flex;
    }
    .scrollable .baners .baner {
        width: 346px;
    }
    .scrollable .baners .baner img {
        width: 100%;
    }
    .scrollable {
        overflow: scroll;
    }
    .sell-without {
        padding: 0 20px;
    }
    .iran {
        padding: 0 20px;
    }
    .last-orders .cards {
        padding: 0 20px;
        padding-bottom: 20px;
    }
    .last-orders .cards .cardd {
        margin: 0 10px;
        min-width: 310px;
    }
}

@media (max-width: 1452px) {
    .bg-blue {
        clip-path: circle(104.7% at 50% 2%);
    }
}

@media (max-width: 1200px) {
    .bg-blue .bg-b {
        display: none;
    }
    .bg-blue {
        clip-path: circle(114.7% at 50% 2%);
    }
    #map,
    #map_holder,
    #map_inner,
    #map_inner svg {
        width: 450px !important;
        height: 450px !important;
    }
    .show-mob {
        display: block !important;
        position: absolute;
        bottom: -12.7px;
        width: 101vw;
        right: 50%;
        transform: translateX(50%) translateY(100px);
        z-index: 3;
    }
    .how-work-cards .right-svg {
        display: none;
    }
    .how-work-cards .left-svg {
        display: none;
    }
    .materials .center {
        display: none;
    }
    .fast-order {
        justify-content: center;
        background-size: cover;
    }
}

button:disabled {
    opacity: 0.55;
}

@media (max-width: 992px) {
    .services .service-tabs {
        padding-bottom: 0;
    }
    .services .service-tabs ul {
        white-space: nowrap;
    }
    .last-orders .cards .cardd {
        margin: 0 auto;
    }
    .mt-40-res {
        margin-top: 50px;
    }
    .owl-carousel .owl-dots.disabled,
    .owl-carousel .owl-nav.disabled {
        display: block !important;
    }
    #service_card {
        padding: 0 20px;
    }
    .bg-blue {
        height: 600px;
        /* border-radius: 0; */
    }
    .materials .right {
        width: 280px;
        min-width: 280px;
    }
    .bg-blue h2 {
        font-size: 48px;
        margin-top: 60px;
    }
    .bg-blue h3 {
        font-size: 30px;
        margin-top: 8px;
    }
    .bg-blue .search-box {
        width: calc(100% - 40px);
        margin-top: 26px;
    }
    .bg-blue .search-box select {
        right: 50px;
        text-align: right;
        width: 65px;
        padding-right: 5px;
    }
    .bg-blue .search-box .space {
        right: 101px;
    }
    .bg-blue .search-box input {
        padding-right: 180px;
    }
    .index-title h4 {
        font-size: 44px;
        top: -45px;
    }
    .index-title h3 {
        font-size: 30px;
        margin: 0 10px;
    }
    .index-title h3 span {
        font-size: 30px;
    }
    .under-title {
        font-size: 20px;
    }
    .scrollable {
        overflow: scroll;
    }
    .how-work-cards {
        padding-bottom: 20px;
    }
    .how-work-cards .cardd {
        background: #ffffff;
        border-radius: 24px;
        width: 329px;
        height: 306px;
        margin: 0 auto;
    }
    .how-work-cards .active .cardd {
        box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
    }
    .sell-without {
        flex-direction: column;
    }
    .sell-without .left .card {
        flex-direction: column;
        height: unset;
        align-items: center;
        text-align: center !important;
        padding: 16px 0px !important;
        margin: 0;
        width: 200px;
        margin-top: 16px;
    }
    .sell-without .left .card .price {
        text-align: center !important;
        margin-top: 4px;
    }
    .sell-without .right h6 {
        font-size: 32px;
    }
    .iran .left {
        display: none;
    }
    .iran .right {
        width: 100%;
    }
    .services {
        padding: 0 20px;
    }
    .services .service-banner {
        display: flex;
        flex-direction: column;
        height: 250px;
        justify-content: flex-end;
        background-size: cover;
        background-repeat: no-repeat !important;
        padding: 12px;
        border-radius: 26px;
    }
    .services .service-banner img {
        bottom: 60px;
        width: 280px;
    }
    .location-icon {
        display: none;
    }
    .bg-blue .search-box select {
        right: 10px;
        width: 115px;
        padding-right: 5px;
    }
    .bg-blue .search-box .space {
        right: 111px;
    }
    .bg-blue .search-box input {
        padding-right: 140px;
        font-size: 14.5px;
    }
    .services .service-banner h6 {
        font-size: 24px;
    }
    .services .service-banner p {
        font-size: 17px;
        line-height: 22px;
    }
    .mag-cards .card {
        background: url("./assets/images/bg-mag.png");
        color: #ffffff;
        margin: 0 10px;
    }
    .mag-cards {
        width: 1300px;
        padding: 20px;
    }
    .comments .comment-divs {
        padding: 20px;
    }
    .comments .comment-divs .card {
        background: #ffffff;
        box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
        border-radius: 24px;
        margin: 0 auto;
        border-radius: 24px;
    }
    .how-work,
    .categorys {
        margin-top: 100px !important;
    }
    .baners {
        margin-top: 32px;
    }
    .sell-without,
    .brands,
    .iran,
    .last-orders,
    .services,
    .mag,
    .comments,
    .index-about {
        margin-top: 80px;
    }
    .mag-cards,
    .comment-divs {
        margin-top: 18px !important;
    }
    #about {
        padding: 20px;
    }
    .categorys .categorys-cards {
        padding: 10px;
        grid-template-columns: repeat(auto-fill, minmax(100px, 2fr));
        grid-gap: 20px;
        align-items: center;
        flex-direction: column;
        justify-content: flex-start;
    }
    .categorys .categorys-cards .img-div {
        width: 100px !important;
        height: 100px !important;
    }
    .categorys .categorys-cards .cat-card .title {
        font-size: 15px;
    }
    .categorys .categorys-cards .img-div img {
        width: 100px !important;
        height: 100px !important;
    }
}

@media (max-width: 768px) {
    .sell-without .right p,
    .iran .right p {
        text-align: justify;
    }
    .bg-blue h3 {
        line-height: 30px;
    }
    .services .service-banner {
        display: flex;
        flex-direction: column;
        height: 350px;
        justify-content: flex-end;
        background-size: cover;
        background-repeat: no-repeat !important;
        padding: 12px;
        border-radius: 26px;
    }
    .services .service-banner img {
        bottom: 170px;
        width: 280px;
    }
    .materials {
        height: unset;
        max-width: unset;
    }
    .materials .right {
        display: none;
    }
    .show-mob-head {
        display: flex;
    }
    .materials .left .card {
        min-width: 150px;
    }
    .marquee2 {
        display: none;
    }
    .fast-order {
        padding: 50px 12px;
    }
    .index-about .no-more {
        padding: 0 20px;
    }
}

@media (max-width: 576px) {
    .materials .left .card:last-child {
        display: none;
    }
    .bg-blue .circle .item {
        grid-area: 2/1;
        border-radius: 50%;
        animation: spin 40s calc(var(--d, 0s) / 0.9) linear infinite;
        /* duration = 12s, numbor of item = 6 so a delay of 12/6 = 2s */
    }
    .bg-blue {
        border-radius: 0 !important;
        clip-path: circle(107.7% at 50% 8%);
    }
    .bg-blue .circle .item .item-div {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #cfd8dc;
        width: 88px;
        height: 88px;
        border-radius: 16px;
        background: #ffffff;
        transform: rotate(90deg);
        transition: 0.3s;
    }
    .sell-without .left .cardd {
        width: 180px;
        height: 147px;
        padding: 10px;
    }
    .sell-without .left .cardd .price {
        font-size: 22px;
    }
    .sell-without .left .cardd .text {
        font-size: 14px;
    }
    .materials .left .card {
        min-width: 50%;
    }
    .sell-without .right .avatars button {
        margin-right: calc(24px * 5);
        font-size: 14px;
        width: 230.56px;
    }
    .sell-without .left .card {
        padding: 8px !important;
        width: 150px !important;
    }
    .sell-without .left .card .text {
        font-size: 12px;
    }
    .iran .right .btns {
        flex-direction: column;
    }
    .iran .right button {
        margin-bottom: 10px;
        width: 100% !important;
        margin-right: 0 !important;
        height: 60px !important;
    }
    .iran .right h6 {
        font-size: 32px;
    }
    .services .service-banner .btns {
        flex-direction: column;
    }
    .services .service-banner .btns button {
        margin: 0 !important;
        margin-bottom: 16px !important;
        width: 100% !important;
        height: 60px;
    }
    .services .service-banner {
        height: 400px;
    }
    .services .service-banner img {
        bottom: 220px;
    }
}


/* End Comments */


/*  */


/*  */


/*  */


/*  */


/* Footer */

footer,
#footer-div {
    overflow: hidden !important;
    min-height: auto !important;
}

footer {
    margin-top: 56px;
}

footer .subscribe {
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    background: #ffffff;
    box-shadow: 4px 7px 20px rgba(19, 55, 91, 0.16);
    border-radius: 24px;
    padding: 34px;
    background: #ebf3fc;
    border: 2px solid #c3dbf7;
    display: flex;
    justify-content: space-between;
}

footer .subscribe .right {
    display: flex;
    align-items: center;
}

footer .subscribe .right span {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 41px;
    text-align: right;
    margin-right: 16px;
}

footer .subscribe .right span span {
    color: #f79c1e;
    margin-right: 0;
}

footer .subscribe .right p {
    margin-right: 16px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 31px;
    text-align: right;
    color: #343a40;
    margin-top: 8px;
}

footer .subscribe .left {
    display: flex;
    align-items: center;
}

footer .subscribe .left .number-box {
    position: relative;
    width: 455px;
    height: 70px;
    background: #ffffff;
    border: 1px solid #adb5bd;
    border-radius: 9px;
}

footer .subscribe .left .number-box button {
    position: absolute;
    left: 0;
    top: 0;
    width: 132px;
    height: 68px;
    background: #f79c1e;
    border-radius: 8px 0px 0px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 31px;
    text-align: right;
    color: #ffffff;
    transition: all 0.3s;
}

footer .subscribe .left .number-box button svg {
    margin-right: 8px;
    margin-bottom: 5px;
}

footer .subscribe .left .number-box button:hover {
    opacity: 0.87;
}

footer .subscribe .left .number-box input {
    width: 322px;
    height: 100%;
    background: #ffffff;
    border-radius: 0 9px 9px 0;
    direction: ltr;
    padding-left: 56px;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 31px;
    color: #212529;
}

footer .subscribe .left .number-box input::placeholder {
    color: #adb5bd;
}

footer .subscribe .left .number-box .svg-abs {
    position: absolute;
    left: 144px;
    top: 17px;
}

footer .support {
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    display: none;
    margin-top: 50px;
    justify-content: space-between;
}

footer .support .cardd {
    padding: 2px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 325px;
    /* border-left: 1px solid #cfd8dc; */
}


/* footer .support .cardd:last-child {
    border-left: none;
} */

footer .support .cardd img {
    width: 55px;
    height: 55px;
}

footer .support .cardd span {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 17px;
    line-height: 26px;
    text-align: right;
    color: #212529;
    margin-right: 16px;
}

footer .support .cardd p {
    margin-right: 16px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #343a40;
}

footer .news {
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    margin-top: 50px;
}

footer .news .right {
    width: 50%;
    padding: 10px;
}

footer .news .right img {
    /* width: 239px; */
    height: 63px;
}

footer .news .right p {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 23px;
    text-align: right;
    color: #212529;
    margin-top: 16px;
}

footer .news .right .icons {
    display: flex;
}

footer .news .right .icons .icon-div {
    width: 66px;
    height: 66px;
    background: #ececec;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0 0 16px;
}

footer .news .right .icons img {
    max-width: 50px !important;
    object-fit: contain;
    max-height: 50px;
}

footer .news .left {
    width: 50%;
    padding: 10px;
    padding-top: 10px;
}

footer .news .left .title {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    text-align: right;
    color: #212529;
}

footer .news .left p {
    margin-top: 16px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: right;
    color: #343a40;
}

footer .news .left .email-box {
    display: flex;
    margin-top: 30px;
}

footer .news .left .email-box input {
    width: 571px;
    height: 70px;
    background: #ffffff;
    border: 1px solid #cfd8dc;
    border-radius: 0 9px 9px 0;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 23px;
    text-align: right;
    padding-right: 20px;
}

footer .news .left .email-box input::placeholder {
    color: #868e96;
}

footer .news .left .email-box button {
    width: 68px;
    min-width: 68px;
    height: 68px;
    background: #f79c1e;
    border-radius: 8px 0px 0px 8px;
}

footer .uls {
    width: 100%;
    background: #ebf3fc;
}

footer .ul-div {
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 40px 0;
}

footer .ul-div ul {
    list-style: none;
}

footer .ul-div ul li {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: right;
    margin-bottom: 18px;
    color: #343a40;
    cursor: pointer;
}

footer .ul-div ul li:first-child {
    cursor: default;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    text-align: right;
    color: #212529;
}

footer .socials {
    display: flex;
    justify-content: space-between;
    max-width: 1300px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 32px;
}

footer .socials .right {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: right;
    color: #343a40;
}

footer .socials .right .svgs {
    display: flex;
    margin-top: 32px;
}

footer .socials .right .svgs svg {
    margin-left: 42px;
    cursor: pointer;
}

footer .socials .left {
    direction: ltr;
}

footer .socials div {
    margin-bottom: 16px;
    direction: ltr;
}

footer .socials .left span {
    margin-left: 8px;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    color: #343a40;
}

footer .copy {
    width: 100%;
    background: #212529;
}

footer .copy .in-copy {
    height: 54px;
    width: 100%;
    max-width: 1300px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: auto;
    margin-left: auto;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    color: #d7e7f9;
}

@media (max-width: 1320px) {
    footer {
        padding-right: 20px;
        padding-left: 20px;
        position: relative;
        padding-bottom: 50px;
    }
    footer .copy {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px;
    }
}

@media (max-width: 1200px) {
    footer .support .cardd img {
        margin-bottom: 5px;
        width: 44px;
        height: 44px;
    }
    footer .support .cardd span {
        font-size: 15px;
    }
    footer .support .cardd p {
        font-size: 13px;
    }
}

@media (max-width: 1100px) {
    /* footer .support .cardd {
        flex-direction: column !important;
    } */
}

@media (max-width: 992px) {
    footer .support {
        display: none;
    }
    footer .subscribe {
        flex-direction: column;
    }
    footer .subscribe .left,
    footer .subscribe .left .number-box {
        margin-top: 16px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    footer .news {
        flex-direction: column;
    }
    footer .news .right,
    footer .news .left {
        width: 100%;
    }
    footer .icons {
        margin-bottom: 20px;
    }
    footer .uls {
        display: none;
    }
    footer .socials {
        flex-direction: column;
        align-items: center;
    }
    footer .socials .right .svgs svg {
        margin-left: 16px;
        margin-right: 16px;
    }
    footer .socials .left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    footer .in-copy {
        display: flex;
        justify-content: center !important;
        font-weight: 400;
        font-size: 12px !important;
    }
    footer .in-copy span:last-child {
        display: none;
    }
}

@media (max-width: 576px) {
    footer .subscribe .right,
    footer .subscribe .right div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    footer .subscribe .right span,
    footer .subscribe .right p {
        text-align: center;
    }
    footer .subscribe .right span {
        margin-top: 32px;
        font-size: 26px;
    }
    footer .subscribe .right p {
        font-size: 16px;
    }
    footer .subscribe {
        padding: 20px;
    }
    footer .subscribe .left .number-box input::placeholder {
        position: absolute;
        right: 10px;
        top: 20px;
    }
    footer .subscribe .left .number-box input {
        width: 100%;
    }
    footer .subscribe .left .number-box button {
        width: 60px;
    }
    footer .subscribe .left .number-box button span {
        display: none;
    }
    footer .subscribe .left .number-box .svg-abs {
        left: 65px;
    }
}


/*End Footer */


/* Login */

.login-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    display: flex;
    padding-right: 490px;
}

.auth-right {
    right: 0;
    top: 0;
    position: fixed;
    width: 490px;
    height: 100vh;
    background: #4d5079;
    padding: 56px 70px;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.auth-right .dots {
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
}

.auth-right .logo {
    z-index: 999;
    position: relative;
    top: -50px;
    right: -90px;
}

.auth-right .wizard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.auth-right .wizard .roww {
    display: flex;
}

.auth-right .wizard .roww .svg-box {
    width: 46px;
    min-width: 46px;
    height: 46px;
    background: #18232f;
    border: 1px dashed #11375c;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-right .wizard .roww .titr {
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    color: #ffffff;
    display: block;
    margin-right: 20px;
    margin-bottom: 4px;
}

.auth-right .wizard .roww .text {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #ffffff;
    display: block;
    margin-right: 20px;
}

.auth-right .wizard .dashed {
    margin-right: 20px;
    margin-top: 4px;
    margin-bottom: -5px;
}

.auth-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 100vh;
    padding: 40px 20px;
}

.auth-left .wellcome {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 31px;
    text-align: right;
    color: #212529;
}

.auth-left p {
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    text-align: right;
    color: #6c757d;
    margin-top: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.auth-left .resend {
    background-color: transparent;
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    text-align: right;
    color: #6c757d;
    margin-top: 0;
}

.auth-left p span {
    margin-left: 130px;
}

.auth-left form {
    margin-top: 32px;
}

.auth-left label {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #6c757d;
}

.auth-left .inp-div {
    position: relative;
    height: 70px;
}

.auth-left .inp-div input {
    width: 100%;
    height: 100%;
    background: #e2e8eb;
    border-radius: 9px;
    direction: ltr;
    padding-right: 22px;
    padding-left: 90px;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    color: #495057;
    padding-top: 11px;
}

.auth-left .inp-div input::placeholder {
    text-align: right;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #495057;
}

.auth-left .inp-div .flag {
    position: absolute;
    top: 20px;
    left: 20px;
}

.auth-left .inp-div .code {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 31px;
    text-align: right;
    color: #495057;
    position: absolute;
    left: 22px !important;
    top: 22px;
    direction: ltr;
}

.auth-left .inp-div .slash {
    position: absolute;
    left: 72px !important;
    top: 18px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 36px;
    color: #aaa9a9;
}

.auth-left button {
    width: 115px;
    height: 53px;
    background: #2e3b6a;
    border-radius: 6px;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 23px;
    color: #ffffff;
    margin-top: 40px;
}

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

.auth-left .links {
    list-style: none;
    display: flex;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 25px;
    color: #adb5bd;
    position: relative;
    bottom: 0px;
}

.auth-left .links li {
    margin: 0 12px;
    margin-top: 80px;
}


/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* Firefox */

input[type="number"] {
    -moz-appearance: textfield;
}

.inputfield {
    margin: 0 auto;
    width: 90%;
    display: flex;
    justify-content: space-around;
    direction: ltr;
}

.inputfield .input {
    width: 35px;
    height: 35px;
    margin: 5px;
    text-align: center;
    border: none;
    outline: 0;
    width: 24%;
    max-width: 108px;
    height: 81px;
    background: #e2e8eb;
    border-radius: 9px;
    font-size: 22px;
}

.inputfield input[type="number"]::-webkit-outer-spin-button,
.inputfield input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.auth-left .btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 19px;
}

.auth-left .btns .back {
    background: #e2e8eb;
    border-radius: 6px;
    color: #495057;
}

.auth-left .user-type .item {
    width: 500px;
    height: 100px;
    background: #f3f3f3;
    border: 1px dashed #adb5bd;
    border-radius: 9px;
    margin-top: 32px;
    padding: 24px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.auth-left .user-type span {
    display: block;
}

.auth-left .user-type .titr {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #212529;
}

.auth-left .user-type .text {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #868e96;
    margin-top: 8px;
}

.auth-left .user-type svg {
    margin-left: 21px;
}

.auth-left .user-type .active {
    background-color: #ebf5ff;
}

.px-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.auth-left .info-inputs label {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #6c757d;
    display: block;
}

.auth-left .info-inputs .inp-div {
    position: relative;
}

.auth-left .info-inputs .inp-div input {
    direction: rtl;
    padding-right: 52px;
    padding-left: 52px;
    padding-bottom: 6px;
    background: #f0f0f0;
    border: 1px solid #adb5bd;
    font-size: 14px;
}

.auth-left .info-inputs label {
    margin-top: 16px;
    margin-bottom: 3px;
}

.auth-left .info-inputs input::placeholder {
    color: #868e96;
    line-height: 0;
}

.auth-left .info-inputs .inp-div svg {
    position: absolute;
    right: 18px;
    top: 20px;
}

.auth-left .info-inputs select {
    width: 100%;
    height: 70px;
    background: #e2e8eb;
    border-radius: 9px;
    padding-right: 22px;
    padding-left: 173px;
    color: #495057;
    padding-top: 4px;
    direction: rtl;
    padding-right: 52px;
    padding-left: 52px;
    padding-bottom: 6px;
    background: #f0f0f0;
    border: 1px solid #adb5bd;
    text-align: right;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #868e96;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("./assets/images/arr.png");
    background-repeat: no-repeat;
    background-position-x: 24px;
    background-position-y: 24px;
}

.auth-left .info-inputs select option {
    color: #495057;
}

.auth-modal {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background: rgba(33, 37, 41, 0.7);
    backdrop-filter: blur(5.5px);
    z-index: 999;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-modal .box {
    background: url("./assets/images/wellcom-bg.png");
    width: calc(100% - 40px);
    max-width: 1300px;
    height: 860px;
    background-size: cover;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.auth-modal .box span {
    display: block;
}

.auth-modal .box .span-1 {
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    color: #225591;
}

.auth-modal .box .span-2 {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 51px;
    text-align: center;
    color: #225591;
}

.auth-modal .box .cards {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
}

.auth-modal .box .cards .card {
    max-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px;
}

.auth-modal .box .cards .card span {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 31px;
    text-align: center;
    color: #212529;
    display: block;
    margin-top: 5px;
    margin-bottom: 15px;
}

.auth-modal .box .cards .card p {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    color: #495057;
}

.auth-modal .box .dashboard {
    width: 166px;
    height: 53px;
    background: #2e3b6a;
    border-radius: 6px;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 23px;
    color: #ffffff;
    margin-top: 60px;
}

.back-pos {
    display: none;
}

@media (max-width: 1200px) {
    .login-main {
        padding-right: 420px;
    }
    .auth-right {
        width: 420px;
    }
}

@media (max-width: 992px) {
    .auth-right {
        display: none;
    }
    .login-main {
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .auth-left .flex-end,
    .auth-left .flex-end a,
    .auth-left button {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
    .auth-left {
        padding: 40px 20px;
    }
    .auth-left .back {
        display: none;
    }
    .back-pos {
        position: absolute;
        display: flex;
        width: 100%;
        height: 64px;
        left: 0px;
        top: 0;
        padding: 19px 29px;
        justify-content: flex-end;
        align-items: center;
    }
    .back-pos svg {
        margin-right: 5px;
    }
    .back-pos a {
        display: flex;
        align-items: center;
    }
    .auth-left button {
        margin-top: 24px;
    }
    .auth-left .inp-div {
        width: 100%;
        height: 70px;
    }
    .auth-left .wi-100 {
        width: 100%;
    }
    .otp-input {
        width: 70px !important;
    }
    .auth-left p span {
        white-space: nowrap;
        margin-left: 20px;
    }
    .auth-left .user-type .item {
        width: 100%;
    }
    .auth-left .links {
        display: none;
    }
    /*  */
    .auth-modal .box {
        height: 100vh;
        overflow: auto;
        padding-top: 300px;
        padding-bottom: 100px;
    }
    .auth-modal .box .cards {
        flex-wrap: wrap;
        margin-top: 80px;
    }
    .auth-modal .box .cards .card {
        max-width: 170px;
        margin: 10px;
    }
    .auth-modal .box .cards .card span {
        font-family: "Rokh" !important;
        font-style: normal;
        font-weight: 700;
        font-size: 24px;
        line-height: 31px;
        text-align: center;
        color: #212529;
        display: block;
        margin-top: 5px;
        margin-bottom: 15px;
        display: block !important;
    }
    .auth-modal .box .cards .card p {
        font-family: "Yekan Bakh" !important;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 25px;
        text-align: center;
        color: #495057;
        display: block !important;
    }
    .wi-100 {
        width: 100% !important;
    }
}

@media (max-width: 420px) {
    .auth-modal .box {
        padding: 0 10px;
        padding-top: 800px;
        padding-bottom: 100px;
    }
    .auth-left .inp-div .flag {
        left: 16px;
    }
    .auth-left .inp-div .code {
        left: 82px;
    }
    .auth-left .inp-div .slash {
        left: 125px;
        top: 20px;
    }
    .auth-left .inp-div input {
        padding-left: 90px;
    }
}


/* End Login */


/* Categorys Page */

.breadcrumbs {
    display: flex;
    align-items: center;
    font-family: Yekan Bakh;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    text-align: right;
    color: #b5b5c3;
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 16px;
}

.breadcrumbs .last {
    color: #18232f !important;
}

.breadcrumbs a {
    text-decoration: none;
    margin: 0 3px;
}


/* Cat Group */

.cat-group {
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 120px;
}

.cat-group .head {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #adb5bd;
    padding-bottom: 16px;
}

.cat-group .head span {
    display: block;
}

.cat-group .head .title {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 41px;
    text-align: right;
    color: #212529;
}

.cat-group .head .text {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 19px;
    text-align: right;
    color: #7d7d7d;
}

.cat-group .head .read-more {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color: #868e96;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.cat-group .head .read-more svg {
    margin-right: 8px;
}

.cat-group .cat-items {
    display: flex;
    align-items: center;
    margin-top: 32px;
    justify-content: flex-start;
}

.cat-group .cat-items .item {
    margin-left: 20px;
    width: 244px;
    height: 304px;
    background: #ffffff;
    border: 1px solid #d6d6d6;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    text-align: right;
    color: #212529;
    cursor: pointer;
}

.cat-group .cat-items-2 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
    grid-gap: 1rem;
    margin-top: 20px;
}

.cat-group .cat-items-2 .item-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 10px;
}

.cat-group .cat-items-2 .item-2 span {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 31px;
    text-align: center;
    margin-top: 20px;
    color: #212529;
}

.cat-group .cat-items-2 .item-2 .img-box {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 192px;
    height: 192px;
    background: linear-gradient(180deg, rgba(186, 206, 235, 0) 13.71%, #baceeb 115.86%);
}

.cat-group .cat-items-2 .item-2 .img-box img {
    border-radius: 50%;
    width: 180px;
    height: 180px;
}

.cat-group .cat-items-2 .item-2 img {
    width: 110%;
}

@media (max-width: 1200px) {
    .cat-group .cat-items-2 {
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 1rem;
        margin-top: 20px;
    }
}

@media (max-width: 1100px) {
    .cat-group .cat-items-2 {
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 1rem;
    }
    .cat-group .cat-items-2 .item-2 .img-box {
        width: 162px;
        height: 162px;
    }
}

@media (max-width: 992px) {
    .cat-group .cat-items-2 {
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 5px;
        grid-gap: 1rem;
    }
    .cat-group .cat-items-2 .item-2 .img-box {
        width: 107px;
        height: 107px;
    }
    .cat-group .cat-items-2 .item-2 .img-box img {
        height: 76px;
        width: 76px;
    }
}

@media (max-width: 786px) {
    .cat-group .cat-items-2 {
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 0;
    }
    .cat-group .cat-items-2 .item-2 .img-box {
        width: 76px;
        height: 76px;
    }
}

.cat-group .cat-items .item img {
    width: 204px;
    height: 223px;
    border-radius: 16px;
}

.cat-group .cat-items .item span {
    display: block;
    margin-top: 16px;
}

.cat-group {
    padding: 20px;
}

@media (max-width: 1200px) {
    .cat-items {
        padding: 20px;
    }
}

@media (max-width: 576px) {
    .cat-group {
        margin-bottom: 30px;
    }
    .cat-group .head .title {
        font-size: 22px;
    }
    .cat-group .head .text {
        display: none;
    }
    .cat-group .head {
        align-items: center;
    }
    .cat-group .cat-items {
        margin-top: 12px;
    }
    .mt-100 {
        margin-top: 60px;
    }
}


/* End Cat Group */


/* Products */

.other-cats {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    max-width: 1300px;
    margin-top: 24px;
}

.other-cats span {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    text-align: right;
    color: #181c32;
}

.other-cats .cards {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
}

.other-cats .cards .card {
    width: 144px;
    height: 153px;
    background: #ffffff;
    border: 1px solid #cfd8dc;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    margin-top: 26px;
    flex-shrink: 0;
}

.other-cats .cards .card:hover {
    box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
}

.other-cats .cards .card img {
    max-width: 80%;
    margin-right: 16px;
}

.other-cats .cards .card:last-child {
    margin-left: 0px;
}

.other-cats .cards .card {
    justify-content: flex-start;
}

.other-cats .cards .card span {
    display: block;
    margin-top: 16px;
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    color: #6c757d;
}

.products {
    display: flex;
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 40px;
}

.products .filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color: #adb5bd;
    width: 310px;
    background: #ffffff;
    border: 1px solid #adb5bd;
    height: 62px;
    border-radius: 8px;
}

.products .cat-filter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color: #adb5bd;
    width: 310px;
    background: #ffffff;
    border: 1px solid #adb5bd;
    border-radius: 8px;
    padding: 16px;
    margin-top: 20px;
}

.products .cat-filter.category {
    height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.products .cat-filter .search-box {
    position: relative;
}

.products .cat-filter .search-box input {
    width: 278px;
    height: 48px;
    background: #e2e8eb;
    border-radius: 8px;
    padding: 0 43px;
}

.products .cat-filter .search-box select {
    width: 278px;
    height: 50px;
    background: #e2e8eb;
    border-radius: 9px;
    padding-right: 22px;
    padding-left: 173px;
    color: #495057;
    padding-top: 4px;
    direction: rtl;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 6px;
    background: #f0f0f0;
    border: 1px solid #adb5bd;
    text-align: right;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #868e96;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(./assets/images/arr.png);
    background-repeat: no-repeat;
    background-position-x: 17px;
    background-position-y: 17px;
}

.products .cat-filter .search-box select {
    color: #495057;
}

.products .cat-filter .search-box input::placeholder {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #adb5bd;
}

.products .cat-filter .search-box svg {
    position: absolute;
    top: 14px;
    right: 15px;
}

.products .box {
    background: #fff;
    width: 100%;
}

@media (min-width: 544px) {
    .products.box {
        margin: 40px auto;
        max-width: 440px;
        padding: 40px;
    }
}

.directory-list {
    direction: rtl;
    padding-left: 0 !important;
}

.directory-list ul {
    margin-right: 10px;
    /* padding-right: 20px; */
    /* border-right: 1px dashed #ddd; */
    padding-left: 0 !important;
}

.directory-list li {
    list-style: none;
    color: #888;
    font-size: 17px;
    font-style: italic;
    font-weight: normal;
    margin-top: 12px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: right;
    color: #868e96;
    cursor: pointer;
}

.directory-list a {
    border-bottom: 1px solid transparent;
    color: #888;
    text-decoration: none;
    transition: all 0.1s ease;
}

.directory-list a:hover {
    border-color: #eee;
    color: #000;
}

.directory-list .folder,
.directory-list .folder>a {
    color: #777;
    font-weight: bold;
}

.directory-list .selected {
    color: rgb(53, 53, 53);
    font-weight: 600;
}


/* The icons
  -------------------------------------------------------------- */

.directory-list li:before {
    margin-left: 10px;
    content: "";
    height: 20px;
    vertical-align: middle;
    width: 20px;
    background-repeat: no-repeat;
    display: inline-block;
    /* file icon by default */
}

.products .brands-menu {
    width: 310px;
    height: 65px;
    background: #ffffff;
    border: 1px solid #adb5bd;
    border-radius: 8px;
    margin-top: 20px;
    overflow: hidden;
    padding: 20px;
    transition: all 0.4s;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 25px;
    text-align: right;
    color: #274f76;
}

.products .brands-menu .shows {
    display: flex;
    align-content: center;
    justify-content: space-between;
    height: 35px;
    cursor: pointer;
}

.products .more-brand {
    height: unset;
}

.products .brands-menu ul {
    transition: all 0.4s;
    list-style: none;
    margin-top: 0 !important;
}

.products .brands-menu ul li {
    list-style: none;
    color: #888;
    font-weight: normal;
    margin-top: 12px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-align: right;
    color: #868e96;
    cursor: pointer;
}

.outputOne {
    margin-left: 20px;
    left: 0 !important;
}

.outputTwo {
    right: 0 !important;
    left: unset !important;
    margin-left: -32px;
}

.products .range-slider {
    position: relative;
    width: 280px;
    height: 35px;
    text-align: center;
    direction: ltr;
}

.products .range-slider input {
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 15px;
    width: 280px;
    outline: none;
    height: 18px;
    margin: 0;
    padding: 0;
}

.products .range-slider input::-webkit-slider-thumb {
    pointer-events: all;
    position: relative;
    z-index: 1;
    outline: 0;
}

.products .range-slider input::-moz-range-thumb {
    pointer-events: all;
    position: relative;
    z-index: 10;
    -moz-appearance: none;
    width: 9px;
}

.products .range-slider input::-moz-range-track {
    position: relative;
    z-index: -1;
    background-color: rgba(0, 0, 0, 1);
    border: 0;
}

.products .range-slider input:last-of-type::-moz-range-track {
    -moz-appearance: none;
    background: none transparent;
    border: 0;
}

.products .range-slider input[type="range"]::-moz-focus-outer {
    border: 0;
}

.products .rangeValue {
    width: 30px;
}

.products .output {
    position: absolute;
    width: 40px;
    height: 30px;
    text-align: center;
    color: #999;
    border-radius: 4px;
    display: inline-block;
    font: bold 15px/30px Helvetica, Arial;
    bottom: -30px;
    left: 50%;
    transform: translate(-50%, 0);
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: right;
    color: #868e96;
}

.products .output.outputTwo {
    left: 100%;
}

.products .container {
    position: absolute;
}

.products input[type="range"] {
    -webkit-appearance: none;
    background: none;
}

.products input[type="range"]::-webkit-slider-runnable-track {
    height: 5px;
    border: none;
    border-radius: 3px;
    background: transparent;
}

.products input[type="range"]::-ms-track {
    height: 5px;
    background: transparent;
    border: none;
    border-radius: 3px;
}

.products input[type="range"]::-moz-range-track {
    height: 5px;
    background: transparent;
    border: none;
    border-radius: 3px;
}

.products input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #555;
    margin-top: -5px;
    position: relative;
    z-index: 10000;
}

.products input[type="range"]::-ms-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #555;
    margin-top: -5px;
    position: relative;
    z-index: 10000;
}

.products input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    margin-top: -5px;
    position: relative;
    z-index: 10000;
}

.products input[type="range"]:focus {
    outline: none;
}

.products .full-range,
.products .incl-range {
    width: 100%;
    height: 1px;
    left: 0;
    top: 24px;
    position: absolute;
    background: #ddd;
}

.products .incl-range {
    background: #ef4c4c;
}

.products .product-price {
    width: 310px;
    height: 118px;
    background: #ffffff;
    border: 1px solid #adb5bd;
    border-radius: 8px;
    margin-top: 20px;
    padding: 16px;
}

.products .product-price span {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 25px;
    text-align: right;
    color: #274f76;
}

.products .left {
    width: 100%;
    margin-right: 20px;
}

.products .left .sort-by {
    width: 100%;
    height: 62px;
    background: #ffffff;
    border: 1px solid #cfd8dc;
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding: 20px;
}

.products .left .sort-by span {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #868e96;
}

.products .left .sort-by ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin-bottom: 0 !important;
}

.products .left .sort-by ul li {
    margin-right: 16px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #6c757d;
    cursor: pointer;
}

.products .left .sort-by ul .active {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #225591;
}

.products .left .product-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
    min-height: 315px;
    background: #ffffff;
    cursor: pointer;
    border-radius: 24px;
    margin-top: 20px;
}

.products .left .product-card .right {
    display: flex;
}

.product-card:hover {
    box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
}

.products .left .product-card .right .img-box {
    width: 212px;
    height: 275px;
    background: #ffffff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.products .left .product-card .right .img-box img {
    border-radius: 8px;
    /* width: 275px;
    height: 275px; */
    width: 212px;
    height: 275px;
    object-fit: contain;
}

.products .left .product-card .right .img-div {
    width: 123px;
    height: 135px;
}

.products .left .product-card .right .detail {
    margin-right: 50px;
}

.products .left .product-card .right .detail h6 {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 23px;
    line-height: 31px;
    text-align: right;
    color: #18232f;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-det .mt-7 {
    margin-top: 80px !important;
}

.products .left .product-card .right .detail .det-row {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.products .left .product-card .right .detail .det-row span:first-child {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    text-align: right;
    color: #717171;
}

.products .left .product-card .right .detail .det-row span:last-child {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 32px;
    text-align: right;
    color: #18232f;
    margin-right: 8px;
}

.products .left .product-card .shop-det {
    width: 290px;
    height: 275px;
    background: #f8f9fa;
    border-radius: 16px;
    padding: 16px;
}

.products .left .product-card .shop-det .head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.products .left .product-card .shop-det .head .right {
    display: block;
}

.products .left .product-card .shop-det .head .shop-name {
    margin: 0 6px;
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    text-align: right;
    font-weight: 700;
    color: #212529;
}

.products .left .product-card .shop-det .head svg {
    margin-bottom: 6px;
}

.products .left .product-card .shop-det .head .address {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #6c757d;
    margin-right: 6px;
    margin-top: 6px;
}

.products .left .product-card .shop-det .m0 {
    margin: 0 !important;
    margin-top: 3px !important;
}

.products .left .product-card .shop-det .stars {
    display: flex;
    align-items: center;
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    text-align: right;
    color: #868e96;
}

.products .left .product-card .shop-det .stars svg {
    margin-right: 4px;
}

.products .left .product-card .shop-det .price-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #212529;
}

.products .left .product-card .shop-det .price-div .green-span {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 31px;
    display: flex;
    align-items: center;
    color: #10ca87;
}

.products .left .product-card .shop-det .number {
    width: 258px;
    height: 56px;
    background: #cfd8dc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    color: #212529;
    margin-top: 19px;
}

.products .left .product-card .shop-det .chat {
    width: 258px;
    height: 56px;
    background: #3686e3;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    color: #f7f8f9;
    margin-top: 8px;
}

.products .left .product-card .shop-det .number svg,
.products .left .product-card .shop-det .chat svg {
    margin-left: 8px;
}

.pagination {
    display: flex;
    align-items: center;
    margin-top: 70px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    width: 100%;
    justify-content: center;
    direction: ltr;
}

.pagination .item {
    width: 56px;
    height: 56px;
    background: #ffffff;
    border: 1px solid #cfd8dc;
    border-radius: 9px;
    margin: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 31px;
    text-align: center;
    color: #6c757d;
    border: 1px solid #cfd8dc;
    cursor: pointer;
    padding-top: 3px;
    transition: all 0.3s;
}

.pagination .item:hover {
    background: #ebf5ff;
}

.pagination .active {
    background: #3686e3 !important;
    color: #fff;
}

@media (max-width: 1320px) {
    .products .left .product-card .right .img-box {
        width: 182px;
    }
}

@media (max-width: 1200px) {
    .other-cats {
        padding: 0 20px !important;
    }
    .other-cats {
        width: 1200px;
        padding-bottom: 20px !important;
    }
    .products {
        padding: 0 20px;
    }
    .other-cats .cards .card {
        min-width: 124px;
    }
    .products .left .product-card .shop-det {
        width: 260px !important;
        min-width: 260px !important;
    }
    .products .left .product-card .shop-det button {
        width: 100% !important;
    }
    .products .filter,
    .products .cat-filter,
    .products .brands-menu,
    .products .product-price {
        width: 280px;
    }
    .products .left .product-card {
        padding: 10px;
    }
    .products .range-slider,
    .products .range-slider input {
        width: 250px;
    }
    .products .cat-filter .search-box input {
        width: 100%;
    }
    .products .left .product-card .right .detail .det-row {
        flex-wrap: wrap;
    }
}

.show-mob-992,
.close-mob,
.det-mob {
    display: none;
}

@media (max-width: 992px) {
    .products .left .sort-by {
        display: none;
    }
    .products .left .product-card .shop-det,
    .products .left .product-card .right .detail .det-row {
        display: none;
    }
    .product-card {
        max-width: 100%;
        height: 147px !important;
        min-height: 147px !important;
    }
    .products .left .product-card .right .img-box {
        width: 106px;
        height: 115px;
        background: #ffffff;
        border-radius: 16px;
        padding: 0;
        border: none;
    }
    .products .left .product-card .right .img-box img {
        width: 106px;
        height: 115px;
        /* border-radius: 16px; */
    }
    .products .left .product-card .right .detail h6 {
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        text-align: right;
        color: #18232f;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .products .left .product-card .right .detail {
        width: 100%;
    }
    .det-mob {
        display: block;
        width: 100%;
    }
    .det-mob .price {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 15px;
        font-family: "Yekan Bakh" !important;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 19px;
        text-align: right;
        color: #495057;
    }
    .det-mob .price .green {
        font-family: "Rokh" !important;
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 26px;
        display: flex;
        align-items: center;
        color: #f79c1e;
        margin-left: 5px;
    }
    .products .left .product-card {
        padding: 16px;
    }
    .products .left .product-card .right {
        width: 100%;
        max-width: 500px;
        margin-right: auto;
        margin-left: auto;
    }
    .det-mob .address {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .det-mob .address .star {
        display: none;
        /* display: flex; */
        align-self: flex-start;
        /* align-items: center; */
    }
    .det-mob .address .star svg {
        margin-bottom: 4px;
        margin-right: 4px;
    }
    .det-mob .right-d {
        font-style: normal;
        font-weight: 400;
        font-size: 10px;
        /* font-size: 12px; */
        line-height: 19px;
        text-align: right;
        color: #6c757d;
        display: flex;
        align-items: center;
    }
    .det-mob .right-d svg {
        /* margin-left: 8px; */
        margin-left: 2px;
        height: 12px;
    }
    .product-card-no-mar {
        margin-top: 0 !important;
    }
    .closed {
        width: 0 !important;
        overflow: hidden;
    }
    .products>.right {
        position: fixed;
        background-color: #fff;
        top: 0;
        right: 0;
        z-index: 99999;
        height: 100vh;
        overflow: auto;
        padding-bottom: 40px;
        transition: all 0.3s;
        width: 280px;
    }
    .close-mob {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: flex-end;
        padding: 16px;
        border-bottom: 1px solid #cfd8dc;
    }
    .products .filter {
        border: none;
        border-bottom: 1px solid #cfd8dc;
    }
    .products .cat-filter {
        padding: 0 16px;
        border: none;
        padding: 16px;
        margin-top: 0;
        border-bottom: 1px solid #cfd8dc;
    }
    .products .brands-menu {
        border: none;
        margin-top: 0;
        overflow: hidden;
        padding: 20px;
        border-bottom: 1px solid #cfd8dc;
    }
    .products .product-price {
        border: none;
        margin-top: 0;
    }
    .no-bor {
        border-bottom: none !important;
    }
    .show-mob-992 {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 9px;
        border-bottom: 1px solid #cfd8dc;
        margin-bottom: 24px;
    }
    .show-mob-992 span {
        display: flex;
        align-items: center;
    }
    .show-mob-992 span svg {
        margin-left: 4px;
    }
}


/* EndCategorys Page */


/* Product */

.product {
    margin-top: 40px;
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    align-items: flex-start;
}

.product .product-right {
    width: 310px;
    min-width: 310px;
}

.product #thumbnails img {
    width: 95px;
    height: 95px;
    margin: 2px;
    cursor: pointer;
}

.product #thumbnails {
    text-align: center;
    margin-top: 9px;
}

.product .img-div {
    height: 307px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product #main {
    object-fit: cover;
    display: block;
    border-radius: 16px;
    width: 310px;
    height: 310px;
}

.product .hidden {
    opacity: 0;
}

.product .product-center {
    padding: 30px 20px;
    width: 100%;
}

.product .product-center h6 {
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    text-align: right;
    color: #18232f;
}

.product .product-center .view {
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    text-align: right;
    color: #adb5bd;
    margin-top: 10px;
}

.product .product-center .view svg {
    margin-left: 4px;
}

.product .product-center .view .line-svg {
    margin: 0 15px;
}

.product .product-center hr {
    width: 100%;
    margin-top: 16px;
    border: 1px solid #e9edf1;
}

.product .product-center p {
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    text-align: right;
    color: #495057;
    margin-top: 20px;
}

.product .product-center .det {
    margin-top: 15px;
}

.product .product-center .det .rows {
    display: flex;
    width: 100%;
    margin-top: 12px;
}

.product .product-center .det .rows .cols {
    width: 50%;
}

.product .product-center .det .rows .cols span:first-child {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    text-align: right;
    color: #717171;
}

.product .product-center .det .rows .cols span:last-child {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 32px;
    text-align: right;
    color: #18232f;
}

.product .product-center .safe-buy {
    width: 100%;
    padding: 19px;
    background: #d9d8e1;
    border-radius: 8px;
    margin-top: 20px;
}

.product .product-center .safe-buy .title {
    display: flex;
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    text-align: right;
    color: #2e3b6a;
    display: flex;
    align-items: center;
    font-weight: 700;
}

.product .product-center .safe-buy .title svg {
    margin-left: 8px;
}

.product .product-center .safe-buy p {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #929699;
    margin-top: 16px;
}

.product .product-center p a {
    color: #2e3b6a !important;
    text-decoration: none;
}

.product .product-center .tabs {
    display: flex;
    width: 100%;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 3px solid #cfd8dc;
    margin-top: 32px;
}

.product .product-center .tabs .tab {
    display: flex;
    align-items: center;
    margin-left: 24px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 26px;
    text-align: right;
    cursor: pointer;
    color: #868e96;
    transition: all 0.3s;
}

.product .product-center .tabs .tab svg {
    margin-left: 6px;
}

.product .product-center .tabs .active {
    font-weight: 600;
    font-size: 17px;
    color: #6c6b8d;
}

.product .product-center .tabs .active svg {
    fill: #6c6b8d;
    stroke: #6c6b8d;
}

.product .product-center .tabs .active svg path {
    fill: #6c6b8d;
    stroke: #6c6b8d;
}

.product .product-center .product-info {
    margin-top: 32px;
}

.mt-0 {
    margin-top: 0;
}

.mb-2 {
    margin-bottom: 10px;
}

.mt-32 {
    margin-top: 32px;
}

.product .product-center .product-info .titr {
    display: block;
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    text-align: right;
    color: #212529;
}

.product .product-center .product-info .product-property {
    width: 100%;
}

.product .product-center .product-info .product-property .rows {
    display: flex;
}

.product .product-center .product-info .product-property .right {
    min-width: 134px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 53px;
    text-align: right;
    color: #868e96;
    border-bottom: 1px solid #d6d6d6;
}

.product .product-center .product-info .product-property .left {
    margin-right: 24px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 53px;
    text-align: right;
    color: #343a40;
    border-bottom: 1px solid #d6d6d6;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product .product-center .product-info .product-property .left svg {
    cursor: pointer;
}

.product {}

.fixed {
    position: fixed !important;
    left: 100px;
    top: 100px !important;
}

.product .product-left {
    width: 320px;
    min-width: 320px;
}

@media (min-width: 992px) {
    .product .product-left {
        position: sticky;
        top: 240px;
    }
}

.product .product-left .price-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #212529;
}

.product .product-left .price-div .green-span {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 31px;
    display: flex;
    align-items: center;
    color: #f79c1e;
}

.product .product-left .price-div .inf {
    margin-left: 4px;
}

#none-hov {
    display: none !important;
}

.product .product-left .price-div .inf:hover+#none-hov {
    display: flex !important;
}

.product .product-left .div-1 {
    width: 310px;
    min-height: 277px;
    position: relative;
    background: #ffffff;
    box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
    border-radius: 16px;
    padding: 20px;
}

.product .product-left .div-1 .offer {
    width: 270px;
    height: 56px;
    background: #f79c1e;
    border-radius: 8px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    color: #f7f8f9;
    margin-top: 24px;
}

.product .product-left .div-1 .chat {
    width: 270px;
    height: 56px;
    background: #3686e3;
    border-radius: 8px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    color: #f7f8f9;
    margin-top: 16px;
}

.product .product-left .div-1 hr {
    border: 1px solid #d6d6d6;
    margin-top: 20px;
    margin-bottom: 16px;
}

.product .product-left .div-1 .rate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #868e96;
}

.product .product-left .div-1 .rate .star {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    color: #6c757d;
    display: flex;
    align-items: center;
}

.product .product-left .div-1 .rate .star svg {
    margin-bottom: 3px;
    margin-right: 4px;
}

.product .product-left .div-1 .pos-abs {
    position: absolute;
    top: -20px;
    right: -6px;
    height: 39.23px;
    background: #e2e8eb;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #343a40;
    border-radius: 8px;
    padding: 0 16px;
}

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

.product .product-left .div-1 .name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    color: #212529;
}

.product .product-left .div-1 .name svg {
    margin-left: 8px;
    margin-bottom: 5px;
}

.product .product-left .div-1 .address {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #6c757d;
    margin-right: 33px;
}

.product .product-left .div-1 .ul-div {
    display: flex;
    align-items: flex-start;
}

.product .product-left .div-1 ul {
    margin-right: 26px;
    list-style: none;
}

.product .product-left .div-1 ul li::before {
    content: "\2022";
    color: #6c6b8d;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-right: -1em;
}

.product .product-left .div-1 ul li {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: right;
    color: #343a40;
    margin-top: 8px;
}

.product .product-left .div-1 span {
    margin-right: 10px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    color: #212529;
}


/* Comments */

.comments-div {
    max-width: 1300px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    position: relative;
    margin-top: 32px;
    border-top: 1px solid #cfd8dc;
}

.comments-div .left {
    width: 320px;
    min-width: 310px;
}

.comments-div .center {
    width: 100%;
    padding: 30px 20px;
}

.comments-div .center .new-comment span {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 31px;
    color: #212529;
}

.comments-div .center .new-comment p {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: right;
    color: #212529;
}

.comments-div .center .new-comment p a {
    color: #f79c1e !important;
    text-decoration: none;
}

.comments-div .center .new-comment {
    border-bottom: 1px solid #cfd8dc;
    padding-bottom: 32px;
}

.comments-div .center .list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;
}

.comments-div .center .list-head span {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 31px;
    text-align: right;
    color: #212529;
}

.comments-div .center .list-head .show {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #6c757d;
}

.comment-card {
    margin-top: 32px;
    border-bottom: 1px solid #e2e8eb;
    padding-bottom: 24px;
}

.comment-card .row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.comment-card .row-1 .right {
    display: flex;
    align-items: center;
    width: 100%;
    height: unset;
}

.comment-card .row-1 .right img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-left: 16px;
}

.comment-card .row-1 .right .name {
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 25px;
    text-align: right;
    color: #212529;
}

.comment-card .row-1 .right .name svg {
    margin-right: 8px;
    font-family: "Yekan Bakh" !important;
    margin-bottom: 4px;
}

.comment-card .row-1 .right .shop {
    margin-top: 7px;
    display: flex;
    align-items: center;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: right;
    color: #868e96;
    white-space: nowrap;
}

.comment-card .row-1 .right .shop svg {
    margin-left: 8px;
}

.comment-card .row-1 .left {
    display: flex;
    justify-content: flex-end;
    height: unset;
}

.comment-card p {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: right;
    margin-top: 23px;
    color: #212529;
}

.comment-card .action {
    margin-top: 32px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: right;
    color: #868e96;
}

.comment-card .action .icons {
    display: flex;
    align-items: center;
}

.comment-card .action .icons svg {
    margin-right: 16px;
    cursor: pointer;
}

.radio_group {
    width: 50px;
    height: 30px;
    margin: 5px;
    position: relative;
    text-align: center;
    line-height: 50px;
    font-size: 40px;
}

.radio_group input[type="radio"] {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 0;
    padding: 0;
    z-index: 1;
    cursor: pointer;
}

.radio_group input[type="radio"]+label {
    color: #95a5a6;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: scale(0.9);
}

.radio_group input[type="radio"]:checked+label {
    color: #3498db;
    transform: scale(1.1);
}

.radio_group input[type="radio"]:checked+label svg path {
    fill: #10ca87 !important;
}

.radio_group input[type="radio"]:checked+label .deslike path {
    fill: rgb(255, 73, 73) !important;
}

.rot-like {
    transform: rotate(180deg);
}

.comments-div .right {
    width: 310px;
    min-width: 310px;
    position: sticky;
    top: 0;
    right: 0;
    height: 288px;
    padding-top: 20px;
}

.comments-div .right .client-span {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 41px;
    text-align: right;
    color: #212529;
}

.comments-div .right .rate {
    display: flex;
    align-items: center;
}

.comments-div .right .rate .stars {
    margin-left: 8px;
}

.comments-div .right .count {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: right;
    color: #adb5bd;
    margin-top: 8px;
}

.comments-div .right .progress-div {
    display: flex;
    align-items: center;
    margin-top: 17px;
}

.comments-div .right .progress-div .span-1 {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-align: right;
    color: #868e96;
    width: 64px;
}

.comments-div .right .progress-div .progress {
    width: 187px;
    height: 4px;
    background: #cfd8dc;
    border-radius: 2px;
    margin-right: 25px;
    margin-left: 8px;
    position: relative;
}

.comments-div .right .progress-div .progress .fill {
    width: 80%;
    height: 4px;
    background: #f79c1e;
    border-radius: 2px;
    position: absolute;
    right: 0;
    top: 0;
}

.fill-40 {
    width: 40% !important;
}

.fill-90 {
    width: 90% !important;
}

.comments-div .right .progress-div .span-2 {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    text-align: right;
    color: #343a40;
}


/* End Comments */


/* Same Products */

.same-products {
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    margin-top: 100px;
}

.same-products .head {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 41px;
    text-align: right;
    color: #212529;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #adb5bd;
    padding-bottom: 19px;
}

.arr {
    position: absolute;
    left: 60px;
    top: -62px;
}

.arr2 {
    position: absolute;
    left: 0;
    top: -62px;
}

.same-products .arr {
    position: absolute;
    left: 60px;
    top: -62px;
}

.same-products .arr2 {
    position: absolute;
    left: 0;
    top: -62px;
}

.same-products .head .btns svg {
    margin-right: 16px;
    cursor: pointer;
}

.same-products .card {
    width: 244px;
    height: 352px;
    background: #ffffff;
    border: 1px solid #d6d6d6;
    border-radius: 16px;
    padding: 20px;
    margin-top: 32px;
    margin-bottom: 32px;
    cursor: pointer;
}

.same-products .card:hover {
    box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
}

.same-products .card .head {
    display: flex;
    justify-content: space-between;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    text-align: right;
    color: #18232f;
    padding-bottom: 0;
    border-bottom: 0;
}

.c-p {
    cursor: pointer;
}

.same-products .card .head .rate {
    display: flex;
    align-items: center;
}

.same-products .card .head .rate svg {
    margin-right: 4px;
    margin-bottom: 6px;
}

.same-products .card .img-div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    margin-bottom: 25px;
}

.same-products .card .img-div img {
    width: 123px;
    height: 135px;
}

.same-products h6 {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 32px;
    text-align: right;
    color: #18232f;
}

.same-products .card .shop {
    margin-top: 6px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    text-align: right;
    color: #889bae;
    display: flex;
    align-items: center;
}

.same-products .card .shop svg {
    margin-left: 4px;
}

.same-products .card .price {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 8px;
}

.same-products .card span {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 32px;
    text-align: right;
    color: #889bae;
}

.same-products .card .toman {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 19px;
    color: #18232f;
    margin-right: 8px;
}

.chat-mob-show {
    display: none;
}

@media (max-width: 1320px) {
    .comments-div .left {
        display: none;
    }
    .product {
        padding: 0 20px !important;
    }
    .breadcrumbs {
        padding-right: 20px;
    }
}

@media (max-width: 1200px) {
    .product-right {
        width: 290px !important;
        min-width: 290px !important;
    }
    .product-left {
        width: 290px !important;
        min-width: 290px !important;
    }
    .product .product-left .div-1 {
        width: 290px;
    }
    .product .product-left .div-1 button {
        width: 250px !important;
    }
}

.breadcrumbs p {
    display: none;
}

@media (max-width: 992px) {
    .comments-div .right,
    .mob-none {
        display: none;
    }
    .product {
        flex-direction: column;
    }
    .product .product-right .img-zoom-container {
        display: none !important;
    }
    .product-right {
        width: 100% !important;
    }
    #thumbnails {
        display: flex;
        overflow: auto;
        padding-bottom: 20px;
    }
    .product #thumbnails img {
        width: 326px;
        height: 326px;
        margin: 5px auto;
        cursor: pointer;
        padding: 20px;
        background-color: #fff;
        border-radius: 24px;
    }
    .comments-div {
        flex-direction: column;
    }
    .comment-card {
        width: 100%;
    }
    .comment-card .row-1 .right,
    .comment-card .row-1 .left {
        width: unset;
        min-width: unset;
    }
    .breadcrumbs a,
    .breadcrumbs span {
        display: none;
    }
    .breadcrumbs .last,
    .breadcrumbs p {
        display: block;
    }
    .breadcrumbs {
        margin-top: 20px;
    }
    .product-center {
        padding: 0 !important;
        margin-top: 20px;
    }
    .product .product-center .view .line-svg {
        margin: 0 8px;
    }
    .product-left {
        width: 100% !important;
    }
    .product .product-left .div-1 {
        width: 100%;
        position: relative;
        background: transparent;
        box-shadow: none;
        border-radius: 16px;
        padding: 20px;
    }
    .chat-mob-show {
        display: flex;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 72px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
        z-index: 999999;
    }
    .chat-mob-show button {
        width: 181px;
        height: 56px;
        top: 868px;
        background: #3686e3;
        border-radius: 8px;
        font-family: "Yekan Bakh" !important;
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 25px;
        text-align: center;
        color: #f7f8f9;
    }
    .chat-mob-show span {
        display: block;
        font-family: "Yekan Bakh" !important;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        text-align: center;
        color: #6c757d;
    }
    .chat-mob-show .price-green {
        font-family: "Rokh" !important;
        font-style: normal;
        text-align: center;
        font-weight: 700;
        font-size: 24px;
        line-height: 31px;
        color: #f79c1e;
    }
    .product .product-center .tabs {
        display: none;
    }
}

@media (max-width: 768px) {
    .pagination .item {
        width: 31px;
        height: 31px;
        border-radius: 50%;
        font-size: 16px;
        border: none;
        background: transparent;
    }
    .same-products .head {
        font-size: 22px;
        padding: 20px;
    }
    .same-products .arr {
        left: 80px;
    }
    .same-products .arr2 {
        left: 20px;
    }
    .same-products .card {
        margin-right: 20px !important;
        height: 368px;
        padding: 16px !important;
    }
}

@media (max-width: 576px) {
    .comment-card .row-1 .right .shop {
        margin-top: 4px;
        font-size: 15px;
        line-height: 18px;
        white-space: initial;
    }
    .comment-card .row-1 .right img {
        width: 50px;
        height: 50px;
        margin-left: 10px;
    }
}


/* End Same Products */


/* End Carousel */


/* EndProduct */


/* Same Service */

.certif {
    position: relative;
}

.certif svg {
    position: absolute;
    top: 0;
}

.address-2 {
    margin-right: 5px;
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #6c757d;
}

.address-2 svg {
    margin-left: 11px;
}

.ul-div-2 ul li {
    display: flex;
    align-items: center;
}

.ul-div-2 ul li svg {
    margin-left: 4px;
}

.average-rate {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #868e96;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.average-rate .stars {
    display: flex;
    align-items: center;
}

.average-rate .stars svg {
    margin-bottom: 4px;
    margin-right: 4px;
}

.req-service {
    font-family: "Yekan Bakh" !important;
    margin-top: 16px;
    width: 100%;
    height: 56px;
    background: #3686e3;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    color: #f7f8f9;
}

.same-service .card {
    width: 310px;
    height: 454px;
}

.same-service .card img {
    width: 100%;
    height: 196px;
    border-radius: 16px;
}

.same-service .card .info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.same-service .card .info img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-left: 8px;
}

.same-service .card .info .span-1 {
    display: block;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #212529;
}

.same-service .card .info .span-2 {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 19px;
    text-align: right;
    color: #495057;
    display: block;
}

.same-service .card .info .rate {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 10px;
    line-height: 17px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #6c757d;
}

.same-service .card .info .rate svg {
    margin-bottom: 4px;
    margin-right: 1px;
}

.same-service .card p {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    text-align: justify;
    color: #495057;
    margin-top: 16px;
}

.same-service .card .foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
}

.same-service .card .foot .right-foot {
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 19px;
    color: #868e96;
}

.same-service .card .foot .right-foot svg {
    margin-left: 8px;
}

.same-service .card .foot button {
    width: 129px;
    height: 42px;
    background: #f79c1e;
    border-radius: 8px;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 23px;
    color: #ffffff;
}


/* End  Same Service */


/* Profile */

.profile-main {
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
}

.profile-main .bg-white {
    border-radius: 24px 24px 0 0;
    background: #ffffff;
    position: relative;
}

.profile-main .prof-baner {
    background: url("./assets/images/prof-bg.png");
    width: 100%;
    height: 262px;
    border-radius: 24px;
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 32px;
}

.profile-main .prof-baner .right .span-1 {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 51px;
    text-align: right;
    color: #ffffff;
    display: flex;
    align-items: center;
}

.profile-main .prof-baner .right .span-1 svg {
    margin-right: 8px;
}

.profile-main .prof-baner .right .span-2 {
    margin-top: 8px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 37px;
    text-align: right;
    color: #ffffff;
}

.profile-main .user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: -27px;
    padding: 0 32px;
}

.profile-main .user img {
    border: 3px solid #ffffff;
    border-radius: 152px;
    width: 176px;
    height: 176px;
    margin-left: 15px;
    background-color: #f1f1f1;
}

.profile-main .user .right {
    display: flex;
    align-items: center;
}

.profile-main .user .right .name {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 50px;
    color: #18232f;
}

.profile-main .user .right .desc {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    line-height: 50px;
    color: #434c55;
}

.profile-main .user .right .span-1 {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 19px;
    color: #6c757d;
    margin-top: 2px;
    margin-bottom: 4px;
}

.profile-main .user .right .phone {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #212529;
}

.profile-main .user .right .phone svg {
    margin-right: 4px;
}

.profile-main .user .right span {
    display: block;
}

.profile-main .user .left .row-1 {
    display: flex;
    padding-top: 20px;
}

.profile-main .user .left .row-1 span {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 19px;
    text-align: right;
    color: #868e96;
    display: flex;
    align-items: center;
}

.profile-main .user .left .row-1 span svg {
    margin-left: 4px;
}

.profile-main .user .left .row-1 button {
    width: 206px;
    height: 48px;
    background: #f79c1e;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
    text-align: center;
    margin-right: 24px;
}

.profile-main .user .left .row-1 button span {
    color: #ffffff !important;
    margin: 0 8px;
}

.profile-main .user .left .row-2 {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.profile-main .user .left .row-2 img {
    width: 30px;
    height: 30px;
    border-radius: 0 !important;
    border: none;
    margin-left: 0;
    margin-right: 16px;
}

.profile-main .like-svg {
    transition: all 0.3s;
}

.profile-main .fill-red {
    fill: red;
}

.profile-main .cards {
    display: flex;
    justify-content: space-between;
    margin-right: auto;
    margin-left: auto;
    padding: 0 32px;
}

.profile-main .cards .cardd {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 295px;
    height: 96px;
    background: #f8f9fa;
    border-radius: 16px;
    padding-right: 20px;
}

.profile-main .cards .cardd .circle {
    width: 48px;
    height: 48px;
    background: #e2e8eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
}

.profile-main .cards .cardd span {
    display: block;
}

.profile-main .cards .cardd .span-1 {
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    color: #212529;
    margin-bottom: 8px;
    font-weight: 600;
}

.profile-main .cards .cardd .span-2 {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 19px;
    color: #6c757d;
}

.profile-main nav {
    position: sticky;
    z-index: 999;
    top: 0;
    right: 0;
    height: 60px;
    border-radius: 0 0 24px 24px;
    background-color: #fff;
    padding: 24px 32px;
}

.profile-main ul {
    display: flex;
    align-items: center;
    list-style: none;
}

.profile-main ul li {
    margin-left: 24px;
}

.profile-main ul li a {
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    text-align: right;
    color: #868e96 !important;
}

.profile-main ul a svg {
    margin-left: 8px;
}

.profile-main ul a.active {
    color: #6c6b8d !important;
}

.profile-main ul a.active svg path {
    stroke: #6c6b8d;
}

.profile-main ul a.active .with-fill path {
    fill: #6c6b8d;
}

.profile-main .why {
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    text-align: right;
    color: #18232f;
    margin-top: 42px;
}

.profile-main .profile-product {
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
}

.profile-main .profile-product .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-main .profile-product .head span {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 41px;
    text-align: right;
    color: #212529;
}

.profile-main .profile-product .head .sort {
    display: flex;
    align-items: center;
}

.profile-main .profile-product .head .sort span {
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    text-align: right;
    color: #868e96;
}

.profile-main .profile-product .head .sort select {
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    color: #2c6eba;
    border: none;
    outline: none;
    background-color: transparent;
    font-weight: 600;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("./assets/images/arr.png");
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: 12px;
    padding: 10px;
    padding-right: 20px;
}

.profile-main .profile-product .tabs {
    margin-top: 12px;
}

.profile-main .profile-product .tabs li {
    cursor: pointer;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 26px;
    color: #495057;
    padding-bottom: 7px;
    flex-shrink: 0;
}

.profile-main .profile-product .tabs .active {
    color: #2c6eba;
    border-bottom: 2px solid #2c6eba;
}

.profile-main .profile-product hr {
    margin-top: 2px;
    border: 1px solid #e2e8eb;
}

.profile-main .same-products-profile {
    margin-top: 0 !important;
}

.profile-main .flex-wrap {
    flex-wrap: wrap;
}

.profile-main .same-products-profile .card {
    margin-left: 16px;
}

.profile-main .p-baner {
    margin-top: 120px;
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
}

.profile-main .profile-baner {
    width: 100%;
    height: 262px;
    background: url("./assets/images/profile-baner.png");
    background-size: cover;
    padding: 63px 40px;
    display: flex;
    align-items: center;
    border-radius: 24px;
}

.profile-main .profile-baner .flex-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    width: 550px;
}

.profile-main .profile-baner .title {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 90px;
    line-height: 115px;
    text-align: right;
    color: #ffffff;
    display: block;
}

.profile-main .profile-baner .title span {
    color: #f29311;
}

.profile-main .profile-baner .content {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    line-height: 38px;
    text-align: left;
    color: #ffffff;
}

.profile-main .profile-baner .circle {
    width: 137px;
    height: 137px;
    border: 2px solid #f29311;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Rokh" !important;
    border-radius: 50%;
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 51px;
    color: #f29311;
    margin-right: 100px;
}

.gallery {
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 120px;
}

.gallery .head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid #adb5bd;
}

.gallery .head span {
    display: flex;
    align-items: center;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: right;
    color: #868e96;
    cursor: pointer;
}

.gallery .head .title {
    cursor: default;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 41px;
    text-align: right;
    color: #212529;
}

.gallery .head svg {
    margin-right: 8px;
}

.gallery .cards {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding: 0;
}

.gallery .cards .shadow {
    background: linear-gradient(180deg, rgba(33, 37, 41, 0) 0%, #212529 100%);
    border-radius: 16px;
    z-index: 999;
    position: absolute;
    top: 0;
    width: 244px;
    border-radius: 16px;
    height: 291px;
    left: 0;
}

.gallery .cards .card {
    padding: 0;
    width: 244px;
    height: 291px;
    margin-top: 32px;
    margin-left: 8px;
    position: relative;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: zoom-in;
}

.gallery .cards .card img {
    width: 244px;
    height: 291px;
    border-radius: 16px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.gallery .cards .card .text {
    z-index: 99999;
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    /* Colors/Grayscale Colors/10 */
    color: #ffffff;
}

.videos {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
}

.videos video {
    border-radius: 16px;
    padding: 0;
    width: 640px;
    max-height: 503px;
    margin-top: 32px;
}

.profile-main .certifs {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
}

.profile-main .certifs img {
    width: 310px;
    height: 428px;
    background: url(image.png);
    border-radius: 8px;
    margin-top: 32px;
}

.profile-main .comment-card .row-1 .right {
    height: unset !important;
}

.how-work-main .box {
    position: relative;
    max-width: 1300px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    background: center no-repeat url("./assets/images/bg-how.png");
    min-height: 470.2px;
    top: -100px;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.zi-9 {
    z-index: 2 !important;
}

.how-work-main .inp-div {
    position: relative;
}

.how-work-main .inp-div input {
    width: 860px;
    height: 68px;
    background: #ffffff;
    border-radius: 16px;
    z-index: 99999;
    padding: 0 64px;
    transition: all 0.3s;
}

.how-work-main .inp-div input:focus {
    box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
}

.how-work-main .inp-div svg {
    position: absolute;
    top: 18px;
    right: 18px;
}

.how-work-main .icons {
    display: flex;
    align-items: center;
}

.how-work-main .icons .cardd {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    margin-right: 20px;
    color: #495057;
}

.how-work-main .icons .icon-div {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition: all 0.3s;
    border-radius: 16px;
    margin-bottom: 16px;
    margin-top: 39px;
}

.how-work-main .icons .icon-div:hover {
    box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
}

.how-work-main .icons .card:first-child {
    margin-right: 0;
}

.accordian-div {
    max-width: 1300px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    width: 100% !important;
}

.accordion-button::after {
    left: 20px !important;
    position: absolute !important;
    content: "" !important;
    background-repeat: no-repeat !important;
    background-size: 1.25rem !important;
    transition: transform 0.2s ease-in-out !important;
}

.accordion-item {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
}

.accordion-button {
    width: 100% !important;
    background-color: transparent !important;
    padding: 32px 0 !important;
    font-family: "Rokh" !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 31px !important;
    text-align: right;
    color: #343a40;
}

@media (max-width: 1320px) {
    .certifs {
        width: 1040px;
        padding-bottom: 20px;
    }
    .certifs img {
        margin: 0 10px;
        width: 244px !important;
        height: 358px !important;
    }
    .profile-main {
        padding: 0 20px;
    }
    .profile-main .cards-1 .card {
        margin: 10px;
    }
    .images-cards {
        height: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(220px, 3fr)) !important;
        grid-gap: 40px;
        place-content: center;
    }
    .profile-main .profile-baner .title {
        font-size: 50px;
    }
    .profile-main .profile-baner .flex-end {
        align-items: flex-start;
        width: 400px;
    }
    .profile-main .profile-baner .circle {
        margin-right: 0;
    }
}

@media (max-width: 1200px) {
    .profile-main .cards-1 {
        flex-wrap: wrap;
        justify-content: center;
    }
    .profile-main .cards-1 .card {
        margin: 10px 50px;
    }
}

.profile-main .same-products-profile .card h6 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.show-mob-address {
    display: none;
}

.images-cards {
    flex-wrap: wrap;
}

#lightbox {
    z-index: 9999999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
}

#lightbox.active {
    display: flex;
}

#lightbox img {
    max-width: 90%;
    max-height: 80%;
}

@media (max-width: 992px) {
    .profile-main .same-products-profile .card h6 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .images-cards {
        padding-bottom: 20px !important;
    }
    .profile-main nav {
        display: none;
    }
    .profile-main .cards-1 .card {
        margin: 10px 20px;
    }
    .same-products-profile {
        flex-direction: column;
        align-items: center;
    }
    .profile-main .same-products-profile .card {
        width: 100%;
        max-width: 600px;
        height: 147px;
        display: flex;
        align-items: center;
        margin-right: 0 !important;
    }
    .same-products .card .img-div {
        width: 126px !important;
        min-width: 126px !important;
        padding: 8px;
        margin-right: auto;
        margin-left: auto;
    }
    .same-products .card .img-div img {
        width: 100%;
    }
    .profile-main .same-products-profile .card .shop {
        display: none;
    }
    .profile-main .profile-product .head {
        display: none;
    }
    .same-products .card .price span:first-child {
        color: #f79c1e;
    }
    .same-products .card .price {
        margin-top: 0;
    }
    .show-mob-address {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }
    .show-mob-address span {
        display: flex;
        align-items: center;
    }
    .show-mob-address span svg {
        margin-left: 8px;
    }
    .show-mob-address .rate svg {
        margin-left: 0;
        margin-right: 4px;
        margin-bottom: 6px;
    }
    .profile-main .user {
        flex-direction: column;
        top: -80px;
    }
    .profile-main .user .right {
        flex-direction: column;
        align-items: center;
    }
    .profile-main .user .right div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .mob-none-prof {
        display: none !important;
    }
    .profile-main .user .left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .profile-main .user .left .row-2 img {
        margin: 0 8px;
    }
    .profile-main .cards-1 {
        top: -20px;
        position: relative;
    }
    .images-cards {
        grid-template-columns: repeat(auto-fill, minmax(140px, 3fr)) !important;
        grid-gap: 40px;
        place-content: center;
    }
    .images-cards .card {
        max-width: 180px;
        max-height: 220px;
        margin: 10px !important;
    }
    .images-cards .card img {
        max-width: 180px;
        max-height: 220px;
    }
    .profile-main .profile-baner {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
    }
    .profile-main .profile-baner .title {
        font-size: 40px;
        line-height: 51px;
    }
    .profile-main .profile-baner .content {
        font-size: 16px;
        line-height: 20px;
    }
    .profile-main .profile-baner .flex-end {
        align-items: flex-start;
        width: 400px;
    }
    .profile-main .profile-baner .circle {
        margin-top: 20px;
        margin-right: 0;
    }
    .cardd-row .card {
        flex-direction: row;
    }
}

@media (max-width: 768px) {
    .profile-main .cards-1 .card {
        margin: 10px 20px;
        width: 195px;
        height: 96px;
    }
    .images-cards .card {
        max-width: 150px !important;
        max-height: 180px !important;
        margin-top: 10px !important;
    }
    .images-cards .card img {
        max-width: 150px !important;
        max-height: 180px !important;
    }
    .profile-main .cards-1 .card .circle {
        display: none;
    }
}

@media (max-width: 576px) {
    .profile-main .profile-baner .flex-end {
        align-items: flex-start;
        width: 280px;
    }
    .images-cards {
        grid-template-columns: repeat(auto-fill, minmax(130px, 3fr)) !important;
        grid-gap: 40px;
        place-content: center;
    }
    .profile-main .cards-1 .card {
        margin: 10px 10px;
    }
    .profile-main .prof-baner {
        flex-direction: column;
    }
    .profile-main .prof-baner .right svg {
        display: none;
    }
    .profile-main .prof-baner .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: auto;
        margin-left: auto;
    }
    .profile-main .prof-baner .right .span-1 {
        font-size: 24px;
        line-height: 31px;
        text-align: center !important;
    }
    .profile-main .prof-baner .right .span-2 {
        font-size: 16px;
        line-height: 25px;
    }
    .images-cards .card {
        max-width: 130px !important;
        max-height: 180px !important;
        margin-top: 10px !important;
    }
    .images-cards .card img {
        max-width: 130px !important;
        max-height: 180px !important;
    }
    .same-products .card .img-div {
        /* width: 76px !important;
        min-width: 76px !important;
        margin-left: 6px;
        padding: 8px; */
    }
    .profile-main .profile-product .tabs {
        display: none;
    }
    .show-mob-address span {
        font-size: 14px !important;
    }
    .no-p {
        padding: 0 !important;
    }
}


/* End Profile */


/* About Us */

.about-us {
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

.about-us .about-p {
    margin-top: 40px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 32px;
    text-align: right;
    color: #18232f;
}

.about-us .users {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.about-us .users .user-card {
    width: 310px;
    height: 183px;
    background: #f8f9fa;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 40px;
    cursor: pointer;
}

.about-us .users .user-card .span-1 {
    margin-top: 6px;
    margin-bottom: 8px;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 41px;
    text-align: center;
    color: #495057;
}

.about-us .users .user-card .span-2 {
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    color: #495057;
}

.about-us .users .user-card:hover {
    background: #ffffff;
    box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
    border-radius: 16px;
}

.about-us .users .user-card:hover span {
    color: #225591 !important;
}

.about-us .users .user-card:hover svg path {
    fill: #225591;
}

.mt-170 {
    margin-top: 170px;
}

.text-center {
    text-align: center !important;
}

.about-us .work-cards {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.about-us .work-cards .work-card {
    padding: 18px;
    width: 402px;
    height: 144px;
    border-radius: 16px;
    margin-top: 40px;
    cursor: pointer;
}

.about-us .work-cards .work-card:hover {
    box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
    background-color: #fff;
}

.about-us .work-cards .work-card .row-1 {
    display: flex;
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 31px;
    color: #225591;
}

.about-us .work-cards .work-card .row-1 svg {
    margin-left: 16px;
}

.about-us .work-cards .work-card p {
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    text-align: right;
    color: #495057;
    margin-top: 16px;
}

.about-us .manage-cards {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.about-us .manage-cards .manage-card {
    width: 310px;
    height: 233px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.about-us .manage-cards .manage-card:hover {
    background: #ffffff;
    box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
    border-radius: 16px;
}

.about-us .manage-cards .manage-card img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.about-us .manage-cards .manage-card .name {
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    margin-top: 8px;
    color: #274f76;
}

.about-us .manage-cards .manage-card .work {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    color: #868e96;
}

.about-us .manage-cards .manage-card p {
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    margin-top: 16px;
    color: #343a40;
}

.about-us .socials {
    height: 120px;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
}

.about-us .socials svg {
    margin: 0 14px;
}

.contact-us .map {
    display: flex;
    width: 100%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 76px;
}

.contact-us .map form {
    width: 49%;
    margin-right: 20px;
}

.contact-us .map form .inp-div {
    position: relative;
}

.contact-us .map form .inp-div svg {
    position: absolute;
    right: 23px;
    top: 22px;
}

.contact-us .map form .inp-div input {
    width: 640px;
    height: 70px;
    background: #ffffff;
    border: 1px solid #cfd8dc;
    border-radius: 9px;
    padding: 0 16px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    margin-bottom: 24px;
}

.contact-us .map form .inp-div select {
    width: 640px;
    height: 70px;
    background: #ffffff;
    border: 1px solid #cfd8dc;
    border-radius: 9px;
    padding: 0 16px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    margin-bottom: 24px;
}

.contact-us .map form .inp-div input::placeholder {
    color: #adb5bd;
}

.contact-us .map form textarea {
    width: 640px;
    height: 189px;
    background: #ffffff;
    resize: none;
    border: 1px solid #cfd8dc;
    padding: 20px;
    border-radius: 9px;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    /* identical to box height */
    text-align: right;
}

.contact-us .map form textarea::placeholder {
    color: #adb5bd;
}

.contact-us .map form .btn-div {
    display: flex;
    margin-top: 22px;
    justify-content: flex-end;
}

.contact-us .map form .btn-div button {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 23px;
    color: #ffffff;
    width: 200px;
    height: 53px;
    left: 70px;
    top: 1132px;
    /* Colors/SECONDARY Colors/Green/1 */
    background: #2e3b6a;
    border-radius: 16px;
}

.contact-us .call-ways {
    max-width: 1300px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.contact-us .call-ways .call-cards {
    display: flex;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 48px;
}

.contact-us .call-ways .call-cards .call-card {
    width: 310px;
    height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.contact-us .call-ways .call-cards .call-card:hover {
    background: #ffffff;
    box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
    border-radius: 16px;
}

.contact-us .call-ways .call-cards .call-card .span-1 {
    font-family: "Yekan Bakh" !important;
    font-size: 16px;
    line-height: 19px;
    color: #274f76;
    margin-top: 16px;
    margin-bottom: 4px;
}

.contact-us .call-ways .call-cards .call-card .span-2 {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    color: #868e96;
    margin-bottom: 5px;
}

.contact-us .call-ways .call-cards .call-card .number {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    text-align: center;
    color: #343a40;
}

.contact-us .call-ways .call-cards .call-card .email {
    font-family: "Rokh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    text-align: center;
    color: #343a40;
}

.contact-us .call-ways .call-cards .call-card .address {
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    color: #343a40;
}

@media (max-width: 1320px) {
    .contact-us .map {
        padding: 0 20px;
    }
    .mapouter,
    .gmap_canvas,
    .mapouter .gmap_iframe {
        width: 100% !important;
    }
    .contact-us .map form .inp-div input,
    .contact-us textarea {
        width: 100% !important;
        min-width: 400px;
    }
    .accordian-div {
        padding: 0 20px;
    }
    .about-us .about-p {
        padding: 0 20px;
    }
    .videos video {
        max-width: 640px;
        width: 48%;
        min-width: 244px;
        margin: 10px;
    }
    .videos {
        padding-bottom: 20px;
    }
}

@media (max-width: 992px) {
    .contact-us .map {
        flex-direction: column;
    }
    .mapouter {
        order: 1;
    }
    .contact-us .map form .inp-div input,
    .contact-us textarea {
        width: 100% !important;
        min-width: 100%;
    }
    .contact-us .map form {
        width: 100%;
        margin-right: 0;
    }
    .call-cards {
        flex-direction: column;
        align-items: center;
    }
    .map {
        margin-top: 40px !important;
    }
    .accordion-button {
        font-size: 20px !important;
        display: flex;
        align-items: flex-start !important;
        justify-content: space-between;
        text-align: right !important;
        padding: 16px 0 !important;
    }
    .accordion-button::after {
        position: static !important;
        margin-left: unset !important;
        margin-top: 5px;
    }
    .contact-us .map form .btn-div button {
        width: 100%;
        margin-bottom: 70px;
    }
    .contact-us .call-ways .call-cards .call-card {
        background-color: #fff;
    }
    .about-us .manage-cards {
        width: 1250px;
        padding-bottom: 20px;
    }
    .about-us .manage-cards .manage-card {
        background: #ffffff;
        box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
        border-radius: 16px;
        margin: 0 10px;
        margin-top: 20px;
        padding: 20px;
    }
    .how-work-main .inp-div {
        width: 97%;
    }
    .how-work-main .inp-div input {
        width: 100%;
    }
    .how-work-main .icons {
        max-width: calc(100vw - 20px);
        height: 200px;
    }
    .about-us {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
    .how-work-main .box {
        min-height: unset;
        position: relative;
        top: 0;
        margin-bottom: 50px;
    }
    .gallery {
        padding: 0 20px;
    }
    .gallery .head .title {
        font-size: 21px;
    }
}

@media (max-width: 768px) {
    .about-us .scrollable {
        padding: 0 10px;
    }
    .about-us .comments .comment-divs {
        width: 1300px;
        padding: 0;
        padding-bottom: 20px;
    }
    .work-cards {
        width: 1000px !important;
        padding-bottom: 20px;
        justify-content: flex-start !important;
    }
    .work-card {
        width: 299px !important;
        min-width: 299px !important;
        display: flex;
        height: 306px !important;
        background: #ffffff;
        box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
        border-radius: 24px;
        flex-direction: column;
        justify-content: center;
        margin: 0 10px !important;
        margin-top: 20px !important;
    }
    .about-us .work-cards .work-card .row-1 {
        flex-direction: column;
        align-items: center;
        color: #212529;
    }
    .about-us .work-cards .work-card svg {
        background: #ebf3fc;
        border-radius: 16px;
        padding: 20px;
        width: 88px;
        height: 88px;
        margin-bottom: 20px;
    }
    .about-us .work-cards .work-card p {
        text-align: center;
    }
    .about-p {
        display: none;
    }
    .about-p-2 {
        display: block;
        margin-top: 20px !important;
        font-size: 16px;
        line-height: 32px;
    }
    .about-us .users {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 40px;
    }
    .about-us .users .user-card {
        width: 151px;
        height: 183px;
        background: #ffffff;
        box-shadow: 0px 8px 12px rgba(207, 216, 220, 0.28), 0px 16px 32px rgba(207, 216, 220, 0.32);
        margin: 10px 36px;
    }
    .about-us .under-title {
        line-height: 26px;
    }
}

@media (max-width: 576px) {
    .new-size h3 {
        font-size: 29px;
    }
    .new-size h4 {
        font-size: 34px !important;
    }
    .new-f {
        font-size: 40px !important;
    }
    .new-size {
        margin-top: 80px;
    }
    .about-us .users .user-card {
        margin: 10px 10px;
    }
}


/*End About Us */

.profile-btn .dropdown-toggle::after {
    display: none;
}

.profile-btn .dropdown-menu {
    text-align: right;
}

.sort-product-select {
    border: none;
    outline: none;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.needs-validation {
    width: 500px;
}


/* Chat */

.chat-main {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    height: 100vh;
    overflow: auto;
    width: 0;
    overflow: hidden;
    transition: all 0.5s;
    width: 100%;
    max-width: 0;
    white-space: nowrap;
    scrollbar-width: thin !important;
    scrollbar-color: #eee !important;
}

.chat-show {
    max-width: 490px;
    white-space: wrap;
}

.chat-preview {
    white-space: nowrap;
    max-width: 332px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-main .accs {
    height: 100vh;
}

.chat-main .head-contact {
    background-color: transparent;
    border-bottom: none;
    display: flex;
    align-items: center;
    padding: 20px !important;
}

.chat-main .head-contact input {
    max-width: 361px;
    border-radius: 5px;
    background: #f3f6f9;
    font-size: 13px;
    height: 40px;
    border: none;
    padding-right: 40px;
}

.chat-main .head-contact input::placeholder {
    color: #aaa5a5;
}

.chat-main .head-contact .chat-search-svg {
    position: absolute;
    top: 11px;
    right: 16px;
}

.chat-main .flex-stack {
    justify-content: space-between;
    align-items: center;
}

.chat-main .num-badge {
    width: 28px;
    height: 28px;
    background: #50cd89;
    border-radius: 15px;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    text-align: right;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5px;
}

.chat-main .con-name {
    text-decoration: none;
    font-size: 16px !important;
}

.chat-main .text-muted {
    color: #aaa5a5;
    text-align: right;
    font-size: 14px;
}

.symbol-circle {
    position: relative;
}

.symbol .badge-green {
    background: #50cd89 !important;
    transform: translateX(110%) translateY(-57%) !important;
    right: 90% !important;
    position: absolute;
    border-radius: 100%;
    width: 6px;
    height: 6px;
}

.chat-main .time-chat {
    color: #868e96;
    font-size: 10px;
    font-weight: 500;
    margin-left: 20px;
}

.chat-main .msg-head {
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-main .msg-head .card-title {
    font-weight: 500;
    font-size: 1.275rem;
    color: #181c32;
    display: flex;
    align-items: center;
    margin: 0.5rem;
    margin-left: 0;
}

.bg-light-info {
    background-color: #f3f6f9 !important;
}

.bg-light-primary {
    background-color: #e7fafb !important;
}

.chat-main .chat-msgs {
    overflow: auto;
    height: 100vh;
}

.chat-main .msg-foot {
    position: sticky;
    bottom: 0;
    background-color: #fff;
}

.chat-main .ready-pms {
    border-bottom: 1px solid #eff2f5;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: auto;
    padding-bottom: 12px;
}

.ready-pms::-webkit-scrollbar {
    width: 12px;
    height: 9px;
}

.ready-pms::-webkit-scrollbar-thumb {
    background-color: #eee;
    border-radius: 20px;
    width: 5px;
}

.ready-pms svg {
    min-width: 24px;
}

.chat-main .ready-text {
    margin: 0 14px;
    cursor: pointer;
}

.chat-main .msg-text {
    color: #18232F;
    text-align: right;
    font-size: 14px;
    font-family: Yekan Bakh;
}

.add-text-modal {
    max-width: 400px;
    width: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #aaaa;
    padding: 20px;
}

.add-text-modal .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.add-text-modal .add-head {}

.scroll-y {
    overflow: auto;
    height: 100vh;
    padding-bottom: 30px;
}

.add-text-modal textarea {
    resize: none;
    border-radius: 8px;
    padding: 16px;
    width: 100%;
    border: 1px solid #ddd;
    margin-top: 30px;
}

.add-text-modal button {
    background-color: #10ca87;
    color: #fff;
    width: 100%;
    height: 40px;
    border-radius: 8px;
    margin-top: 12px;
}

.add-text-modal {}

.add-text-modal {}

.add-text-modal {}

.chat-main {}

.chat-main {}

@media (max-width: 500px) {
    .chat-preview {
        max-width: 220px;
    }
}


/* End Chat */

.header-row-2-index {
    /* padding-top: 10px; */
    /* padding-bottom: 10px; */
    align-items: center !important;
}

.header-row-2-index nav ul li {
    padding-bottom: 0 !important;
}

.header-row-2-index .menu {
    background-color: #ffff;
    display: none;
    /* display: flex; */
    position: fixed;
    width: 100%;
    max-width: 1300px;
    height: calc(70vh);
    z-index: 9999999;
    top: 113px;
    right: 50%;
    transform: translateX(50%);
    overflow: auto;
    border-top: 1px solid #adb5bd;
}

.directory-list .folder,
.directory-list .folder>a {
    color: #868e96;
    font-weight: unset;
}

.rules-sec {
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 40px;
    line-height: 30px;
    text-align: justify;
    padding: 0 5%;
}

#showProvincesName {
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
    z-index: 9999;
}

#map svg {
    height: auto;
}

#map svg path {
    fill: #BDBDBD;
}

#map svg path:hover {
    fill: #f79c1e !important;
    cursor: pointer !important;
}

#map svg .Island path {
    fill: #FFF;
}

#map svg .Sea .Caspian-Sea,
#map svg .Sea .Persian-Gulf {
    fill: #2196F3;
}

#map svg .Sea .Caspian-Sea:hover,
#map svg .Sea .Persian-Gulf:hover {
    fill: #2196F3 !important;
}

#map svg .Lake .Jaazmouriaan,
#map svg .Lake .Salt,
#map svg .Lake .Urmia {
    fill: #7ABCF1;
}

.rounded-border-12 {
    border-radius: 12px;
}

.my-loading-search-spiner {
    margin: 0 18px;
    line-height: 36px;
    color: #343a40;
    position: absolute;
    top: 18px;
    left: 0px;
}

.my-btn-search {
    margin: 0 18px;
    line-height: 36px;
    color: #343a40;
    position: absolute;
    top: 19px;
    left: 0px;
}

.my-btn-search i {
    cursor: pointer !important;
    color: rgb(255, 153, 0) !important;
    font-size: 20px !important;
}

.my-btn-search i:hover {
    cursor: pointer !important;
    color: #225591 !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.invalid {
    border: 1px solid red !important;
}

.p-baner img {
    width: 100% !important;
    height: 320px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
}

.show-desk-logo {
    width: 60px;
}

.show-mob-logo {
    display: none;
    width: 40px;
}

@media (max-width: 992px) {
    .show-mob-logo {
        display: block;
    }
    .show-desk-logo {
        display: none;
    }
}

@media (max-width: 550px) {
    .needs-validation {
        max-width: 500px;
        width: unset;
    }
}

.top-new-menu {
    top: 48px !important;
}

@media only screen and (max-width: 768px) {
    header .header-row-2 .left .profile-btn .name {
        display: none !important;
    }
}

.service-menu {
    background-color: #ffff;
    display: none;
    /* display: flex; */
    position: absolute;
    width: 100%;
    max-width: 1300px;
    height: calc(100vh);
    z-index: 9999999;
    top: 50px;
    overflow: auto;
    border-top: 1px solid #adb5bd;
}

.service-menu .right {
    width: 319px;
    min-width: 319px;
    background: #f8f9fa;
    padding: 20px;
    padding-left: 0;
    overflow: auto;
    direction: ltr;
}

.service-menu .right .head {
    direction: rtl;
    font-family: "Yekan Bakh" !important;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
    text-align: right;
    color: #868e96;
    border-bottom: 2px solid #e2e8eb;
    padding-bottom: 10px;
    margin-left: 20px;
}

.service-menu {
    cursor: default;
}

.service-menu .right ul {
    direction: rtl;
    width: 100%;
    padding-left: 0;
    flex-direction: column;
}

.service-menu .right ul li {
    display: flex;
    align-items: center;
    padding: 8px;
    position: relative;
    width: 100%;
    margin: 6px 0;
    padding-left: 0;
    margin-left: 0;
}

.service-menu .right ul li:first-child {
    margin-top: 24px;
}

.service-menu .right ul li span {
    margin-right: 14px;
}

.service-menu .right ul li .li-arr {
    position: absolute;
    left: 20px;
    display: none;
}

.service-menu .right ul li:hover+.left-service-menu {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(219px, 4fr)) !important;
}

.service-menu .right ul li:hover .li-arr {
    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    position: absolute;
    justify-content: flex-start;
    align-items: flex-start;
    right: 319px;
    top: 0;
    width: calc(100% - 319px);
    height: 70vh;
    overflow: auto;
}

.service-menu .right ul li:hover {
    background: linear-gradient(90deg, #f8f9fa 10px, #e2e8eb 100%);
    border-radius: 8px;
}

.service-menu .left-service-menu {
    padding: 30px 20px;
    /* display: flex; */
    display: none;
    flex-direction: column;
    height: 110%;
    flex-wrap: wrap;
    position: absolute;
    justify-content: flex-start;
    align-items: flex-start;
    right: 319px;
    top: 0;
    width: calc(100% - 319px);
}

.service-menu .left-service-menu:hover {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(219px, 4fr)) !important;
}

.service-menu .left-service-menu .left-list {
    width: 219px;
    margin: 6px;
    margin-bottom: 20px;
}

@media (max-width: 1065px) {
    .service-menu .right {
        width: 289px;
        min-width: 289px;
    }
    .service-menu .left-service-menu .left-list {
        width: 199px;
    }
}

.service-menu .left-service-menu .left-list .head {
    text-decoration: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #bfbfca;
    padding-bottom: 8px;
    cursor: pointer;
}

.service-menu .left-service-menu .left-list ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.service-menu .left-service-menu .left-list ul li {
    margin: 0;
    padding: 0;
    margin: 4px 0;
}

.service-menu .left-service-menu .left-list ul li:first-child {
    margin-top: 14px;
}

.service-menu .left-service-menu .left-list ul li a {
    text-decoration: none;
    font-weight: 400;
    font-size: 15px;
    color: #6c757d;
}

.header-row-2-index .service-menu {
    background-color: #ffff;
    display: none;
    /* display: flex; */
    position: fixed;
    width: 100%;
    max-width: 1300px;
    height: calc(70vh);
    z-index: 9999999;
    top: 113px;
    right: 50%;
    transform: translateX(50%);
    overflow: auto;
    border-top: 1px solid #adb5bd;
}

.profile-product .tabs {
    overflow-y: hidden;
    overflow-x: auto;
}

.profile-main .profile-product .tabs li {
    flex-shrink: 0;
}

.hovered {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

.h100dar {
    height: 100%;
}

.myvideos {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 5px;
    height: 300px;
}

.myvideos section {
    width: 50%;
    margin: 5px;
}

@media (max-width: 576px) {
    .myvideos {
        flex-direction: column;
    }
    .myvideos section {
        width: 100%;
    }
    .profile-main .p-baner {
        margin-top: 200px;
    }
}

.dropdown {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 999;
    border-radius: 5px !important;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
    border-radius: 5px !important;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.otp-form {
    direction: ltr;
    display: flex;
    flex-direction: column;
}

.otp-form .otp-field-parent {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px !important;
}

.otp-form .otp-field-parent .otp-field {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    font-size: 2rem;
    line-height: 4rem;
    text-align: center;
    border: none;
    border-bottom: 2px solid #9FA6B2;
    outline: none;
    background: #f8f9fa;
}

.otp-form .otp-field-parent .otp-field:focus {
    border-bottom-color: #332D2D;
}

.otp-form .alert-message {
    direction: rtl;
    padding-right: 10px !important;
}

.dir-ltr {
    direction: ltr !important;
}

.pl-2 {
    padding-left: .75rem !important;
}

.mt-8 {
    margin-top: 4rem !important;
}

.text-secondary-color {
    color: #7d7d7d !important;
}

.product .catalog {
    margin-top: 30px;
}

.product .catalog a {
    padding: 8px 12px;
    background-color: #f59d2e;
    border-radius: 8px;
    color: #ffffff !important;
}

.scrollable {
    position: relative;
}

.scroll-button {
    color: #15155b;
    position: absolute;
    top: 60%;
    transform: translateY(-40%);
    background: #f8f9fa;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 99;
}

#scrollLeft {
    left: 8rem;
}

#scrollRight {
    right: 8rem;
}

@media (max-width: 600px) {
    #scrollLeft {
        left: 2rem;
    }
    #scrollRight {
        right: 2rem;
    }
}

.justify-end {
    justify-content: flex-end;
}

.items-center {
    align-items: center;
}

.w-full {
    width: 100%;
}

.flex {
    display: flex;
}

.text-neutral-300 {
    color: #c2bcb4;
}

.text-body-2 {
    font-size: 1.2rem;
}

.text-body-2 {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 2.17;
}

.line-through {
    text-decoration-line: line-through;
}

.text-neutral-300 {
    color: #c0c2c5;
}

.ml-1 {
    margin-left: 4px;
}

.text-white {
    color: #e8e6e3;
}

.bg-hint-object-error {
    background-color: #a72323;
}

.px-1 {
    padding-left: 4px;
    padding-right: 4px;
}

.rounded-large,
.rounded-lg {
    border-radius: 16px;
}

.justify-center {
    justify-content: center;
}

.items-center {
    align-items: center;
}

.shrink-0 {
    flex-shrink: 0;
}

.flex {
    display: flex;
}

.mr-1 {
    margin-right: 4px;
}

.ProductPrice_ProductPrice__discountWrapper__1Ru_1 {
    height: 20px;
    width: auto;
}

.text-body2-strong {
    padding-top: 5px;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 2.17;
}

.slider-tooltip-action {
    position: relative;
    display: inline-block;
}

.slider-tooltip-action .slider-tooltip {
    visibility: hidden;
    min-width: 150px;
    background-color: black;
    opacity: 0.8;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    top: -50px;
    z-index: 1;
}

.slider-tooltip-action:hover .slider-tooltip {
    visibility: visible;
}

@media (max-width: 576px) {
    #header-search-box {
        display: none !important;
    }
}