@font-face {
    font-family: 'IranSansWeb';
    src: url( '../Fonts/IRANSansWeb.woff2' ) format( 'opentype' );
}

@font-face {
    font-family: 'IranYekan';
    src: url( '../Fonts/IRANYekanMobile-Medium-a2a33a60.ttf' ) format( 'opentype' );
}

@font-face {
    font-family: 'VazirMatn';
    src: url( '../Fonts/Vazir.ttf' ) format( 'opentype' );
}

@font-face {
    font-family: 'Ordibehesht';
    src: url( '../Fonts/Ordibehesht.TTF' ) format( 'opentype' );
}

@font-face {
    font-family: 'badkhat2';
    src: url( '../Fonts/persian-badkhat2.ttf' ) format( 'opentype' );
}

@font-face {
    font-family: 'Lalehzar';
    src: url( '../Fonts/Lalezar-Regular.ttf' ) format( 'opentype' );
}

@font-face {
    font-family: 'Maktab';
    src: url( '../Fonts/MaktabRita-Regular.ttf' ) format( 'opentype' );
}

@font-face {
    font-family: 'Parastoo';
    src: url( '../Fonts/Parastoo.ttf' ) format( 'opentype' );
}

:root {
    color-scheme: light;
    --FontFamily: 'IranYekan';
    --width: 500px;
    --background: #333333;
    --BackgroundColor: #000000;
    --PrimaryColor: #ffd700;
    --TextColor: #fff;
    --SecondaryTextColor: #d1d1d1;
    --MenuButtonColor: #ffffff;
    --PriceColor: #fff;
    --DisscountColor: red;
    --FontSize: 2;
}

:root {
    --FontOffset: calc((var(--FontSize) - 2) * 0.4em);
    --MarginOffset: calc((var(--FontSize) - 2) * -2em);
    --BackgroundColorLight: color-mix(in srgb, var(--BackgroundColor) 85%, white);
    --BackgroundColorLighter: color-mix(in srgb, var(--BackgroundColor) 40%, white);
    --BackgroundColorDark: color-mix(in srgb, var(--BackgroundColor) 85%, black);
    --BackgroundColorDarker: color-mix(in srgb, var(--BackgroundColor) 40%, black);
    --PrimaryColorLight: color-mix(in srgb, var(--PrimaryColor) 85%, white);
    --PrimaryColorDark: color-mix(in srgb, var(--PrimaryColor) 85%, black);
    --PrimaryColorDarker: color-mix(in srgb, var(--PrimaryColor) 40%, black);
    --PrimaryColorLightest: color-mix(in srgb, var(--PrimaryColor) 45%, black);
    --PriceColorDark: color-mix(in srgb, var(--PriceColor) 80%, black);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    direction: rtl;
    font-family: var(--FontFamily);
    font-size: 1em
}


[x-cloak] {
    display: none !important;
}

:root {
    --MenuButtonColor: #D4B07D;
}

html {
    font-size: 17px;
}

html, body {
    font-family: 'Vazirmatn', system-ui, sans-serif;
    background: radial-gradient( circle at 10% 0%, rgba(var(--PrimaryColorRGB) / .18), transparent 38% ), radial-gradient( circle at 90% 15%, rgba(var(--PrimaryColorRGB) / .12), transparent 35% ), radial-gradient( circle at 50% 100%, rgba(var(--PrimaryColorRGB) / .10), transparent 45% ), linear-gradient( 135deg, rgba(var(--PrimaryColorRGB) / .05), transparent 40% ), var(--BackgroundColor);
    color: #F5F5F5;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    touch-action: manipulation;
    overflow: hidden;
}

body {
    display: flex;
    justify-content: center;
    min-height: 100dvh;
    margin: 0;
}

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

html {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.bg-custom-cover {
    background-size: cover;
    background-position: center;
}

.scroll-y {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.app-bg {
    background: radial-gradient( circle at 10% 0%, rgba(var(--PrimaryColorRGB) / .18), transparent 38% ), radial-gradient( circle at 90% 15%, rgba(var(--PrimaryColorRGB) / .12), transparent 35% ), radial-gradient( circle at 50% 100%, rgba(var(--PrimaryColorRGB) / .10), transparent 45% ), linear-gradient( 135deg, rgba(var(--PrimaryColorRGB) / .05), transparent 40% ), var(--BackgroundColor);
}
.sheet-bg {
    background: radial-gradient( circle at 10% 0%, rgba(var(--PrimaryColorRGB) / .18), transparent 38% ), radial-gradient( circle at 90% 15%, rgba(var(--PrimaryColorRGB) / .12), transparent 35% ), radial-gradient( circle at 50% 100%, rgba(var(--PrimaryColorRGB) / .10), transparent 45% ), linear-gradient( 135deg, rgba(var(--PrimaryColorRGB) / .05), transparent 40% ), var(--BackgroundColor);
}

.luxury-gradient {
    background: radial-gradient(ellipse 80% 60% at 15% 10%, rgba(212,176,125,0.15) 0%, transparent 55%), radial-gradient(ellipse 70% 60% at 85% 90%, rgba(184,147,95,0.12) 0%, transparent 55%), linear-gradient(135deg, #0a0a0a 0%, #14100c 25%, #0d0b09 50%, #14100c 75%, #0a0a0a 100%);
}

.btn-primary {
    background: linear-gradient(135deg, var(--PrimaryColor) 0%, var(--PrimaryColorDark) 50%, var(--PrimaryColorLight) 100%);
    color: #0a0a0a;
    font-weight: 800;
    border-radius: 1rem;
    box-shadow: 0 4px 14px rgba(212,176,125,0.22);
    transition: transform 0.15s ease, opacity 0.15s ease;
    touch-action: manipulation;
}

    .btn-primary:active {
        transform: scale(0.98);
        opacity: 0.95;
    }

    .btn-primary:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.mobile-container {
    height: 100dvh;
    width:100%;
    max-width:var(--width);
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/*    .mobile-container > div[x-show] {
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }*/

        .mobile-container > div[x-show] > main {
            flex: 1;
            overflow-y: auto !important;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            min-height: 0;
        }

.scroll-y {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.cat-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.06);
    transition: border-color 0.2s ease;
    isolation: isolate;
    opacity: 0;
    animation: cardEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

    .cat-card:nth-child(1) {
        animation-delay: 0.03s
    }

    .cat-card:nth-child(2) {
        animation-delay: 0.06s
    }

    .cat-card:nth-child(3) {
        animation-delay: 0.09s
    }

    .cat-card:nth-child(4) {
        animation-delay: 0.12s
    }

    .cat-card:nth-child(5) {
        animation-delay: 0.15s
    }

    .cat-card:nth-child(6) {
        animation-delay: 0.18s
    }

    .cat-card:nth-child(n+7) {
        animation-delay: 0.21s
    }

    .cat-card:active {
        transform: scale(0.98);
    }

    .cat-card:hover {
        border-color: rgba(212,176,125,0.4);
    }

.cats-swiper {
    width: 100%;
    padding: 4px 0 12px;
    overflow: visible;
}

    .cats-swiper .swiper-slide {
        width: 150px;
        height: 84px;
        transition: filter 0.3s ease;
        filter: brightness(0.5) saturate(0.6);
    }

@media (min-width: 500px) {
    .cats-swiper .swiper-slide {
        width: 170px;
        height: 96px;
    }
}

.cats-swiper .swiper-slide-active {
    filter: brightness(1) saturate(1);
}

.cat-slide {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: border-color 0.25s ease;
    isolation: isolate;
    background: none;
    padding: 0;
    touch-action: manipulation;
}

    .cat-slide.active {
        border-color: rgba(212,176,125,0.5);
    }

.product-card {
    position: relative;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 1rem;
    padding: 12px;
    display: flex;
    align-items: stretch;
    gap: 14px;
    text-align: right;
    width: 100%;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    overflow: hidden;
    touch-action: manipulation;
}

    .product-card:active {
        transform: scale(0.985);
        background: rgba(212,176,125,0.06);
    }

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-img-contain {
    object-fit: contain;
    padding: 12px;
}

.img-load-wrap {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
}

    .img-load-wrap img {
        opacity: 0;
        transition: opacity 0.35s ease;
        width: 100%;
        height: 100%;
    }

    .img-load-wrap.img-loaded img {
        opacity: 1;
    }

    .img-load-wrap .img-shimmer {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(212,176,125,0.12) 50%, transparent 100%);
        background-size: 200% 100%;
        animation: imgShimmer 1.4s linear infinite;
        transition: opacity 0.3s ease;
        pointer-events: none;
        z-index: 1;
    }

    .img-load-wrap.img-loaded .img-shimmer {
        opacity: 0;
    }

@keyframes imgShimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.product-enter {
    animation: pEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

.product-exit {
    animation: pExit 0.25s ease forwards;
}

@keyframes pEnter {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pExit {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-6px);
    }
}

@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.loading-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 60px 0;
}

    .loading-dots span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: linear-gradient(135deg, #E0C7A1, #B8935F);
        animation: loadDot 1.3s ease-in-out infinite;
    }

        .loading-dots span:nth-child(2) {
            animation-delay: 0.15s;
        }

        .loading-dots span:nth-child(3) {
            animation-delay: 0.30s;
        }

@keyframes loadDot {
    0%, 80%, 100% {
        transform: scale(0.5);
        opacity: 0.3;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.qty-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212,176,125,0.12);
    border: 1px solid rgba(212,176,125,0.25);
    color: #D4B07D;
    font-size: 16px;
    transition: transform 0.15s ease;
    touch-action: manipulation;
}

    .qty-btn:active {
        transform: scale(0.9);
    }

    .qty-btn:disabled {
        opacity: 0.3;
    }

.cart-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}

.cart-badge {
    position: absolute;
    top: -5px;
    left: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, #E0C7A1, #B8935F);
    color: #0a0a0a;
    font-size: 11px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen {
    position: fixed;
    inset: 0;
    z-index: 105;
    display: flex;
    justify-content: center;
}

.fullscreen-inner {
    width: 100%;
    max-width: var(--width);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background: #0a0a0a;
}

.pay-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 1rem;
    background: rgba(255,255,255,0.03);
    border: 1.5px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    touch-action: manipulation;
}

    .pay-option.selected {
        background: rgba(212,176,125,0.06);
        border-color: rgba(212,176,125,0.45);
    }

    .pay-option.disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.deliv-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 1rem;
    background: rgba(255,255,255,0.03);
    border: 1.5px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    touch-action: manipulation;
}

    .deliv-option.selected {
        background: rgba(212,176,125,0.06);
        border-color: rgba(212,176,125,0.45);
    }

.input-field {
    width: 100%;
    padding: 14px 16px;
    border-radius: 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    font-size: 13px;
    transition: border-color 0.2s ease;
    font-family: inherit;
    touch-action: manipulation;
}

    .input-field:focus {
        outline: none;
        border-color: rgba(212,176,125,0.5);
        background: rgba(255,255,255,0.05);
    }

    .input-field::placeholder {
        color: rgba(255,255,255,0.25);
    }

textarea.input-field {
    resize: none;
}

.step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.4);
    transition: all 0.25s ease;
}

    .step-dot.active {
        background: linear-gradient(135deg, #E0C7A1, #B8935F);
        border-color: #D4B07D;
        color: #0a0a0a;
    }

    .step-dot.done {
        background: #D4B07D;
        border-color: #D4B07D;
        color: #0a0a0a;
    }

.step-line {
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,0.06);
    transition: background 0.3s ease;
    border-radius: 2px;
}

    .step-line.done {
        background: #D4B07D;
    }

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 250;
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(20,20,20,0.95);
    border: 1px solid rgba(212,176,125,0.3);
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 32px);
    pointer-events: none;
}

.collection-anim {
    opacity: 0;
    animation: modalIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: opacity, transform, filter;
}

.collection-anim-1 {
    animation-delay: 1.5s;
}

.collection-anim-2 {
    animation-delay: 4.5s;
}

.collection-anim-3 {
    animation-delay: 3.6s;
}

.collection-anim-4 {
    animation-delay: 4s;
}

.collection-anim-5 {
    animation-delay: 5s;
}

.collection-anim-6 {
    animation-delay: 1.60s;
}

.collection-anim-7 {
    animation-delay: 1.90s;
}

.collection-anim-8 {
    animation-delay: 2.10s;
}

.collection-anim-9 {
    animation-delay: 2.40s;
}

.collection-anim-10 {
    animation-delay: 2.70s;
}

.collection-anim-11 {
    animation-delay: 3.00s;
}

@keyframes modalIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
        filter: blur(12px);
    }

    55% {
        opacity: 1;
        filter: blur(2px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.glass-pattern-layer {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(255,255,255,0.05), 0 25px 60px -12px rgba(0, 0, 0, 0.7);
    animation: PatternBluring 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    background: linear-gradient(135deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.02) 100%);
    animation-delay: 2s;
}
@keyframes PatternBluring{
    0% {
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }
    100% {
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
}

.glass-btn-pattern {
    position: relative;
    background: rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 10px 30px -10px rgba(0, 0, 0, 0.7);
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;
    isolation: isolate;
}

    .glass-btn-pattern:hover {
        background: rgba(212,176,125,0.12);
        border-color: rgba(212,176,125,0.4);
    }

.otp-input {
    width: 52px;
    height: 60px;
    border-radius: 0;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.08);
    border-left: none;
    text-align: center;
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    transition: background 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
    caret-color: #D4B07D;
    touch-action: manipulation;
    outline: none;
    padding: 0;
    -moz-appearance: textfield;
    position: relative;
}

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

    .otp-input.otp-first {
        border-radius: 16px 0 0 16px;
        border-left: 1.5px solid rgba(255,255,255,0.08);
    }

    .otp-input.otp-last {
        border-radius: 0 16px 16px 0;
    }

    .otp-input.filled {
        background: rgba(212,176,125,0.06);
    }

    .otp-input:focus {
        background: rgba(212,176,125,0.14);
        outline: 2px solid rgba(212,176,125,0.65);
        outline-offset: -2px;
        z-index: 2;
    }

@media (max-width: 400px) {
    .otp-input {
        width: 46px;
        height: 54px;
        font-size: 20px;
    }
}

@media (max-width: 360px) {
    .otp-input {
        width: 40px;
        height: 50px;
        font-size: 18px;
    }
}

.login-step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.4);
    transition: all 0.25s ease;
}

    .login-step-circle.active {
        background: linear-gradient(135deg, #E0C7A1, #B8935F);
        border-color: #D4B07D;
        color: #0a0a0a;
    }

    .login-step-circle.done {
        background: #D4B07D;
        border-color: #D4B07D;
        color: #0a0a0a;
    }

.status-badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-0 {
    background: rgba(234,179,8,0.12);
    color: #FBBF24;
    border: 1px solid rgba(234,179,8,0.25);
}

.status-1 {
    background: rgba(59,130,246,0.12);
    color: #60A5FA;
    border: 1px solid rgba(59,130,246,0.25);
}

.status-2 {
    background: rgba(34,197,94,0.12);
    color: #4ADE80;
    border: 1px solid rgba(34,197,94,0.25);
}

.status-3 {
    background: rgba(156,163,175,0.12);
    color: #9CA3AF;
    border: 1px solid rgba(156,163,175,0.25);
}

.status-4 {
    background: rgba(239,68,68,0.12);
    color: #F87171;
    border: 1px solid rgba(239,68,68,0.25);
}

.order-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 1rem;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

    .order-card:hover {
        border-color: rgba(255,255,255,0.12);
    }

@keyframes float {
    0%, 100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }
}

@keyframes pulse-slow {
    0%, 100% {
        opacity: 1
    }

    50% {
        opacity: 0.55
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-12px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes successPop {
    0% {
        transform: scale(0.4);
        opacity: 0
    }

    60% {
        transform: scale(1.1);
        opacity: 1
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translate(-50%,20px)
    }

    to {
        opacity: 1;
        transform: translate(-50%,0)
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

.animate-pulse-slow {
    animation: pulse-slow 3s ease-in-out infinite;
}

.animate-fade-in-down {
    animation: fadeInDown 0.4s ease forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 0.4s ease forwards;
}

.animate-slide-in {
    animation: slideIn 0.3s ease forwards;
}

.animate-success {
    animation: successPop 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}

.animate-toast {
    animation: toastIn 0.25s ease forwards;
}

.animate-spin {
    animation: spin 0.8s linear infinite;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.FAICON {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: var(--PrimaryColor);
    mask-image: url('/icons/my-icon.png');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url('/icons/my-icon.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

    .FAICON.clock-icon {
        mask-image: url('/public_theme/Release14050618/img/clock_icon.png');
        -webkit-mask-image: url('/public_theme/Release14050618/img/clock_icon.png');
    }

    .FAICON.phone-icon {
        mask-image: url('/public_theme/Release14050618/img/phoneicon.png');
        -webkit-mask-image: url('/public_theme/Release14050618/img/phoneicon.png');
    }

    .FAICON.instagram-icon {
        mask-image: url('/public_theme/Release14050618/img/instagram-icon.png');
        -webkit-mask-image: url('/public_theme/Release14050618/img/instagram-icon.png');
    }

    .FAICON.mapmarker-icon {
        mask-image: url('/public_theme/Release14050618/img/mapicon.png');
        -webkit-mask-image: url('/public_theme/Release14050618/img/mapicon.png');
    }

    .FAICON.left-icon {
        mask-image: url(/public_theme/Release14050618/img/left-icon.png);
        -webkit-mask-image: url(/public_theme/Release14050618/img/left-icon.png);
    }

    .FAICON.menu-icon {
        mask-image: url(/public_theme/Release14050618/img/menu_icon.png);
        -webkit-mask-image: url(/public_theme/Release14050618/img/menu_icon.png);
    }

    .FAICON.close-icon {
        mask-image: url(/public_theme/Release14050618/img/close_icon.png);
        -webkit-mask-image: url(/public_theme/Release14050618/img/close_icon.png);
    }