@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/css/fonts/Vazirmatn-Regular.woff2') format('woff2')
}

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/css/fonts/Vazirmatn-Medium.woff2') format('woff2')
}

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/css/fonts/Vazirmatn-SemiBold.woff2') format('woff2')
}

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/css/fonts/Vazirmatn-Bold.woff2') format('woff2')
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
    font-family: 'Vazirmatn', sans-serif;
}

body {
    font-family: Vazirmatn,system-ui,sans-serif;
    font-feature-settings: 'ss01';
    line-height: 1.75;
    font-family: 'Vazirmatn', sans-serif;
}

.container-page {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 80rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

@media(min-width:640px) {
    .container-page {
        padding-left: 2rem;
        padding-right: 2rem
    }
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 9999px;
    background: #1f6690;
    padding: .75rem 1.5rem;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 10px 15px -3px rgb(31 102 144 / .25);
    transition: all .3s cubic-bezier(.22,1,.36,1)
}

    .btn-primary:hover {
        background: #1c5375;
        transform: translateY(-2px)
    }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 9999px;
    border: 1px solid #aed8ea;
    background: #ffffffb3;
    padding: .75rem 1.5rem;
    font-size: .875rem;
    font-weight: 600;
    color: #1c5375;
    transition: all .3s
}

.dark .btn-ghost {
    border-color: #1c4560;
    background: #1a3a5199;
    color: #f3ecdf
}

.card {
    border-radius: 1.5rem;
    border: 1px solid rgba(231,216,191,.7);
    background: #fff;
    padding: 1.75rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / .05);
    transition: all .3s cubic-bezier(.22,1,.36,1)
}

.dark .card {
    border-color: rgba(28,69,96,.7);
    background: rgba(26,58,81,.5)
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 9999px;
    background: #d6ecf5;
    padding: .375rem 1rem;
    font-size: .75rem;
    font-weight: 600;
    color: #1c5375
}

.dark .section-eyebrow {
    background: #1a3a51;
    color: #aed8ea
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
    will-change: opacity,transform
}

    .reveal.is-visible {
        opacity: 1;
        transform: none
    }

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none
    }
}

@media(max-width:1023px) {
    body {
        padding-bottom: 3.75rem
    }
}

::-webkit-scrollbar {
    width: 10px
}

::-webkit-scrollbar-thumb {
    background: #7dbedb;
    border-radius: 9999px
}

.dark ::-webkit-scrollbar-thumb {
    background: #1c4560
}



.pwt-datepicker,
.pwt-datepicker *,
.datepicker-plot-area,
.datepicker-plot-area * {
    font-family: "Vazirmatn", sans-serif !important;
}


/* Hide number spinner Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}