@keyframes l5 {
    0% {
        box-shadow: 9px 0#a7c6ff, -9px 0#3276f8;
        background: #a7c6ff
    }

    33% {
        box-shadow: 9px 0#a7c6ff, -9px 0#3276f8;
        background: #3276f8
    }

    66% {
        box-shadow: 9px 0#3276f8, -9px 0#a7c6ff;
        background: #3276f8
    }

    to {
        box-shadow: 9px 0#3276f8, -9px 0#a7c6ff;
        background: #a7c6ff
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes l7 {
    33% {
        background-size: 33.3333333333%0, 33.3333333333% 100%, 33.3333333333% 100%
    }

    50% {
        background-size: 33.3333333333% 100%, 33.3333333333%0, 33.3333333333% 100%
    }

    66% {
        background-size: 33.3333333333% 100%, 33.3333333333% 100%, 33.3333333333%0
    }
}

@keyframes wobble {
    0% {
        transform: rotate(-5deg)
    }

    to {
        transform: rotate(5deg)
    }
}

@keyframes fading {

    0%,
    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

#content {
    margin-top:115px
}



* {
    scroll-behavior: smooth;
    --sb-track-color: #e1e6f1;
    --sb-thumb-color: #b1bcd6;
    --sb-size: 8px
}

@media (min-width:1024px) {
    ::-webkit-scrollbar {
        width: var(--sb-size)
    }

    ::-webkit-scrollbar-track {
        background: var(--sb-track-color);
        border-radius: 5px
    }

    ::-webkit-scrollbar-thumb {
        background: var(--sb-thumb-color);
        border-radius: 5px
    }
}

@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color)
    }
}

#main-header .menu-item.has-children>a:first-child::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1rem
}

#main-header #menu {
    display: flex;
    align-items: center;
    background-color: #333648;
    border-radius: 30rem
}

#main-header .main-menu {
    display: flex;
    justify-content: center
}

#main-header .main-menu>.menu-item:not(:last-child):after {
    content: "|";
    position: absolute;
    left: 100%;
    color: #d6d6d6
}

#main-header .modal-overlay {
    position: absolute;
    display: none;
    inset: 0;
    z-index: 20;
    background-color: rgba(0, 0, 0, .4);
    backdrop-filter: blur(10px)
}

#main-header #mobile_nav .sub-menu {
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border-left: 1px solid rgba(255, 255, 255, .48)
}

#main-header .menu-1st-sub-li:hover .menu-1st-sub::after {
    display: block
}

#main-header .menu-1st-sub {
    transition: all .3s;
    position: relative
}

#main-header .menu-1st-sub::after {
    transition: all .3s;
    content: "";
    display: none;
    position: absolute;
    right: 100%;
    top: 0;
    bottom: 0;
    width: 2px;
    height: 100%;
    background: #00319c
}

#menu-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 160px;
    row-gap: 16px;
    margin-top: 16px
}

@media (max-width:984px) {
    #menu-footer {
        height: 300px
    }
}

#menu-footer .menu-item {
    font-size: 14px
}

#menu-footer .menu-item::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-left: .5rem;
    width: 1rem;
    height: 2px;
    background-color: #f5c181
}

.footer-mask {
    border: 2px solid;
    border-image-slice: 1;
    border-image-source: radial-gradient(47.55% 77.69%at 50% 110.19%, rgba(0, 49, 156, .24)0, rgba(0, 49, 156, 0) 100%)
}

@media (max-width:1024px) {
    .footer-mask {
        border-image-source: radial-gradient(97.55% 77.69%at 50% 110.19%, rgba(0, 49, 156, .24)0, rgba(0, 49, 156, 0) 100%)
    }
}

.post-content h2 a,
.post-content h3 a,
.post-content h4 a,
.post-content h5 a,
.post-content h6>a,
.post-content p a,
.product-post-content h2 a,
.product-post-content h3 a,
.product-post-content h4 a,
.product-post-content h5 a,
.product-post-content h6>a,
.product-post-content p a {
    position: relative;
    width: fit-content;
    display: inline-block;
    color: #007eff
}

.post-content h2 a::before,
.post-content h3 a::before,
.post-content h4 a::before,
.post-content h5 a::before,
.post-content h6>a::before,
.post-content p a::before,
.product-post-content h2 a::before,
.product-post-content h3 a::before,
.product-post-content h4 a::before,
.product-post-content h5 a::before,
.product-post-content h6>a::before,
.product-post-content p a::before {
    content: "";
    position: absolute;
    bottom: 4px;
    right: 0;
    width: 0;
    height: 1px;
    transition: width .3s;
    background-color: #0d539b
}

.post-content h2 a:hover,
.post-content h3 a:hover,
.post-content h4 a:hover,
.post-content h5 a:hover,
.post-content h6>a:hover,
.post-content p a:hover,
.product-post-content h2 a:hover,
.product-post-content h3 a:hover,
.product-post-content h4 a:hover,
.product-post-content h5 a:hover,
.product-post-content h6>a:hover,
.product-post-content p a:hover {
    color: #0d539b
}

.post-content h2 a:hover::before,
.post-content h3 a:hover::before,
.post-content h4 a:hover::before,
.post-content h5 a:hover::before,
.post-content h6>a:hover::before,
.post-content p a:hover::before,
.product-post-content h2 a:hover::before,
.product-post-content h3 a:hover::before,
.product-post-content h4 a:hover::before,
.product-post-content h5 a:hover::before,
.product-post-content h6>a:hover::before,
.product-post-content p a:hover::before {
    width: 100%
}

.post-content .social-container.show-social,
.product-post-content .social-container.show-social {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    right: calc(100% + 10px);
    min-width: 200px;
    z-index: 1
}

.post-content .blog-img-container img,
.product-post-content .blog-img-container img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: auto;
    display: block;
    border-radius: 10px
}

.post-content img,
.product-post-content img {
    margin: 20px auto
}

.post-content,
.product-post-content {
    background: #fff;
    border-radius: 10px;
    margin: 10px 0 20px
}

.post-content p:empty,
.product-post-content p:empty {
    display: none
}

.post-content h1,
.product-post-content h1 {
    text-align: right;
    font-size: clamp(1.5rem, 2vw + 1rem, 2.125rem);
    font-weight: 700;
    margin-bottom: 10px
}

.post-content h2,
.product-post-content h2 {
    text-align: right;
    font-size: clamp(1.125rem, 1.5vw, 1.875rem);
    font-weight: 700
}

.post-content h2:not(:first-of-type),
.product-post-content h2:not(:first-of-type) {
    margin-bottom: 10px;
    margin-top: 40px
}

.post-content h2:first-of-type,
.product-post-content h2:first-of-type {
    margin-bottom: 10px
}

.post-content h3,
.post-content h4,
.product-post-content h3,
.product-post-content h4 {
    text-align: right;
    font-size: clamp(1.125rem, 1.2vw, 1.5rem);
    font-weight: 700;
    margin-bottom: 10px
}

.post-content h4,
.product-post-content h4 {
    font-size: clamp(1rem, 1.1vw, 1.25rem)
}

.post-content h5,
.post-content h6,
.product-post-content h5,
.product-post-content h6 {
    text-align: right;
    font-size: clamp(1rem, 1vw, 1.125rem);
    font-weight: 700;
    margin-bottom: 10px
}

.post-content h6,
.product-post-content h6 {
    font-size: clamp(1rem, .9vw, 1rem)
}

.post-content li,
.post-content p,
.product-post-content li,
.product-post-content p {
    font-size: clamp(14px, 1vw, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: 37px;
    text-align: justify
}

.post-content p,
.product-post-content p {
    margin-bottom: 25px
}

.post-content li,
.product-post-content li {
    position: relative;
    margin: 5px 0;
    color: rgb(var(--color-darkest))
}

.post-content ol,
.product-post-content ol {
    position: relative;
    list-style-type: -moz-ethiopic-numeric;
    padding-right: 1.25rem
}

.post-content ul,
.product-post-content ul {
    position: relative;
    list-style-type: unset;
    list-style-position: inside;
    padding-right: 2.5rem;
    margin: 1rem 0
}

.post-content .wp-block-column,
.product-post-content .wp-block-column {
    padding: 10px
}

.post-content .blog-img-container,
.product-post-content .blog-img-container {
    border-radius: 10px
}

.post-content .squares-bottom,
.post-content .squares-left,
.post-content .squares-right,
.product-post-content .squares-bottom,
.product-post-content .squares-left,
.product-post-content .squares-right {
    width: 100vw
}

.post-content .faq .q-header h3,
.product-post-content .faq .q-header h3 {
    color: rgba(33, 33, 33, .92);
    font-weight: 500
}

.post-content table,
.product-post-content table {
    width: 100%;
    font-size: .9rem;
    margin: 2rem 0;
    table-layout: auto !important
}

@media (max-width:1024px) {

    .post-content table,
    .product-post-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap
    }
}

.post-content table tr:nth-child(2n),
.product-post-content table tr:nth-child(2n) {
    background-color: rgba(0, 126, 255, .06)
}

.post-content table,
.post-content table td,
.post-content table th,
.product-post-content table,
.product-post-content table td,
.product-post-content table th {
    border: 1px solid rgba(0, 49, 156, .21)
}

.post-content table td,
.post-content table th,
.product-post-content table td,
.product-post-content table th {
    padding: 1.25rem 1rem;
    text-align: center
}

.product-post-content h1,
.product-post-content h2,
.product-post-content h3,
.product-post-content h4,
.product-post-content h5,
.product-post-content h6 {
    color: #00319c
}

.swiper-custom-pagination .swiper-pagination-bullet {
    transition: all .5s
}

.swiper-custom-pagination .swiper-pagination-bullet-active {
    border-radius: 5rem;
    width: 2rem;
    background: #000
}

.mobile-search-results-box .search-item>a,
.search-results-box .search-item>a {
    background-color: #f3f8fd;
    padding: 1rem;
    border-radius: 10px;
    display: flex;
    gap: 1rem;
    font-size: 14px
}

.mobile-search-results-box .search-item>a img,
.search-results-box .search-item>a img {
    width: 50px;
    height: 50px
}

.qty[type=number]::-webkit-inner-spin-button,
.qty[type=number]::-webkit-outer-spin-button,
.single-qty[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.dot-loader {
    width: 6px;
    height: 6px;
    aspect-ratio: 1;
    border-radius: 50%;
    animation: l5 1s infinite linear alternate
}

.spinner {
    width: 48px;
    height: 48px;
    border: 5px solid #00319c;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite
}

.pulse-loader {
    display: inline-block;
    width: 40px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side, #ffffff 90%, #0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: 33.3333333333% 100%;
    animation: l7 1s infinite linear
}

.woocommerce-NoticeGroup {
    display: none
}

.woocommerce-pagination ul {
    display: flex;
    gap: 1rem;
    width: fit-content;
    margin: 0 auto;
    margin-top: 2rem
}

.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li span.current {
    background-color: #00319c;
    color: #fff
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    width: 3rem;
    height: 3rem;
    border: 1px solid #e4e9f4;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #575757;
    transition: all .1s
}

.woocommerce-breadcrumb {
    font-size: 14px;
    color: #575757
}

@media (max-width:1024px) {
    .woocommerce-breadcrumb {
        font-size: 10px
    }
}

.comment_container a {
    color: #3276f8
}

.commentlist .children {
    padding-right: 1rem
}

.commentlist .children>:not([hidden])~:not([hidden]) {
    margin-top: 1rem
}

@font-face {
    font-family: "AzarMehr";
    src: url(../fonts/AzarMehr/AzarMehr-FD[DSTY,KSHD,wght].woff2)format("woff2")
}

@font-face {
    font-family: "rokh";
    src: url(../fonts/Rokh/RokhFaNum-Black.woff2);
    font-weight: 900
}

@font-face {
    font-family: "rokh";
    src: url(../fonts/Rokh/RokhFaNum-ExtraBold.woff2);
    font-weight: 800
}

@font-face {
    font-family: "rokh";
    src: url(../fonts/Rokh/RokhFaNum-Bold.woff2);
    font-weight: 700
}

@font-face {
    font-family: "rokh";
    src: url(../fonts/Rokh/RokhFaNum-SemiBold.woff2);
    font-weight: 600
}

@font-face {
    font-family: "rokh";
    src: url(../fonts/Rokh/RokhFaNum-Medium.woff2);
    font-weight: 500
}

@font-face {
    font-family: "rokh";
    src: url(../fonts/Rokh/RokhFaNum-Regular.woff2);
    font-weight: 400
}

@font-face {
    font-family: "rokh";
    src: url(../fonts/Rokh/RokhFaNum-Light.woff2);
    font-weight: 300
}

:root {
    font-family: "AzarMehr", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif
}

.toast-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999
}

@media (max-width:1180px) {
    .toast-container {
        top: 20px;
        left: 50%;
        transform: translateX(-50%)
    }
}

.toast {
    min-width: 250px;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    opacity: 0;
    transform: translateX(-100%);
    transition: all .3s ease-in-out;
    display: flex;
    justify-content: space-between;
    align-items: center
}

@media (max-width:1180px) {
    .toast {
        transform: translateY(-100%)
    }
}

.toast.show {
    opacity: 1;
    transform: translateX(0)
}

.toast-success {
    background-color: #28a745
}

.toast-error {
    background-color: #dc3545
}

.toast-warning {
    background-color: #ffc107;
    color: #333
}

.toast-close {
    background: 0 0;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 0 5px;
    font-size: 18px;
    opacity: .7
}

.toast-close:hover {
    opacity: 1
}

.digits-form-container * {
    font-family: "AzarMehr", serif !important
}

.gift-text-first,
.gift-text-second {
    position: absolute;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    animation: fading infinite;
    animation-direction: alternate-reverse;
    animation-fill-mode: both;
    animation-duration: 3s
}

.gift-text-second {
    animation-direction: alternate
}

.percentage {
    animation: wobble 1s infinite;
    animation-direction: alternate-reverse;
    animation-delay: .5s
}

@media (max-width:1024px) {

    .mobile-gift-text,
    .percent-wrapper {
        position: absolute;
        white-space: nowrap;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        animation: fading 3s infinite;
        animation-direction: alternate-reverse
    }

    .mobile-gift-text {
        animation-direction: alternate
    }
}