/*fonts load*/

@charset "UTF-8";
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Vazir-Medium-FD-WOL.woff2') format('woff2');
}


@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 600;
    font-display: swap;

    src: url('../fonts/Vazir-Bold-FD-WOL.woff2') format('woff2');
}

@font-face {
    font-family: 'fontello';
    src: url('../fonts/fontello.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-gear:before {
    content: '\e800';
}

/* '?' */
.icon-setting:before {
    content: '\e801';
}

/* '?' */
.icon-gear2:before {
    content: '\e802';
}

/* '?' */
.icon-star:before {
    content: '\e803';
}

/* '?' */
.icon-delivery:before {
    content: '\e804';
}

/* '?' */
.icon-box:before {
    content: '\e805';
}

/* '?' */
.icon-pay:before {
    content: '\e806';
}

/* '?' */
.icon-expert:before {
    content: '\e807';
}

/* '?' */
.icon-trust:before {
    content: '\e808';
}

/* '?' */
.icon-deliverybox:before {
    content: '\e809';
}

/* '?' */
.icon-money:before {
    content: '\e80b';
}

/* '?' */
.icon-lacation:before {
    content: '\e80c';
}

/* '?' */
.icon-gift:before {
    content: '\e80d';
}

/* '?' */
.icon-down:before {
    content: '\e80e';
}

/* '?' */
.icon-certifcate:before {
    content: '\e80f';
}

/* '?' */
.icon-support:before {
    content: '\e810';
}

/* '?' */
.icon-insta:before {
    content: '\e811';
}

/* '?' */
.icon-whatsapp:before {
    content: '\e812';
}

/* '?' */
.icon-telegram:before {
    content: '\e813';
}

/* '?' */
.icon-aparat:before {
    content: '\e814';
}

/* '?' */
.icon-robika:before {
    content: '\e815';
}

/* '?' */
.icon-headphone:before {
    content: '\e816';
}

/* '?' */
.icon-mail:before {
    content: '\e817';
}

/* '?' */
.icon-phone:before {
    content: '\e818';
}

/* '?' */
.icon-percent:before {
    content: '\e81a';
}

/* '?' */
.icon-expert-1:before {
    content: '\e81b';
}

/* '?' */
.icon-customer:before {
    content: '\e81c';
}

/* '?' */
.icon-left:before {
    content: '\e81e';
}

/* '?' */
.icon-right:before {
    content: '\e81f';
}

/* '?' */


/*root color*/
:root {
    --main: #D84D1B;
    --light: #0096AD;
    --text: #000000;
    --text2: #0A1729;
    --bg: #D84D1B;
    --text3: #666666;
}

a {
    color: unset;
}

/*root css*/
body {
    font-family: Vazirmatn;
    color: var(--text);
    padding: 0 !important;
    margin: 0 !important;
    line-height: 2rem;
    font-size: 0.95rem;
}
p{
    font-size: 0.94rem!important;
}
img {
    height: auto;
}

::-webkit-scrollbar {
    width: 0.5rem;
}

::-webkit-scrollbar-thumb {
    background: var(--main);
}

a {
    text-decoration: none;
}

.container-fluid, .row, ul {
    padding: 0;
    margin: 0;
}

.pd-0 {
    padding: 0;
    margin: 0;
}


/*header*/

ul.top-social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

ul.top-social li {
    padding: 1rem;
}


ul.top-social li i {
    background: #ffffff;
    margin: 0;
    padding: 0.5rem;
    border-radius: 50%;
    color: var(--main);
    transition: 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
}

header ul.top-social li i:hover {
    background: var(--main);
    color: white;
    transition: 0.5s;

}

.head-text a {
    color: var(--main);
}

.top-menu-wrapper {
    background: white;
    z-index: 999999999 !important;
    align-items: center;
    padding: 0.5rem;
    border-radius: 1rem;
    box-shadow: 0px 7px 29px 0px rgba(100, 100, 111, 0.20);
}

main {
    margin-top: -2rem;
}

.login a {
    background: var(--main);
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    transition: 1s;
}

.login a:hover {
    background: var(--light);
    transition: 1s;

}

/*text banner*/

.pm-label {
    color: var(--light);
    background: white;
    border: 1px solid var(--light);
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.h2-title {
    margin-top: 2rem;
    font-size: 1.37rem;
    font-weight: bold;
    line-height: 2.5rem;
}

.h2-title span {
    color: var(--main);
}

.p-sub {
    white-space: normal;
    margin: 1rem 0 2rem 0;
    text-align: justify;
    line-height: 2rem;
    color: var(--text2);
    padding: 0;
}

.text-banner-footer h3 {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: bold;
}

.text-banner-footer span {
    color: var(--main);
    padding: 0 0.5rem;
}

.text-banner-footer {
    border-top: 2px solid var(--main);
    padding-top: 1rem;
}

.calls a {
    margin: 0 1rem;
}

a.btn-prime {
    color: white;
    background: var(--main);
    padding: 0.5rem 1rem;
    display: inline-block;
    border-radius: 0.5rem;
    transition: 0.5s;
    font-size: 0.94rem;
}

a.btn-prime:hover {
    background: var(--light);
}

a.btn-secend {
    border: solid var(--main) 1px;
    color: var(--main);
    background: white;
    padding: 0.5rem 1rem;
    display: inline-block;
    border-radius: 0.5rem;
    transition: 0.5s;
}

a.btn-secend:hover {
    background: var(--main);
    color: white;
}

/*favor*/
.favor .pm-label {
    max-width: fit-content;
    margin: 0 auto;
}

.favor .h2-title {
    text-align: center;
}

.favor-item {
    box-shadow: 0px 7px 29px 0px rgba(100, 100, 111, 0.20);
    padding: 2rem;
    border-radius: 1rem;
}

.favor-item:hover > i:before {
    background: var(--main);
    color: white;
}

img.favor-icon {
    background: #F5EAE6;
    padding: 0.4rem;
    border-radius: 50%;
}

.favor-item h4 {
    line-height: 2.5rem;
    margin: 1rem 0;
    font-size: 18px;
    font-weight: bold;

    min-height: 80px;
    max-height: 80px;
}

.favor-item a {
    color: var(--main);
}

.text-banner ul {
    list-style: none;
    margin-right: 2rem;
}

.text-banner li:before {
    content: "\f00c";
    font-family: FontAwesome;
    display: inline-block;
    margin-left: calc(var(--icon-space) * -1);
    width: var(--icon-space);
    background: var(--light);
    color: white;
    padding: 0.3rem;
    border-radius: 50%;
    /* width: 2rem; */
    /* height: 2rem; */
    margin-left: 1rem;
    font-size: 0.75rem;
    line-height: 0.5rem;
}


.counter-icon {
    border: var(--main) 1px solid;
    padding: 0.5rem;
    border-radius: 50%;
    height: 60px;
    width: 60px;
    margin-right: 1rem;
}

.counter-item {
    border-right: 1px solid lightgray;
}

.counter-item:first-of-type {
    border: unset;
}

.p-slider-calls {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.p-slider-calls .item {
    display: flex;
    align-items: center;
}

.p-slider-calls .item img {
    height: fit-content;
}

.p-slider-calls .item div {
    padding: 0 1rem;
}

.p-slider-calls .item h4 {
    font-size: 1rem;
}

.p-slider-calls .item a {
    font-size: 1rem;
    color: unset;
}

.p-slider-calls .item h3 {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--main);
}

.agency-item img {
    filter: grayscale(0.5);
    transition: 0.5s;

}

.agency-item:hover > img {
    filter: grayscale(1);
    transition: 0.5s;

}

.agency-item:hover > .agency-label {
    opacity: 0%;
    transition: 0.5s;

}

.agency-item:hover > .agency-info {
    opacity: 1;
    transition: 0.5s;

}

.agency-info {
    opacity: 0;
    color: white;
    bottom: 0;
    padding: 1rem;
}

.agency-info h3 {
    font-size: 1.2rem;
    font-weight: 400;
}

.agency-info .tells {
    display: flex;
    justify-content: space-between;
}

.agency-label {
    transition: 0.5s;
    background: var(--light);
    top: 50%;
    color: white;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    height: 10rem;
    width: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.agency-label h3 {
    font-size: 1.2rem;
    font-weight: bold;
}

.agency-label p {
    margin: 0;
}


footer {
    background: var(--text2);
    color: white;
    margin-top: 3rem;
}

footer h3 {
    color: white;
    font-weight: 600;
}

footer ul.top-social li {
    text-align: center;
    background: white;
    margin-right: 0.5rem;
    border-radius: 100%;
    /* padding: 0.5rem; */
    width: 2.25rem;
    height: 2.25rem;
    transition: 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;

}

footer ul.top-social li a i {
    background: unset;
}

footer ul.top-social li:hover a i {
    color: white;
}

footer ul.top-social li:hover {
    background: var(--main);
}


footer h2 {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1rem;
}

.footer-menu ul {
    list-style: none;
    margin: 0;
}

.footer-menu ul li a {
    color: #ffffffb0;
    font-size: 14px;
}

.copyright a {
    color: var(--main);
}


.text-banner-footer i {
    color: var(--main);
    font-size: 2rem;
    padding: 0;
    margin: 0;
}


.favor-item i:before {
    font-size: 2.5rem;
    background: #F5EAE6;
    color: var(--main);
    /* padding: 0.65rem; */
    border-radius: 50%;
    transition: 0.5s;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.counter-item i {
    font-size: 3rem;
    color: var(--main);
    margin-right: 1rem;
}

.counter-item i:before {
    border: 1px solid var(--main);
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.p-slider-calls i {
    color: var(--main);
    font-size: 2rem;
    border-radius: 1rem;
    border: solid 1px var(--main);
    padding: 0.5rem 0.2rem;
    margin-bottom: 1rem;
}

footer ul.top-social i {
    padding: 0;
    font-size: 1.2rem;
}

.f-item i {
    font-size: 1rem;
    color: var(--main);
    margin-left: 0.5rem;
}

.f-item {
    color: white;
    padding-left: 2rem;
    margin: 0.5rem 0;
}

.cat-item span {
    background: white;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    color: var(--main);
    font-size: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cat-item:hover span {
    color: var(--light);
}

.cat-item h5 {
    color: white;
    position: absolute;
    bottom: 1rem;
    text-align: center;
    left: 50%;
    transform: translate(-50%, 0%);
}

/*i.icon-setting {*/
/*    background: white;*/
/*    height: 66px;*/
/*    width: 66px;*/
/*    border-radius: 50%;*/
/*    margin: auto;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

/*.cat-item span:after {*/
/*    position: absolute;*/
/*    content: "";*/
/*    height: 74px;*/
/*    width: 74px;*/
/*    background: var(--light);*/
/*    z-index: -2;*/
/*    bottom: 50%;*/
/*    right: -2px;*/
/*    !* border-radius: 50%; *!*/
/*    -webkit-clip-path: circle(50% at 50% 100%);*/
/*    clip-path: circle(50% at 50% 100%);*/
/*}*/


.serviceItem {
    display: flex;
    align-items: center;
    flex-direction: column;
}


img.discountImage {
    max-width: 90%;
}

.sliders-col .swiper-button-next:after {
    font-family: 'fontello';
    content: '\e81f';
    font-size: 2rem;
}

.sliders-col .swiper-button-prev:after {
    font-family: 'fontello';
    content: '\e81e';
    font-size: 2rem;
}

.sliders-col .swiper-button-next {
    right: 50% !important;
    top: 120%;
    color: var(--main);
    transform: translate(200%, 50%);
}

.sliders-col .swiper-button-prev {
    left: 50% !important;
    top: 120%;
    color: var(--main);
    transform: translate(-200%, 50%);
}


.serviceItem {
    border-right: 1px solid var(--main);
}

.serviceItem:first-of-type {
    border: unset;
}

.p-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-wrapper .pricebox del {
    font-size: 0.85rem;
    padding-left: 1rem;
}

.product-wrapper .pricebox del .woocommerce-Price-currencySymbol {
    display: none;
}

.product-wrapper .pricebox ins {
    text-decoration: none;
    color: var(--main);
    font-size: 1rem;
}

.product-wrapper .pricebox {
    float: left;
}

span.disc {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--main);
    padding: 0.25rem;
    color: white;
    border-radius: 0.5rem;
}

.exp {
    height: 4rem !important;
    line-height: 2rem;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    -ms-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.pw-img {
    border-radius: 1rem;
}

.favor2 .favor-item h4 {
    line-height: unset;
    margin: 0;
    margin-top: 1rem;
    font-size: 1rem;
}

.favor2 .p-sub {
    white-space: normal;
    margin: 1rem 0 2rem 0;
    text-align: justify;
    line-height: 2rem;
    color: var(--text2);
    padding: 0;

}

.favor2 .favor-item i {
    top: -1.5rem;
    font-size: 1.5rem;
    right: 1.5rem;
}

.swiper.myp-Swiper .swiper-slide-active {
    scale: 1.2;
    transition: 0.5s;
}

.swiper.myp-Swiper .swiper-slide {
    transition: 0.5s;
}

.swiper.myp-Swiper {
    padding: 2rem 0;
}

.footer-items {
    background: white;
    color: black;
    padding: 1.5rem 0;
    margin-top: -3rem;
}

.footer-items i:before {
    color: var(--main);
    width: 3rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}


.contact-about input#gform_submit_button_1 {
    width: 100%;
    border-radius: 1rem;
    border: unset;
    background: var(--main);
    color: white;
    padding: 0.25rem 0;
}

.contact-about .gform-body.gform_body input, .contact-about .gform-body.gform_body textarea {
    border-radius: 0.5rem;
    border: 1px solid #CACACA;
    color: var(--text3);
}


.c-form.contact-about {
    position: relative;
    margin-top: -33rem;
    z-index: 99999;
}

.c-form.contact-about .gform_wrapper {
    background: white;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}


.contact-form-2 h2.gform_title {
    text-align: center;
}

.contact-about input#gform_submit_button_2 {
    width: 100%;
    border-radius: 1rem;
    border: unset;
    background: var(--main);
    color: white;
    padding: 0.25rem 0;
}

.a-h-item {
    padding: 1rem;
    background: #E0E0E0;
    border-radius: 0.5rem;
    font-size: 0.7rem;
}

.a-h-expert p{
    margin: 0;
}

.exp p{
    margin: 0;
    padding: 0;
}

select.sf-input-select {
    padding: 0.7rem 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid lightgray;
    color: gray;
}

input.sf-input-text {
    padding: 0.3rem 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid lightgray;
}
select.sf-input-select option{
    color: black;
}
.searchandfilter ul{
    display: flex;
    justify-content: space-between;

}
.searchandfilter .noUi-connect{
    background-color: var(--light);
}

.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images {
    display: flex;
    flex-direction: row;
}


ol.flex-control-nav.flex-control-thumbs {
    width: 30%;
    list-style: none;
    overflow: hidden;
    overflow-y: auto;
    height: 350px;
}
.flex-viewport {
    width: 70%;
}

ol.flex-control-nav.flex-control-thumbs li{
    margin: 0.5rem 0;
    width: 100%;
}

nav.woocommerce-breadcrumb span:after {
    content: "/";
    display: inline-block;
    margin: 0 0.5rem;
    color: var(--main);
}
.short-info p.price {
    font-size: 2rem;
    color: var(--main);
}

button.single_add_to_cart_button.button.alt {
    margin: 1rem 0;
    border-radius: 0.5rem;
    border: unset;
    padding: 0.5rem 1rem;
    background: var(--main);
    color: white;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}



.quantity .input-text.qty.text {
    width: 40px;
    text-align: center;
}

input.qty_button.plus , input.qty_button.minus {
    background: var(--light);
    border: unset;
    color: white;
    width: 30px;
    border-radius: 0.25rem;
}

.sw-services:not:first-of-type{
    border-right:1px solid var(--main) ;
}

ul.tabs.wc-tabs {
    list-style: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    column-gap: 2rem;
    font-size: 1.2rem;
    font-weight: 600;
}
div#tab-test_tab {
    text-align: center;
}

.woocommerce-Tabs-panel {
    border: 1px solid var(--light);
    border-radius: 1rem;
    padding: 3rem;

}
.tabs.wc-tabs li.active {
    transition: 0.3s;
    background: var(--light);
    /* padding: 0; */
    margin: 0!important;
    color: white;
    border-radius: 0.5rem 0.5rem 0 0;
border: unset;
}
.tabs.wc-tabs li {
    transition: 0.3s;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--light);
}

td p{
    margin-bottom: 0;
}
table, th, td {
    border: none;
}
table {
    border-collapse: collapse;
}


th.woocommerce-product-attributes-item__label {
    width: 20%;
    padding: 0.5rem;
}

table.woocommerce-product-attributes.shop_attributes {
    width: 100%;
}

td.woocommerce-product-attributes-item__value {
    padding: 0.5rem;
}

textarea#comment {
    height: 5rem;
    width: 100%;
    border: lightgrey 1px solid;
}

#review_form input#submit {
    background: var(--main);
    color: white;
    border: unset;
    padding: 0.25rem 2rem;
    border-radius: 0.5rem;
}


a.ajax_add_to_cart.add_to_cart_button {
    background: #17A937;
    color: white;
    display: block;
    border-radius: 0.5rem;
    text-decoration: none;
}

a.view-more{
    background: var(--main);
    color: white;
    display: block;
    border-radius: 0.5rem;
    text-decoration: none;
}



.a-h-expert {
    height: 8rem;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    -ms-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}


/*  my account */
nav.woocommerce-MyAccount-navigation ul {
    list-style: none;
}
nav.woocommerce-MyAccount-navigation ul li {
    padding: 1rem;
    background: var(--main);
    border-bottom: white solid 1px;
}
nav.woocommerce-MyAccount-navigation ul li a {
    color: white;
}

.woocommerce-MyAccount-content a {
    color: var(--light);
}

/*# sourceMappingURL=my-account.css.map */
nav.woocommerce-MyAccount-navigation {
    width: 30%;
}
.woocommerce-MyAccount-content {
    width: 70%;
}
.my-ac-wr {
    display: flex;
    column-gap: 3rem;
}
.woocommerce table.shop_table {
    border: 1px solid black;
    border-collapse: collapse!important;

}

.woocommerce .col2-set, .woocommerce-page .col2-set {
    width: 100%;
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
    float: right;
    width: 48%;
}
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
    float: left;
    width: 48%;
}
h3#order_review_heading {
    display: block;
    width: 100%;
    float: left;
}

.table-parent {
    overflow: auto;
    overflow-y: hidden;
}

.main-table {
    min-width: 1200px;
}

.dropdown-item.active, .dropdown-item:active {
    color: var(--text2);
    background-color: unset;
}

#main-menu li.dropdown:hover .dropdown-menu {
    display: block;
}




.team-info {
    background: white;
    bottom: 0rem;
    left: 50%;
    width: 50%;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transform: translate(-50%, 0);
}

.team-wrapper.position-relative {
    padding-bottom: 2rem;
}

.product-wrapper h3 {
    font-size: 1.2rem;
    font-weight: bolder;
}
.woocommerce-product-gallery__wrapper img{
    width: 100%;
}
.exp p {
    margin: 0;
    padding: 0;
    font-weight: 100;
    color: gray;
}
.swiper-slide.serviceItem h3 {
    margin:  0.5rem 0;
    font-size: 1rem;
}


span.woocommerce-Price-amount.amount {
    color: var(--main);
}

.swiper.mysale h2 {
    height: 4rem;
}

td.woocommerce-product-attributes-item__value {
    border-right: 1px solid lightgray!important;
    padding-right: 1rem;
}

video#video-viewport {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 80vh;
}



.video-wrapper{
    height: 80vh;
    position: relative;
    width: 100%;
}


.slider-action {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    color: white;
}

.slider-action a {
    color: white;
    background: var(--main);
    padding: 0.5rem 1rem;
    display: inline-block;
    border-radius: 0.5rem;
    transition: 0.5s;
    font-size: 0.94rem;
    margin: 1rem 0;
}
.slider-action h1{
    font-size: 4rem;
    font-weight: 600;
}

.sticky-card {
    position: fixed;
    bottom: 5%;
    left: 2%;
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
}
.sticky-card a span {
    position: absolute;
    top: -1rem;
    left: -0.5rem;
}
ul.page-numbers {
    margin: 0 auto !important;
    margin-bottom: 5rem !important;
    width: 40%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    list-style: none;
}
ul.page-numbers li span{
    width: 2rem;
    display: block;
    text-align: center;
}
ul.page-numbers li span.page-numbers.current {
    background: var(--main);
    color: white;
    border-radius: 0.25rem;
}