/*#region fonts*/
@font-face {
    font-family: Persian-Thin;
    src: url("../fonts/Dana_32/Thin.ttf") format("truetype");
}

@font-face {
    font-family: Persian-ExtraLight;
    src: url("../fonts/Dana_32/UltraLight.ttf") format("truetype");
}

@font-face {
    font-family: Persian-Light;
    src: url("../fonts/Dana_32/Light.ttf") format("truetype");
}

@font-face {
    font-family: Persian-Normal;
    src: url("../fonts/Dana_32/Regular.ttf") format("truetype");
}

@font-face {
    font-family: Persian-Medium;
    src: url("../fonts/Dana_32/Medium.ttf") format("truetype");
}

@font-face {
    font-family: Persian-SemiBold;
    src: url("../fonts/Dana_32/DemiBold.ttf") format("truetype");
}

@font-face {
    font-family: Persian-Bold;
    src: url("../fonts/Dana_32/Bold.ttf") format("truetype");
}

@font-face {
    font-family: Persian-ExtraBold;
    src: url("../fonts/Dana_32/ExtraBold.ttf") format("truetype");
}

@font-face {
    font-family: Persian-Black;
    src: url("../fonts/Dana_32/Black.ttf") format("truetype");
}

/*#endregion fonts*/
/*#region base config*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    background-color: #FFFFFF;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: Persian-Normal;
    font-size: 16px;
    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */

    direction: rtl;
}

    /* Hide scrollbar for Chrome, Safari and Opera */
    body::-webkit-scrollbar {
        display: none;
    }

img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

a {
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}

    a:hover {
    }

li {
    list-style: none;
    cursor: pointer;
    transition: color 0.2s;
}

    li:hover {
    }

.position-relative {
    position: relative;
}

.display-none {
    display: none !important;
}

.width-100 {
    width: 100%;
}

/*#endregion base config*/
/*#region flex*/
.display-flex {
    display: flex !important;
}

.flex-row-center-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.flex-row-center-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.flex-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flex-col-center-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex-col-center-between {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.gap-16 {
    gap: 16px;
}

.gap-24 {
    gap: 24px;
}

.gap-32 {
    gap: 32px;
}

/*#endregion flex*/

/*#region body container*/
.body-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: auto;
}

.body-container-closed {
}

.body-container-opened {
    padding: 16px;
}

.body-container-image-top {
    width: 100%;
    height: 175px;
    position: fixed;
    top: 0px;
    object-position: top left !important;
}

.body-container-image-bottom {
    width: 100%;
    height: 175px;
    position: fixed;
    bottom: 0px;
    object-position: bottom left !important;
    z-index: 99;
    /* background-color: #FFFFFF; */
    background-color: transparent;
}

/*#endregion body container*/
/*#region header*/
header {
    position: relative;
    z-index: 100;
    background-color: #FFFFFF;
    padding: 16px;
}

.header-opened {
    position: fixed;
    top: 0px;
}

.header-logo-image-closed {
    width: 220px;
}

.header-logo-image-opened {
    width: 82px;
}
/*#endregion header*/
/*#region main*/
.btnShowMenu {
    margin-bottom: 16px;
    width: 175px;
    height: 51px;
    border-radius: 10px;
    border: 0.5px solid #F705AF;
    /* box-shadow: 0px -4px 0px 6px #FA56C9; */
    font-family: Persian-medium;
    /* font-family: Persian-Bold; */
    font-size: 30px;
    color: #F705AF;
    background-color: transparent;
    outline: none;
}

.item-cards-container {
    /*margin: 110px 0px 175px;*/
    margin: 115px 0px 178px;
}

.item-card-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.item-card-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.big-cloud {
    z-index: 10;
}

.small-cloud {
    z-index: 5;
    margin-right: -25px;
}

.big-cloud-text {
    font-family: Persian-Bold;
    font-size: 18px;
    color: #9C1215;
    position: absolute;
    top: 45px;
    right: 20px;
    z-index: 11;
}

.small-cloud-text {
    position: absolute;
    top: 31px;
    right: -3px;
    z-index: 11;
}

.small-cloud-price {
    font-family: Persian-SemiBold;
    font-size: 18px;
    color: #FC14B7;
}

.small-cloud-tooman {
    font-family: Persian-Medium;
    font-size: 10px;
    color: #9C1215;
}

/*#endregion main*/
/*#region footer*/
.footer-opened {
    position: fixed;
    z-index: 100;
    bottom: 16px;
}

.footer-link {
    position: relative;
    z-index: 100;
}

/*#endregion footer*/
/*#region showImage*/
.showImageContainer {
    background: rgba(0,0,0,.7) url('+src+') no-repeat center;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 10000;
}

.showImageCloseBtn{
    background-color:transparent;
    border:none;
    outline:none;
    position:absolute;
    top:32px;
    right:32px;
}

.showImage {
    width: 75vw;
    height: 75vw;
    max-width: 640px;
    max-height: 640px;
    border-radius: 50%;
}
/*#endregion showImage*/
