@font-face {
    font-family: 'Vazirmatn';
    src: url('../ttf/Vazirmatn-Medium.ttf') format('truetype');
    src: url('../ttf/Vazirmatn-Light.ttf') format('truetype');
}
.Copytext {
    color: var(--color-copytext-text);
    font-family: Vazirmatn;
    font-size: 1rem;
    line-height: 1.5rem
}

@media (min-width:960px) {
    .Copytext {
        font-size: 1.125rem;
        line-height: 1.75rem
    }
}

.Copytext p {
    margin-bottom: .75rem;
    margin-top: 0;
    text-align:justify;
    direction:rtl
}

    .Copytext p:last-child {
        margin-bottom: 0
    }

    .Copytext p .MediaElement {
        display: block;
        margin-bottom: .625rem
    }

@media (min-width:640px) {
    .Copytext p .MediaElement {
        margin-bottom: 0;
        width: 41.66667%
    }

        .Copytext p .MediaElement:not(.MediaElement--right-aligned) {
            float: left;
            margin-right: 1.25rem
        }

        .Copytext p .MediaElement.MediaElement--right-aligned {
            float: right;
            margin-left: 1.25rem
        }
}

@media (min-width:960px) {
    .Copytext p .MediaElement {
        width: 50%
    }
}

@media (min-width:1280px) {
    .Copytext p .MediaElement {
        width: 30rem
    }
}

.Copytext ol, .Copytext ul {
    counter-reset: ol;
    list-style-type: none;
    margin: 1.25rem 0 1.875rem;
    padding: 0
}

    .Copytext ol li, .Copytext ul li {
        counter-increment: ol;
        padding-left: 1.75rem;
        position: relative
    }

        .Copytext ol li:not(:last-child), .Copytext ul li:not(:last-child) {
            margin-bottom: .625rem
        }

    .Copytext ol:last-child, .Copytext ul:last-child {
        margin-bottom: 0
    }

    .Copytext ul li:before {
        background-color: currentColor;
        content: "";
        height: .3125rem;
        left: 0;
        position: absolute;
        top: 1.3ex;
        width: .3125rem
    }

    .Copytext ol li:before {
        color: currentColor;
        content: counters(ol,"") ".";
        font-size: 1rem;
        font-weight: 700;
        left: 0;
        position: absolute
    }

@media (min-width:1024px) {
    .Copytext ol li:before {
        line-height: 1.875rem
    }
}

.Copytext a:not(.ButtonIcon) {
    color: var(--color-copytext-link);
    -webkit-text-decoration: var(--copytext-link-decoration);
    text-decoration: var(--copytext-link-decoration);
    -webkit-transition: .2s ease;
    transition: .2s ease
}

    .Copytext a:not(.ButtonIcon):focus, .Copytext a:not(.ButtonIcon):hover {
        color: var(--color-copytext-link-hover);
        -webkit-text-decoration: underline;
        text-decoration: underline
    }

.Copytext--s {
    font-size: .875rem;
    line-height: 1.25rem
}

@media (min-width:640px) {
    .Copytext--s {
        font-size: 1rem;
        line-height: 1.5rem;
        text-align:center
    }
}

.Copytext--l {
    font-size: 1.25rem;
    line-height: 1.5rem
}

@media (min-width:960px) {
    .Copytext--l {
        font-size: 1.5rem;
        line-height: 1.875rem
    }
}

@media (min-width:640px) {
    .Copytext--columns-2, .Copytext--columns-3 {
        -webkit-column-gap: var(--grid-gutter);
        -moz-column-gap: var(--grid-gutter);
        column-gap: var(--grid-gutter)
    }

        .Copytext--columns-2 ol, .Copytext--columns-2 ul, .Copytext--columns-3 ol, .Copytext--columns-3 ul {
            margin-top: 0
        }

            .Copytext--columns-2 ol li, .Copytext--columns-2 ul li, .Copytext--columns-3 ol li, .Copytext--columns-3 ul li {
                -webkit-column-break-inside: avoid;
                -moz-column-break-inside: avoid;
                break-inside: avoid-column
            }

    .Copytext--columns-2 {
        -webkit-columns: 2;
        -moz-columns: 2;
        column-count: 2
    }

    .Copytext--columns-3 {
        -webkit-columns: 3;
        -moz-columns: 3;
        column-count: 3
    }
}