@font-face {
    font-family: "Material Symbols Outlined";
    font-style: normal;
    font-weight: 400;
    src: url("/_fonts/material-symbols-outlined.woff2") format("woff2");
}

.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
}

/* iran sans */
@font-face {
    font-family: 'iransansxv';
    src: url('/_fonts/IranSans-pro/Variable/webfont/IRANSansXV.woff2') format('woff-variations'),
        /* will be the standard and works in Safari now */
    url('/_fonts/IranSans-pro/Variable/webfont/IRANSansXV.woff') format('woff');
    /* for the other supporting browsers */
    font-weight: 100 900;
    font-display: fallback;

}
@font-face {
    font-family: iransansx;
    src: url('/_fonts/IranSans-pro/Variable/webfont/staticfonts/IRANSansX-Regular.woff') format('woff');
}
@font-face {
    font-family: iransansx;
    src: url('/_fonts/IranSans-pro/Variable/webfont/staticfonts/IRANSansX-Bold.woff') format('woff');
    font-weight: 700;
}

/* Noto Naskh Arabic */
@font-face {
    font-family: "Noto Naskh Arabic";
    font-display: swap;
    src: url("/_fonts/Noto-naskh-arabic/NotoNaskhArabic-VariableFont_wght.ttf")
    format("truetype");
}

:root {
    --primary-color: 22, 152, 0; /* #169800; green */
    --primary-color-2: 27, 182, 1; /* #1BB601 */
    --secondary-color: 255, 177, 61; /*#FFB13D; orange */
    --secondary-color-2: 242, 131, 0; /* #F28300; */
    /*--accent-color: ;*/
    /*--background-color: ;*/
    --background-box-color: 242, 242, 242; /* #F2F2F2 */
}

body {
    font-family: 'iransansxv', iransansx, "Noto Naskh Arabic", arial, sans-serif;
}

.payment-body {
    background: url("/_images/cityPictureGreen.png") bottom left / 45vw no-repeat,
    url("/_images/rectangle-88.svg") right 5% bottom 10% no-repeat,
    url("/_images/rectangle-89.svg") 5% 8% no-repeat,
    url("/_images/vector-smart-object.png") center center / 100vw no-repeat,
    white;
}

.card--width {
    max-width: 22.5rem;
    width: 100%;
}

.card--shadow {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}

.language-btn {
    border-radius: 8px 0px 8px 8px;
    font-size: 1rem;
}

.language-btn--bg {
    background: #FFB13D;
}

.input--border {
    border: 1px solid #F28300;
}

.pay__cols-2 {
    grid-template-columns: repeat(2, 50%);
}

.border-ten-px {
    border-radius: 10px;
}

@media screen and (min-width: 600px) {
    .payment-body {
        background: url("/_images/cityPictureGreen.png") bottom left / 35vw no-repeat,
        url("/_images/rectangle-88.svg") right 10% bottom 10% no-repeat,
        url("/_images/rectangle-89.svg") 10% 10% no-repeat,
        url("/_images/vector-smart-object.png") center center / 100vw no-repeat,
        white;
    }

    .card--width {
        max-width: 36rem;
        width: 100%;
    }
}