@charset "UTF-8";

@font-face {
    font-family: 'reg';
    src: url("./font/Vazir.woff2") format("woff2"), url("./fonts/Vazir.woff") format("woff");
}

@font-face {
    font-family: 'med';
    src: url("./font/Vazir-Medium.woff2") format("woff2"), url("./fonts/Vazir-Medium.woff") format("woff");
}

@font-face {
    font-family: 'bold';
    src: url("./font/Vazir-bold.woff2") format("woff2"), url("./fonts/Vazir-bold.woff") format("woff");
}

@font-face {
    font-family: 'mont';
    src: url("./font/Montserrat-Bold.woff") format("woff");
}

.field-validation-error {
    color: red;
}

.fb {
    color: #0078d7 !important;
    background: rgba(0, 120, 215, 0.05) !important;
    border: 1px solid rgba(0, 120, 215, 0.2) !important;
    transition: all .2s ease;
}

    .fb:hover {
        color: white !important;
        background: #0078d7 !important;
    }

.ins {
    color: #e1306c !important;
    background: rgba(225, 48, 108, 0.05) !important;
    border: 1px solid rgba(225, 48, 108, 0.2) !important;
    transition: all .2s ease;
}

    .ins:hover {
        color: white !important;
        background: #e1306c !important;
    }

.vb {
    color: #59267c !important;
    background: rgba(89, 38, 124, 0.05) !important;
    border: 1px solid rgba(89, 38, 124, 0.2) !important;
    transition: all .2s ease;
}

    .vb:hover {
        color: white !important;
        background: #59267c !important;
    }

.wa {
    color: #128c7e !important;
    background: rgba(18, 140, 126, 0.05) !important;
    border: 1px solid rgba(18, 140, 126, 0.2) !important;
    transition: all .2s ease;
}

    .wa:hover {
        color: white !important;
        background: #128c7e !important;
    }

.sn {
    color: #f47721 !important;
    background: rgba(244, 119, 33, 0.05) !important;
    border: 1px solid rgba(244, 119, 33, 0.2) !important;
    transition: all .2s ease;
}

    .sn:hover {
        color: white !important;
        background: #f47721 !important;
    }

.tl {
    color: #0088cc !important;
    background: rgba(0, 136, 204, 0.05) !important;
    border: 1px solid rgba(0, 136, 204, 0.2) !important;
    transition: all .2s ease;
}

    .tl:hover {
        color: white !important;
        background: #0088cc !important;
    }

.call {
    color: #1e477a !important;
    background: rgba(30, 71, 122, 0.05) !important;
    border: 1px solid rgba(30, 71, 122, 0.2) !important;
    transition: all .2s ease;
}

    .call:hover {
        color: white !important;
        background: #1e477a !important;
    }

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input {
    outline: none !important;
    border: none;
}

a {
    text-decoration: none;
    color: #001334;
}

body {
    outline: none !important;
}

/* width */
::-webkit-scrollbar {
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    /*box-shadow: inset 0 0 5px grey;*/
    /*border-radius: 4px;*/
    /* background: #f1f1f1;  */
    background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(0, 19, 52, 0.35);
    border-radius: 10px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 19, 52, 0.45);
    }

button,
input {
    font-family: reg;
    background-color: transparent;
    outline: none;
    font-size: .95rem;
}

select {
    appearance: none;
}

* {
    box-sizing: border-box !important;
}

select {
    font-family: reg !important;
    font-size: 0.85rem;
    border: 1px solid rgba(46, 41, 78, 0.13);
    padding: .5rem 1rem .5rem 2.5rem;
    background-color: #fff;
    width: 100% !important;
    min-width: 140px;
    max-width: 100% !important;
    outline: none !important;
}

@media screen and (max-width: 1000px) {
    select {
        border-radius: 5px;
    }
}

@media screen and (min-width: 900px) {
    .select-box {
        margin-left: 1rem;
    }
}

hr {
    color: #db3552;
    border: 0;
    height: 1px;
    width: 100%;
    margin: 1.5rem 0;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(96, 107, 127, 0.1), rgba(0, 0, 0, 0));
}

.select2-container--default .select2-selection--single {
    border: 1px solid rgba(46, 41, 78, 0.13);
}

.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 10px;
    padding-left: 23px;
    line-height: 33px;
}

.select2-container .select2-selection--single {
    height: 33px;
    font-size: .9rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    padding: 0 1rem;
    height: 33px;
}

.select2-dropdown {
    border: 1px solid rgba(46, 41, 78, 0.13);
    font-size: .9rem;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid rgba(46, 41, 78, 0.13);
    padding-right: .5rem;
    border-radius: 4px;
}

body {
    direction: rtl;
    font-size: 100%;
    line-height: 1.2;
    font-family: 'reg', 'Segoe UI', Tahoma, Verdana, sans-serif, sans-serif;
    background-color: #fcfcfc;
    text-decoration: none;
    color: #001334;
    list-style: none;
}

.wrap {
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
}

button {
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

main {
    margin: 10rem 0 4rem;
    min-height: 70vh;
}

@media screen and (max-width: 900px) {
    main {
        margin: 6rem 0 4rem;
    }
}

@media screen and (max-width: 700px) {
    main {
        margin: 4rem 0 10rem;
    }
}

.form-wrap {
    max-width: 600px;
    width: 95%;
    margin: 0 auto;
}

.single {
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
}

input:focus {
    color: #212529;
    border-color: #a3c8ff9a !important;
    border-width: 2px;
    outline: 0;
    box-shadow: 0 0 0 0.2rem RGB(13 110 253/25%);
}

.bg_img {
    position: fixed;
    top: 0;
    z-index: -1;
    height: 100vh;
    width: 100%;
    padding-top: 15px;
    background-image: url(../../images/asset/detailbg.svg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    object-fit: fill;
}

.bg_art {
    position: fixed;
    top: 0;
    z-index: -1;
    height: 100vh;
    width: 100%;
    opacity: .2;
    margin-top: 3rem;
    background-image: url(../../images/asset/bg3.svg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    object-fit: cover;
}

.bg_404 {
    position: fixed;
    top: 0;
    z-index: -1;
    height: 100vh;
    width: 100%;
    opacity: .1;
    background-image: url(../../images/asset/404.svg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
}

.err_box {
    background: rgba(219, 53, 82, 0.02);
    display: flex;
    gap: 1rem;
    padding: .85rem 1rem .6rem;
    border: 1px solid rgba(219, 53, 82, 0.1);
    color: #db3552;
    border-radius: 6px;
    margin-bottom: 1rem;
    width: max-content;
}

    .err_box .err_ico {
        animation: spinnerThree 1s linear infinite;
    }

.radio_box {
    display: grid;
    grid-gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-auto-rows: auto;
}

@media screen and (max-width: 700px) {
    .radio_box {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        grid-auto-rows: auto;
    }
}

.radio_box label {
    display: flex;
    cursor: pointer;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.375em;
    /* Accessible outline */
    /* Remove comment to use */
    /*
  	&:focus-within {
  			outline: .125em solid $primary-color;
  	}
  */
}

    .radio_box label input {
        position: absolute;
        left: 9999px;
    }

        .radio_box label input:checked + span {
            background-color: rgba(219, 53, 82, 0.07);
            color: #001334;
        }

            .radio_box label input:checked + span:before {
                box-shadow: inset 0 0 0 0.4375em #db3552;
            }

    .radio_box label span {
        display: flex;
        width: 100%;
        direction: ltr;
        justify-content: space-between;
        align-items: center;
        padding: 0.5em 1.2rem 0.5em .55rem;
        border-radius: 99em;
        white-space: nowrap;
        background-color: #f9f9f9;
        transition: 0.25s ease;
    }

        .radio_box label span:hover {
            background-color: rgba(219, 53, 82, 0.07);
        }

        .radio_box label span:before {
            display: flex;
            flex-shrink: 0;
            content: "";
            background-color: #fff;
            width: 1.5em;
            height: 1.5em;
            border-radius: 50%;
            margin-right: 0.375em;
            transition: 0.25s ease;
            box-shadow: inset 0 0 0 0.125em rgba(0, 19, 52, 0.3);
        }

header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    box-shadow: 0 1px 1px 0 rgba(46, 41, 78, 0.05);
    z-index: 850 !important;
}

#mast-head {
    transition: top .5s ease;
    background-color: white;
    direction: rtl;
}

@media screen and (max-width: 900px) {
    .lg_show {
        display: none;
    }
}

.selected {
    color: #db3552 !important;
    position: relative;
}

    .selected a {
        color: #db3552 !important;
    }

    .selected i {
        color: #db3552 !important;
    }

    .selected::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        height: 2.5px;
        width: 100%;
        border-radius: 8px 8px 0 0;
        background: #db3552;
    }

.header {
    display: flex;
    align-items: center;
    padding: 1rem 0;
}

@media screen and (max-width: 700px) {
    .header {
        padding: .8rem 0;
    }
}

.header-search {
    flex-grow: 1;
    background-color: #fff;
    padding-left: 3rem;
}

    .header-search form {
        display: flex;
        align-items: center;
        position: relative;
    }

        .header-search form .search_input {
            border: none;
            max-width: 400px;
            width: 100%;
            border: 1.5px solid rgba(46, 41, 78, 0.13);
            background-color: rgba(46, 41, 78, 0);
            border-radius: 5px;
            padding: 0.28rem 3rem;
            transition: all .3s ease;
        }

            .header-search form .search_input::placeholder {
                font-family: reg;
            }

            .header-search form .search_input:focus {
                border-color: rgba(46, 41, 78, 0.13);
            }

            .header-search form .search_input:focus {
                width: 100%;
            }

        .header-search form .search_submit {
            position: absolute;
            right: 0.7rem;
            font-size: 1.1rem;
            color: #2E3C51;
            background-color: transparent;
            cursor: pointer;
        }

    .header-search .search_close {
        display: none;
        color: #db3552;
    }

@media screen and (max-width: 900px) {
    .header .header-search {
        position: absolute;
        top: -110px;
        right: 0;
        left: 0;
        padding: .6rem 1rem .5rem;
        transition: all 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    }

        .header .header-search form {
            padding-right: 0;
        }

            .header .header-search form .search_input {
                max-width: 100%;
                padding: 0.5rem 3rem;
                padding-right: 5rem;
                border: 2px solid #e0e4f698;
                background-color: rgba(46, 41, 78, 0);
            }

            .header .header-search form .search_submit {
                right: 2.6rem;
            }

            .header .header-search form .search_close {
                position: absolute;
                display: initial;
                font-size: 1.5rem;
                right: 12px;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                cursor: pointer;
            }

    .header .see {
        transform: translateY(112px);
    }
}

.header .see {
    transform: translateY(112px);
}

.header-btn {
    display: flex;
    align-items: center;
    margin-right: auto;
}

    .header-btn a.req-btn {
        display: none;
    }

    .header-btn a {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        border: none;
        vertical-align: middle;
        text-align: center;
        text-overflow: ellipsis;
        text-transform: uppercase;
        font-size: 14px;
        overflow: hidden;
        outline: none;
        cursor: pointer;
        color: white;
        background-color: #db3552;
        border-radius: 4px;
        justify-content: space-between;
        padding: 0.3rem 0.5rem;
        flex-shrink: 0;
        margin-right: 1rem;
        cursor: pointer;
    }

@media screen and (max-width: 1000px) {
    .header-btn a {
        border-radius: 4px;
    }
}

.header-btn a span {
    padding: 0 0.7rem;
}

.header-btn a i {
    font-size: 1.3rem;
}

@media screen and (min-width: 700px) {
    .header-btn .search_btn {
        display: none;
        border: none !important;
    }
}

@media screen and (max-width: 1000px) {
    .header-btn a {
        border-radius: 3px;
    }

        .header-btn a.add_btn {
            display: none;
        }

        .header-btn a.req-btn {
            display: inherit !important;
            padding: 0.5rem 0;
        }

            .header-btn a.req-btn i {
                display: none;
            }
}

@media screen and (max-width: 700px) {
    .header-btn a {
        padding: 0.3rem 0.45rem;
        margin-right: 0.8rem;
        background-color: #f8f8f9;
        color: #001334;
        border-radius: 40px !important;
        background-color: rgba(219, 53, 82, 0.05);
        color: #db3552;
        border: 1.5px solid rgba(219, 53, 82, 0.07);
        border-radius: 4px;
    }
}

@media screen and (max-width: 700px) and (max-width: 1000px) {
    .header-btn a {
        border-radius: 4px;
    }
}

@media screen and (max-width: 700px) {
    .header-btn a.login_btn span,
    .header-btn a.search_btn span {
        display: none;
    }
}

.see {
    transform: translateY(112px);
}

.home-logo {
    font-family: mont;
    font-size: 1.5rem;
    color: #db3552;
    margin-right: auto;
    padding-top: .25rem;
}

    .home-logo span {
        color: #2E3C51;
    }

@media screen and (max-width: 700px) {
    .home-logo {
        font-size: 1.4rem;
    }
}

.lang-btn:hover .select-lang {
    visibility: visible;
    opacity: 1;
}

.btns {
    margin-left: 1rem;
    cursor: pointer;
    position: relative;
    background: rgba(46, 41, 78, 0);
    border: 1px solid rgba(46, 41, 78, 0.13);
    border-radius: 4px;
    padding: .25rem .5rem .2rem .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #001334;
}

@media screen and (max-width: 900px) {
    .btns {
        background-color: transparent;
        border: none;
        margin-left: 1.5rem;
        padding: 0;
    }
}

.btns i,
.btns img {
    display: flex;
    align-items: center;
    height: 25px;
    border-radius: 3px;
    font-size: 1.3rem;
    color: #2E3C51;
}

.btns .btn-txt {
    margin-left: .8rem;
    margin-right: .2rem;
    font-size: .9rem;
    white-space: nowrap;
}

.btns .select-lang {
    position: absolute;
    top: 120%;
    right: -1px;
    width: 100px;
    background-color: #fff;
    border: 1px solid #e0e4f698;
    padding: .4rem 0;
    opacity: 0;
    border-radius: 3px;
    overflow: hidden;
    z-index: 999;
    visibility: hidden;
    font-size: .85rem;
    transition: all .3s ease;
}

    .btns .select-lang li:hover a {
        background-color: rgba(46, 41, 78, 0);
    }

    .btns .select-lang li a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .3rem .5rem .1rem;
        transition: all .3s ease;
    }

@media screen and (min-width: 900px) {
    .search-btn {
        display: none;
    }
}

@media screen and (max-width: 1100px) {
    .lang-btn .btn-txt {
        display: none;
    }
}

.login-btn,
.shop-cart-btn,
.menu_bg {
    background: rgba(219, 53, 82, 0.02);
    color: #db3552;
    border: 1px solid rgba(219, 53, 82, 0.3);
}

    .login-btn i,
    .shop-cart-btn i,
    .menu_bg i {
        color: currentColor;
    }

@media screen and (max-width: 900px) {
    .login-btn,
    .shop-cart-btn,
    .menu_bg {
        display: none;
    }
}

.sub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .sub-header .cart-confirm {
        margin: 0 0 .7rem;
        width: 100%;
        box-shadow: none;
        padding: 0;
    }

@media screen and (min-width: 600px) {
    .sub-header .cart-confirm {
        margin-top: .8rem;
    }
}

.sub-header .cart-confirm .confirm-info {
    padding: .8rem 0;
}

.sub-header .cart-confirm .confirm-btn {
    border-radius: 4px !important;
    padding: .7rem 0;
    justify-content: space-between;
}

    .sub-header .cart-confirm .confirm-btn > * {
        margin: 0 1rem;
    }

@media screen and (min-width: 900px) {
    .sub-header .cart_top {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .sub-header .cart_top {
        margin-top: .5rem;
    }
}

.sub-header .nav-bar {
    display: flex;
    flex-grow: 1;
    padding-top: .5rem;
}

@media screen and (max-width: 900px) {
    .sub-header .nav-bar {
        display: none;
    }
}

.sub-header .nav-bar .nav-call {
    margin-right: auto;
    margin-left: 0;
}

    .sub-header .nav-bar .nav-call::after {
        display: none;
    }

    .sub-header .nav-bar .nav-call a {
        display: flex;
        align-items: center;
        direction: ltr;
    }

        .sub-header .nav-bar .nav-call a i {
            margin-right: 0.7rem;
            color: #db3552;
            font-size: 1rem;
        }

.sub-header .nav-bar li {
    margin-left: 2rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    padding: 0.5rem 0 1rem;
}

    .sub-header .nav-bar li:after {
        content: '';
        display: block;
        width: 80%;
        height: 2px;
        position: absolute;
        bottom: 0;
        left: 10%;
        border-radius: 8px 8px 0 0;
        background: #db3552;
        transform: scaleX(0);
        pointer-events: none;
        transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .sub-header .nav-bar li:hover::after {
        transform: scaleX(1);
        opacity: 1;
        transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .sub-header .nav-bar li a {
        transition: all 0.3s ease;
        white-space: nowrap;
    }

    .sub-header .nav-bar li:hover a {
        color: #db3552;
    }

.sub-header .left-side {
    display: flex;
    align-items: flex-end;
    color: #2E3C51;
}

    .sub-header .left-side span {
        display: flex;
        color: #2E3C51;
    }

    .sub-header .left-side i {
        margin-right: 0.7rem;
        font-size: 1.3rem;
        color: rgba(219, 53, 82, 0.8);
    }

.user_option {
    padding: .5rem;
}

    .user_option .user_mdl_head {
        background: #db3552;
        padding: .8rem 0;
        font-family: med;
        font-size: 1.2rem;
        color: white;
        border-radius: 3px;
        margin-bottom: 1rem;
    }

    .user_option a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        color: #2E3C51;
        font-family: med;
        transition: all .2s ease;
    }

        .user_option a:hover {
            color: #db3552;
        }

        .user_option a i {
            font-size: 1.2rem;
        }

        .user_option a + a {
            border-top: 1px solid #F2F4F6;
        }

.modal2 {
    position: fixed;
    top: 10vh;
    right: 0;
    left: 0;
    visibility: hidden;
    margin: 0 auto;
    text-align: center;
    width: max-content;
    height: max-content !important;
    border-radius: 4px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    background: #fefefe;
    z-index: 2000 !important;
    transform: none;
    min-width: 270px;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: none;
}

    .modal2 .login_option {
        padding: 1.5rem;
    }

        .modal2 .login_option .login-avatar {
            border-radius: 50%;
            box-shadow: 0 1px 3px rgba(0, 120, 215, 0.4);
            position: relative;
            width: 110px;
            height: 110px;
            display: block;
            overflow: hidden;
        }

            .modal2 .login_option .login-avatar img {
                position: relative;
                width: 100%;
                height: 100%;
                z-index: 1;
                margin: auto;
            }

            .modal2 .login_option .login-avatar::before {
                content: '';
                position: absolute;
                display: none;
                top: 0;
                left: 0;
                width: 110%;
                height: 110%;
                background: conic-gradient(from 45deg, #0078D7, #b9e0ff, #1875c2, #c0e2ff, #0078D7);
            }

@media screen and (max-width: 500px) {
    .modal2 {
        margin: 2vh auto 0;
    }
}

.modal2 h2 {
    margin: 2rem 0;
    color: #0078D7;
    font-family: med;
    font-size: 1.3rem;
}

.modal2 .login_option {
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    background-color: white;
    /*display: none;*/
}

.modal2 .facebook-login, .modal2 .pass-login {
    margin: 0 auto;
    padding: .4rem 1rem .3rem .7rem;
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-family: med;
    transition: all .2s ease;
    border-radius: 4px !important;
}

    .modal2 .facebook-login div:nth-child(1), .modal2 .pass-login div:nth-child(1) {
        margin-left: 1.5rem;
    }

    .modal2 .facebook-login i, .modal2 .pass-login i {
        font-size: 1.5rem;
    }

.modal2 .pass-login {
    background-color: #db3552;
    margin-top: 1rem;
}

.modal2 .close-login {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 1.5rem;
    color: #30405A;
    cursor: pointer;
    transition: all .3s ease;
}

    .modal2 .close-login:hover {
        transform: rotate(90deg);
        color: #db3552;
    }

.show {
    visibility: initial;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: scale(1);
    opacity: 1;
    display: initial;
}

.user-login {
    display: flex;
    align-items: center;
    flex-flow: column;
    width: 100%;
}

    .user-login input {
        margin-bottom: 1rem;
        width: 75%;
        border: none;
        border: 2px solid rgba(46, 41, 78, 0.13);
        padding: 0.5rem 1rem;
        border-radius: 5px;
    }

        .user-login input::placeholder {
            color: #30405A;
        }

    .user-login button {
        padding: .4rem 1rem .4rem .7rem;
        background-color: rgba(219, 53, 82, 0.07);
        color: #db3552;
        margin-top: .5rem;
        border: 1px solid rgba(219, 53, 82, 0.07);
        font-size: 1rem;
        border-radius: 5px;
    }

        .user-login button i {
            margin-right: 1rem;
        }

@media screen and (max-width: 700px) {
    .login-btn span {
        display: none;
    }
}

#example {
    margin: 2rem auto !important;
}

@media screen and (min-width: 900px) {
    .log-btn,
    .menu_btn {
        display: none;
    }
}

.face_book {
    background: rgba(0, 120, 215, 0.05);
    color: #0078d7;
    width: max-content;
    padding: .6rem 1rem;
    margin: 1.5rem auto 2rem;
    border-radius: 60px;
    border: 1px solid rgba(0, 120, 215, 0.2);
}

    .face_book a {
        color: #0078d7;
        display: flex;
        font-family: med;
        align-items: center;
    }

        .face_book a i {
            margin-right: 2rem;
            font-size: 1.3rem;
        }

.page_head {
    padding: 1rem;
    background-color: white;
    box-shadow: 0 1px 1px #e0e4f6;
    border-radius: 6px;
    margin-bottom: 3rem;
}

@media screen and (max-width: 700px) {
    .page_head {
        border-radius: 0;
        padding: 1rem .5rem;
    }
}

.page_head h2 {
    text-align: center;
    padding-bottom: 1rem;
    font-family: med;
    color: #606B7F;
    font-size: 1.2rem;
    border-bottom: 2px dashed #e0e4f698;
    margin-bottom: 1.2rem;
}

.filter {
    border-radius: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.filter-title {
    display: flex;
    align-items: center;
    margin-left: 1rem;
    color: #2E3C51;
}

    .filter-title i {
        margin-left: .7rem;
        color: #db3552;
        font-size: 1rem;
    }

.filter-form {
    display: flex;
    align-items: center;
    flex-grow: 1;
    flex-wrap: wrap;
}

    .filter-form button {
        background-color: rgba(219, 53, 82, 0.05);
        color: #db3552;
        border: 1.5px solid rgba(219, 53, 82, 0.07);
        border-radius: 4px;
        padding: .2rem 1rem;
    }

@media screen and (max-width: 1000px) {
    .filter-form button {
        border-radius: 4px;
    }
}

.request-btn {
    display: flex;
    align-items: center;
    background-color: rgba(219, 53, 82, 0.05);
    color: #db3552;
    border: 1.5px solid rgba(219, 53, 82, 0.07);
    border-radius: 4px;
    white-space: nowrap;
    justify-content: center;
    margin-right: auto;
    padding: .4rem 1rem .4rem .5rem;
}

@media screen and (max-width: 1000px) {
    .request-btn {
        border-radius: 4px;
    }
}

.request-btn i {
    font-size: 1.1rem;
    margin-right: .8rem;
}

@media screen and (max-width: 900px) {
    .request-btn {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    .filter {
        display: flex;
        flex-flow: column;
        justify-content: flex-start;
        align-items: stretch;
    }

    .filter-title {
        margin-bottom: 1.5rem;
        justify-content: flex-start;
        display: none;
    }

    .filter-form {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        grid-auto-rows: auto;
    }

        .filter-form select {
            margin: 0;
        }

    .request-btn {
        margin: 0;
        justify-content: center;
        font-size: .9rem;
    }
}

@media screen and (max-width: 700px) {
    .footer {
        display: none;
    }
}

.footer .wrap {
    padding: 1rem;
    border-radius: 8px;
    font-family: med;
}

@media screen and (max-width: 900px) {
    .footer .wrap {
        margin-bottom: 4rem;
    }
}

.footer_app {
    margin: 1rem 0;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

    .footer_app a {
        width: 130px;
        border: 1px solid #e0e4f698;
        background: white;
        padding: .45rem 1rem 0.15rem;
        border-radius: 5px;
    }

        .footer_app a img {
            width: 100%;
        }

.footer_nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

    .footer_nav a {
        font-size: .9rem;
        color: #606B7F;
    }

.support-btn {
    display: flex;
    align-items: center;
    direction: ltr;
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    background-color: white;
    color: #db3552;
    padding: .9rem 1.2rem 0.5rem 1rem;
    border-radius: 50px;
    letter-spacing: 1.5px;
    font-family: med;
    cursor: pointer;
    font-size: 1.1rem;
    display: none;
}

    .support-btn svg {
        margin-right: 1rem;
        font-size: 1.3rem;
        fill: #db3552 !important;
    }

@media screen and (max-width: 900px) {
    .support-btn {
        bottom: 5rem;
        display: none;
    }
}

.detail-wrap {
    padding: 1.3rem 1.3rem 1rem;
    min-width: 260px;
}

    .detail-wrap h3 {
        font-family: med;
        font-size: 1.3rem;
        padding: 1rem 1rem .8rem;
        border-radius: 4px 4px 2px 2px;
        margin: -1rem -1rem 0;
        text-transform: capitalize;
        background-color: #db3552;
        color: white;
    }

    .detail-wrap ul {
        padding: 0 .3rem;
        direction: rtl;
    }

        .detail-wrap ul li {
            display: flex;
            align-items: center;
            padding: .5rem 0;
            justify-content: space-between;
        }

            .detail-wrap ul li span {
                color: #001334;
            }

                .detail-wrap ul li span:nth-child(1) {
                    color: #db3552;
                }

    .detail-wrap .detail-option {
        all: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 1.5rem;
        direction: ltr;
    }

        .detail-wrap .detail-option a,
        .detail-wrap .detail-option button {
            display: flex;
            align-items: center;
            place-items: center;
            background-color: rgba(219, 53, 82, 0.08);
            padding: .5rem .7rem;
            border-radius: 7px;
            color: #db3552;
            font-size: 1.5rem;
            cursor: pointer;
        }

            .detail-wrap .detail-option a:nth-child(1),
            .detail-wrap .detail-option button:nth-child(1) {
                color: #8F5DB7 !important;
                background-color: rgba(143, 93, 183, 0.08);
            }

            .detail-wrap .detail-option a:nth-child(2),
            .detail-wrap .detail-option button:nth-child(2) {
                color: #25D366;
                background-color: rgba(37, 211, 102, 0.08);
            }

            .detail-wrap .detail-option a:nth-child(3),
            .detail-wrap .detail-option button:nth-child(3) {
                background-color: rgba(0, 120, 215, 0.08);
                color: #0078D7;
            }

#back-to-top {
    position: fixed;
    bottom: 25px;
    right: 1.5%;
    z-index: 600;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #db3552;
    color: white;
    cursor: pointer;
    font-size: 1.3rem;
    border: 0;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    opacity: 0;
    transform: scale(0);
    display: grid;
    place-items: center;
}

@media screen and (max-width: 900px) {
    #back-to-top {
        bottom: 85px;
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 1.1rem;
        right: 18px;
        background-color: #db3552;
        color: white;
    }
}

#back-to-top.show {
    opacity: 1;
    transform: scale(1);
}

.main-content {
    display: grid;
    grid-gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: auto;
    margin-bottom: 3rem;
}

.adv-card {
    display: flex;
    flex-flow: column;
    box-shadow: 0 1px 1px #e0e4f6;
    background-color: #fff;
    border-radius: 8px;
    direction: ltr;
    transition: all .3s ease;
}

    .adv-card:hover {
        box-shadow: 0 1px 1px rgba(219, 53, 82, 0.6);
    }

    .adv-card .card-img,
    .adv-card .card-image {
        width: 100%;
        display: flex;
        border-radius: 4px 4px 0 0;
        height: 190px;
        position: relative;
        transition: all .3s ease;
    }

        .adv-card .card-img img,
        .adv-card .card-image img {
            object-fit: cover;
            width: inherit;
            border-radius: inherit;
            transition: all .3s ease;
            position: relative;
        }

    .adv-card .card-main {
        padding: 1rem 1rem .8rem;
        display: flex;
        flex-flow: column;
        height: auto;
        flex-grow: 1;
    }

    .adv-card .shop_title {
        direction: rtl;
        color: #2E3C51;
        line-height: 1.8;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
    }

    .adv-card .card-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
        margin-top: .2rem;
        font-family: med;
        color: #2E3C51;
        cursor: pointer;
        align-items: flex-start;
        flex-grow: 1;
        width: 100%;
        gap: 2rem;
    }

        .adv-card .card-title > p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .adv-card .card-title .card-price {
            color: #db3552;
            flex-shrink: 0;
            font-family: med;
        }

.card-location {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    line-height: 1.5;
    margin-bottom: 1.3rem;
    margin-top: .5rem;
}

    .card-location i {
        color: rgba(48, 64, 90, 0.7);
        cursor: pointer;
        transition: all .1s ease-out;
    }

    .card-location span,
    .card-location a {
        font-size: .9rem;
        color: #606B7F;
        position: relative;
        cursor: pointer;
    }

    .card-location div {
        color: rgba(0, 19, 52, 0.2);
        font-size: 14px;
    }

.red {
    color: #db3552 !important;
    transition: all .3s ease-out;
}

.card-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

    .card-detail > a,
    .card-detail > div {
        display: flex;
        align-items: center;
        flex-flow: column;
        cursor: pointer;
        direction: rtl;
        text-align: left;
        justify-content: center;
    }

        .card-detail > a > i,
        .card-detail > div > i {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            padding: .1rem;
            border-radius: 7px;
            fill: rgba(0, 19, 52, 0.5);
            color: rgba(0, 19, 52, 0.3);
            transition: all .2s ease;
        }

            .card-detail > a > i:hover,
            .card-detail > div > i:hover {
                color: #db3552;
                fill: #db3552;
            }

.user-card {
    margin-top: .3rem;
}

.vip-sign {
    display: flex;
    align-items: center;
    position: absolute;
    top: 5px;
    left: 5px;
}

    .vip-sign div {
        background-color: #db3552;
        margin-right: .5rem;
        font-size: 0.75rem;
        padding: .3rem .4rem 0.1rem;
        color: white;
        font-family: med;
        letter-spacing: 2px;
        border-radius: 3px;
        cursor: pointer;
    }

.shop-card {
    display: flex;
    align-items: center;
    flex-flow: column;
    align-items: stretch;
    border: 1px solid #eee;
    border-radius: 10px;
    background-color: #fff;
}

    .shop-card .shop-img {
        display: flex;
        align-items: center;
        background-color: #f5f5f7;
        position: relative;
        direction: ltr;
        border-radius: 4px 4px 0 0;
        width: 100%;
        justify-content: center;
    }

        .shop-card .shop-img img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            border-radius: inherit;
        }

    .shop-card .shop-info {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        align-items: flex-start;
        padding: .3rem .9rem .9rem;
        height: 100%;
    }

        .shop-card .shop-info p {
            font-family: med;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /* autoprefixer: off */
            -webkit-box-orient: vertical;
            /* autoprefixer: on */
        }

        .shop-card .shop-info a {
            display: flex;
            align-items: center;
            margin-top: .5rem;
            line-height: 1.8;
        }

            .shop-card .shop-info a span {
                margin-right: .5rem;
                color: #db3552;
            }

        .shop-card .shop-info .shop-adv-num {
            background-color: rgba(219, 53, 82, 0.05);
            color: #db3552;
            width: 100%;
            padding: 0.2rem 1rem;
            margin-top: 1rem;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
        }

.serv-card {
    display: flex;
    align-items: center;
    flex-flow: column;
    align-items: stretch;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 1px 1px #e0e4f6;
}

    .serv-card .serv-img {
        display: flex;
        align-items: center;
        position: relative;
        direction: ltr;
        border-radius: 5px 5px 0 0;
        width: 100%;
        height: 150px;
        justify-content: center;
    }

        .serv-card .serv-img img {
            object-fit: cover;
            height: 100%;
            width: inherit;
            border-radius: inherit;
        }

    .serv-card .serv-info {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.3rem 1rem .7rem;
        height: 100%;
    }

        .serv-card .serv-info h2 {
            font-family: med;
            width: 100%;
        }

        .serv-card .serv-info a {
            display: flex;
            align-items: center;
            margin-top: .5rem;
            line-height: 1.8;
        }

            .serv-card .serv-info a span {
                margin-right: .5rem;
                color: #db3552;
            }

ul.ks-cboxtags {
    list-style: none;
}

    ul.ks-cboxtags li {
        display: inline;
    }

        ul.ks-cboxtags li label {
            display: inline-block;
            background-color: #f1f1f1;
            color: #616161;
            border-radius: 50px;
            white-space: nowrap;
            margin: 0 0 0.8rem 0.8rem;
            -webkit-touch-callout: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            transition: all .2s;
            text-align: center;
        }

        ul.ks-cboxtags li label {
            padding: .6rem 3rem .45rem 1rem;
            position: relative;
            cursor: pointer;
        }

            ul.ks-cboxtags li label::before {
                position: absolute;
                display: inline-block;
                font-style: normal;
                font-variant: normal;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
                font-family: "Font Awesome 5 Free";
                font-size: 1rem;
                right: 20px;
                top: 9px;
                content: "🞥";
                transition: transform .3s ease-in-out;
            }

        ul.ks-cboxtags li input[type="checkbox"]:checked + label::before {
            content: "✓";
            transform: rotate(360deg);
            transition: transform .3s ease-in-out;
        }

        ul.ks-cboxtags li input[type="checkbox"]:checked + label {
            background-color: #db3552;
            color: #fff;
            transition: all .2s;
        }

        ul.ks-cboxtags li input[type="checkbox"] {
            display: absolute;
        }

        ul.ks-cboxtags li input[type="checkbox"] {
            position: absolute;
            opacity: 0;
        }

/* Customize the label (the container) */
.container {
    display: block;
    position: relative;
    padding-right: 2rem;
    cursor: pointer;
    width: max-content;
    font-size: 1rem;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    right: 0;
    height: 20px;
    width: 20px;
    border-radius: 3px;
    background-color: #ccc;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #db3552;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 6px;
    top: 3px;
    width: 5px;
    height: 8px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.spinner {
    margin: 50px auto;
    width: 100px;
    text-align: center;
}

    .spinner > div {
        width: 18px;
        height: 18px;
        background-color: #db3552;
        margin: 0 .2rem;
        border-radius: 100%;
        display: inline-block;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

    .spinner .bounce1 {
        animation-delay: -0.32s;
    }

    .spinner .bounce2 {
        animation-delay: -0.16s;
    }

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

.loader {
    margin: 1rem auto 0;
    display: flex;
    justify-content: center;
}

.looping-rhombuses-spinner,
.looping-rhombuses-spinner * {
    box-sizing: border-box;
}

.looping-rhombuses-spinner {
    width: calc(15px * 4);
    height: 15px;
    position: relative;
}

    .looping-rhombuses-spinner .rhombus {
        height: 15px;
        width: 15px;
        background-color: #db3552;
        left: calc(15px * 4);
        position: absolute;
        margin: 0 auto;
        border-radius: 20px;
        transform: translateY(0) rotate(45deg) scale(0);
        animation: looping-rhombuses-spinner-animation 1.5s linear infinite;
    }

        .looping-rhombuses-spinner .rhombus:nth-child(1) {
            animation-delay: calc(1500ms * 1 / -1.5);
        }

        .looping-rhombuses-spinner .rhombus:nth-child(2) {
            animation-delay: calc(1500ms * 2 / -1.5);
        }

        .looping-rhombuses-spinner .rhombus:nth-child(3) {
            animation-delay: calc(1500ms * 3 / -1.5);
        }

@keyframes looping-rhombuses-spinner-animation {
    0% {
        transform: translateX(0) rotate(45deg) scale(0);
    }

    50% {
        transform: translateX(-233%) rotate(45deg) scale(1);
    }

    100% {
        transform: translateX(-466%) rotate(45deg) scale(0);
    }
}

/* The Loader */
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 13000;
    overflow: hidden;
}

.no-js #loader-wrapper {
    display: none;
}

#loader {
    display: inherit;
    position: fixed;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #16a085;
    animation: spin 1.5s linear infinite;
    z-index: 11000;
}

    #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #e74c3c;
        animation: spin 2.5s linear infinite;
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #f9c922;
        animation: spin 1s linear infinite;
    }

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

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin-reverse {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

#loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 60%;
    height: 100%;
    background: #fff;
    background: white;
    filter: blur(5px);
    z-index: 10;
}

    #loader-wrapper .loader-section.section-left {
        left: -10px;
    }

@media screen and (max-width: 600px) {
    #loader-wrapper .loader-section.section-left {
        left: -5px;
    }
}

#loader-wrapper .loader-section.section-right {
    right: -10px;
}

@media screen and (max-width: 600px) {
    #loader-wrapper .loader-section.section-right {
        right: -5px;
    }
}

/* Loaded styles */
.loaded #loader-wrapper .loader-section.section-left {
    transform: translateX(-100%);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
    transform: translateX(100%);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader {
    opacity: 0;
    transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.3s 1s ease-out;
}

.loaded_off {
    display: none;
}

.post-modal {
    position: fixed;
    top: 10vh;
    right: 0;
    left: 0;
    margin: 0 auto;
    text-align: center;
    width: max-content;
    height: max-content !important;
    border-radius: 5px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    background: #fefefe;
    transform: none;
    min-width: 320px;
    display: none;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1000 !important;
}

@media screen and (max-width: 700px) {
    .post-modal {
        top: 8vh;
    }
}

@media only screen and (max-height: 500px) {
    .post-modal {
        width: 100vw;
        height: 100vh !important;
        margin: 0 !important;
        bottom: 0;
    }
}

.modal-overlay {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900 !important;
    background: #2c3e50;
    visibility: hidden;
    opacity: 0;
    cursor: pointer;
    transition: all .3s ease;
}

.overlay {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 910 !important;
    background: #2c3e5098;
    cursor: pointer;
    transition: all .3s ease;
}

.overlay_off {
    display: none;
}

.poo {
    display: initial;
    opacity: 1;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: scale(1);
}

.overlay-on {
    visibility: initial;
    opacity: .5 !important;
    transition: all .3s ease;
}

.shop_counter {
    margin: 8rem auto 1rem;
    background: #25D366;
    background-color: #fff;
    box-shadow: 0 1px 1px #e0e4f6;
    border-radius: 10px;
    overflow: hidden;
    padding: 1rem;
    position: relative;
}

@media screen and (max-width: 900px) {
    .shop_counter {
        margin: 6rem auto 1rem;
        padding: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }
}

.shop_counter .share_option {
    margin-top: 1.5rem;
    margin-bottom: 0;
}

@media screen and (max-width: 900px) {
    .shop_counter .share_option {
        padding: .7rem;
        margin-top: 1rem;
    }
}

@media screen and (min-width: 900px) {
    .shop_counter .share_option .share_content {
        display: flex;
        gap: 2rem;
        align-items: center;
        flex-flow: row-reverse;
    }

        .shop_counter .share_option .share_content > * {
            display: flex;
            flex-grow: 1;
            margin-top: 0;
        }

        .shop_counter .share_option .share_content .share_field {
            border-color: rgba(46, 41, 78, 0.13);
            border-radius: 40px;
            padding: .2rem;
            margin-left: 1rem;
        }
}

.shop-single {
    display: flex;
    align-items: center;
    align-items: stretch;
    position: relative;
}

    .shop-single .shop-single-img {
        width: 400px;
        display: flex;
        border-radius: 4px;
    }

@media screen and (max-width: 900px) {
    .shop-single .shop-single-img {
        width: 300px;
    }
}

.shop-single .shop-single-img img {
    object-fit: cover;
    width: inherit;
    border-radius: inherit;
}

.shop-single .shop-single-info {
    padding: 0 1.5rem .2rem 0;
    display: flex;
    flex-flow: column;
    flex-grow: 1;
    justify-content: space-between;
    overflow: hidden;
}

    .shop-single .shop-single-info h1 {
        font-family: med;
        font-size: 1.1rem;
        color: #2E3C51;
        line-height: 1.7;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
        overflow: hidden;
    }

    .shop-single .shop-single-info .shop_info_line {
        font-size: 1rem;
        display: flex;
        width: max-content;
    }

        .shop-single .shop-single-info .shop_info_line .shop_share_ico {
            margin-right: .7rem;
            color: #606B7F;
        }

    .shop-single .shop-single-info span {
        color: #db3552;
        margin-left: .7rem;
    }

@media screen and (max-width: 700px) {
    .shop-single {
        flex-wrap: wrap;
    }

        .shop-single .shop-single-info {
            padding: 1rem .2rem 0;
            font-size: .5rem;
        }

            .shop-single .shop-single-info h1 {
                font-size: 1rem;
            }

            .shop-single .shop-single-info .shop_info_line {
                margin-top: 1rem;
                font-size: .95rem;
                justify-content: space-between;
            }

        .shop-single .shop-single-img {
            width: 100%;
            height: unset;
        }

            .shop-single .shop-single-img img {
                object-fit: cover;
                height: 100%;
                width: 100%;
                border-radius: inherit;
            }
}

@media only screen and (max-width: 900px) and (min-width: 700px) {
    .shop_info_line {
        font-size: .95rem !important;
    }
}

.counter_share2 {
    background-color: #F2F4F6;
    display: flex;
    justify-content: space-between;
    border-radius: 7px;
    align-items: center;
    font-size: .9rem;
    margin-top: 1rem;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: .7rem 1rem;
}

    .counter_share2 i {
        margin-right: 1rem;
    }

@media screen and (max-width: 1100px) {
    .counter_share2 {
        display: none !important;
    }
}

.counter_share1 {
    background-color: #F2F4F6;
    display: flex;
    justify-content: space-between;
    padding: .7rem 1rem;
    border-radius: 3px;
    align-items: center;
    font-size: .9rem;
    margin-top: 1rem;
    cursor: pointer;
}

    .counter_share1 i {
        margin-right: 1rem;
    }

@media screen and (min-width: 1100px) {
    .counter_share1 {
        display: none !important;
    }
}

.shop_exlink {
    display: flex;
    justify-content: space-around;
    padding-top: 1rem;
    display: none;
}

    .shop_exlink a {
        display: flex;
        flex-flow: column;
        align-items: center;
        color: #606B7F;
    }

        .shop_exlink a i {
            font-size: 1.5rem;
        }

        .shop_exlink a h4 {
            margin-top: .7rem;
        }

.inbox-mail {
    border-radius: 5px;
    margin-bottom: 1rem;
    background: white;
    box-shadow: 0 1px 1px #e0e4f6;
}

.mail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem .7rem;
    cursor: pointer;
    font-size: .95rem;
}

    .mail-head .message-title > :nth-child(1) {
        margin-bottom: .7rem;
    }

    .mail-head .message-title span {
        color: #db3552;
        margin-left: .5rem;
    }

    .mail-head .read-more {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .5rem .7rem .5rem .5rem;
        border-radius: 3px;
        font-size: .95rem;
        margin-right: auto;
    }

        .mail-head .read-more i {
            margin-right: .5rem;
        }

@media screen and (max-width: 500px) {
    .mail-head {
        flex-flow: column;
        align-items: flex-start;
    }

        .mail-head > div {
            width: 100%;
        }

        .mail-head .read-more {
            margin-top: 1rem;
        }
}

.mail-text {
    transition: all .3s ease;
    overflow: hidden;
    height: 0;
}

    .mail-text p {
        padding: 1rem;
        margin-top: .5rem;
        text-align: justify;
        line-height: 1.7;
        border-top: 1px solid #e9e9e9;
    }

.text-hide {
    height: max-content;
    transition: all .3s ease;
}

.gallery {
    margin-bottom: .7rem;
}

    .gallery .agile__actions {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 1rem;
    }

        .gallery .agile__actions .agile__dot button {
            background-color: white !important;
            height: 7px;
            width: 7px;
        }

        .gallery .agile__actions .agile__dot--current button {
            background-color: #db3552 !important;
        }

.thumbnails {
    margin: 0 -5px;
    width: calc(100% + 10px);
}

.img-gallery {
    border-radius: 3px;
    margin-bottom: 1rem;
}

@media screen and (min-width: 1000px) {
    .img-gallery {
        padding: .3rem;
        background-color: #e1e6eccb;
    }
}

.agile__nav-button {
    background: transparent;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 24px;
    transition-duration: 0.3s;
}

.thumbnails .agile__nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.thumbnails .agile__nav-button--prev {
    left: 0;
    padding: .5rem 0.3rem;
    border-radius: 0 30px 30px 0 !important;
    background-color: rgba(255, 255, 255, 0.7);
    color: #001334;
}

.thumbnails .agile__nav-button--next {
    right: 0;
    padding: .5rem 0.3rem;
    border-radius: 30px 0 0 30px !important;
    background-color: rgba(255, 255, 255, 0.7);
    color: #001334;
}

.agile__nav-button:hover {
    color: #888;
}

.agile__dot {
    margin: 0 10px;
}

    .agile__dot button {
        background-color: #eee;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: block;
        height: 10px;
        font-size: 0;
        line-height: 0;
        margin: 0;
        padding: 0;
        transition-duration: 0.3s;
        width: 10px;
    }

    .agile__dot--current button,
    .agile__dot:hover button {
        background-color: #888;
    }

.slide {
    align-items: center;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    height: 380px;
    justify-content: center;
}

@media screen and (max-width: 800px) {
    .slide {
        height: 280px;
    }
}

.slide--thumbniail {
    cursor: pointer;
    height: 80px;
    padding: 0 5px;
    transition: opacity 0.3s;
}

@media screen and (max-width: 800px) {
    .slide--thumbniail {
        height: 60px;
    }
}

.slide--thumbniail:hover {
    opacity: 0.75;
}

.slide img {
    height: 100%;
    border-radius: 2px;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.form-check {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    width: max-content;
    cursor: pointer;
    width: 100%;
    overflow: hidden;
}

@media screen and (max-width: 700px) {
    .form-check span {
        font-size: .85rem !important;
    }
}

.cbx {
    position: relative;
    display: block;
    float: right;
    margin-left: 1rem;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    box-sizing: unset !important;
    /* background-color: #f3f3f5; */
    /* border: 1px solid #eee; */
    /* background-image: linear-gradient(#474749, #606062); */
    /* box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), inset 0 -1px 1px rgba(0, 0, 0, 0.15); */
    transition: all 0.15s ease;
    background-color: #fff;
    border: 1px solid #ccd1d6;
    /* border: 1px solid #e1e6ecad; */
}

    .cbx svg {
        position: absolute;
        top: 3px;
        left: 3px;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke: #fff;
        stroke-width: 2;
        stroke-dasharray: 17;
        stroke-dashoffset: 17;
        transform: translate3d(0, 0, 0);
    }

.forms label {
    cursor: pointer;
}

.forms input[type="checkbox"],
.forms input[type="radio"] {
    position: absolute;
    opacity: 0;
}

    .forms input[type="checkbox"]:checked + .cbx {
        background-color: #db3552;
        border: 1px solid #db3552;
        /* background-image: linear-gradient(#255cd2, #1d52c1); */
        /* background-image: red; */
    }

        .forms input[type="checkbox"]:checked + .cbx svg {
            stroke-dashoffset: 0;
            transition: all 0.15s ease;
        }

.alert-content {
    position: fixed;
    top: 25%;
    right: 0;
    left: 0;
    visibility: hidden;
    margin: 0 auto;
    text-align: center;
    width: max-content;
    height: max-content !important;
    border-radius: 10px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    background: #fefefe;
    z-index: 999 !important;
    transform: none;
    max-width: 89vmin;
    width: 350px;
    opacity: 0;
    transform: scale(1.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.alert-overlay {
    visibility: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 998;
    opacity: 0;
    background: #2c3e506c;
    backdrop-filter: blur(1px);
    cursor: pointer;
    transition: all .25s ease;
}

.show-alert {
    visibility: initial;
    transform: scale(1);
    opacity: 1;
}

.alert-content p {
    margin: 1.5rem 0;
    padding: 0 1rem;
    line-height: 1.7;
    color: #001334;
}

.alert-content i,
.alert-content svg {
    font-size: 5rem;
    color: #25D366;
}

.alert-content .alert-option {
    display: flex;
    justify-content: center !important;
    direction: rtl !important;
}

    .alert-content .alert-option a {
        display: flex;
        justify-content: center;
        flex-flow: row;
        color: #db3552;
        padding: .85rem 0;
        border: 1px solid rgba(46, 41, 78, 0.13);
        flex-grow: 1;
        border-radius: 0 !important;
        cursor: pointer;
    }

        .alert-content .alert-option a span {
            margin-left: .7rem;
        }

    .alert-content .alert-option .alert-yes {
        color: #028948;
    }

        .alert-content .alert-option .alert-yes span {
            transform: rotate(7deg);
        }

.alert-icon {
    margin-top: 1rem;
}

.warning {
    margin: 1rem 0 3rem;
    position: relative;
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0 1px 1px #e0e4f6;
}

    .warning .warn-logo {
        display: flex;
        align-items: center;
        align-items: center;
        justify-content: center;
        padding: .7rem 0;
    }

        .warning .warn-logo h3 {
            font-family: med;
        }

        .warning .warn-logo i,
        .warning .warn-logo svg {
            margin-left: 1rem;
            font-size: 1.2rem;
            color: #db3552;
        }

.warn-logo > div {
    display: flex;
    align-items: center;
    border-radius: 50px;
    padding: .7rem 1.5rem;
}

.warn-message {
    padding: 0 1.5rem 1.5rem;
    border-radius: 15px 15px 0 0;
}

    .warn-message p {
        text-align: justify;
        line-height: 1.9;
        border-top: 1px solid #f1f1f1;
        padding-top: 1rem;
    }

        .warn-message p span {
            font-size: .6rem;
            margin-left: .1rem;
            color: #db3552;
        }

.warn-option {
    display: flex;
    justify-content: space-between;
    border-radius: 0 0 15px 15px;
    overflow: hidden;
}

    .warn-option a {
        flex: 1 1 45%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        color: #db3552;
        border-top: 1px solid #f1f1f1;
    }

        .warn-option a:nth-child(1) {
            border-left: 2px solid #f1f1f1;
        }

        .warn-option a i {
            margin-left: .7rem;
            font-size: 1.3rem;
        }

    .warn-option .warn-back {
        color: #0078D7;
    }

@media screen and (min-width: 1000px) {
    .demo-gallery {
        padding: .2rem;
    }
}

.small {
    font-size: 11px;
    color: #999;
    display: block;
    margin-top: -10px;
}

.cont {
    text-align: center;
}

.page-head {
    padding: 60px 0;
    text-align: center;
}

    .page-head .lead {
        font-size: 18px;
        font-weight: 400;
        line-height: 1.4;
        margin-bottom: 50px;
        margin-top: 0;
    }

.btn {
    -moz-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-decoration: none;
}

.btn-lg {
    border-radius: 2px;
    font-size: 18px;
    line-height: 1.33333;
    padding: 10px 16px;
}

.btn-primary:hover {
    background-color: #fff;
    color: #152836;
}

.btn-primary {
    background-color: #152836;
    border-color: #0e1a24;
    color: #ffffff;
}

.btn-primary {
    border-color: #eeeeee;
    color: #eeeeee;
    transition: color 0.1s ease 0s, background-color 0.15s ease 0s;
}

.page-head h1 {
    font-size: 42px;
    margin: 0 0 20px;
    color: #FFF;
    position: relative;
    display: inline-block;
}

    .page-head h1 .version {
        bottom: 0;
        color: #ddd;
        font-size: 11px;
        font-style: italic;
        position: absolute;
        width: 58px;
        right: -58px;
    }

.demo-gallery > ul {
    margin-bottom: 0;
    border-radius: 4px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18%, 1fr));
    grid-auto-rows: auto;
    gap: .6rem;
}

@media screen and (max-width: 700px) {
    .demo-gallery > ul {
        gap: .3rem;
    }
}

.demo-gallery > ul > li {
    display: flex;
    border: 2px solid #F4F8FC;
    border-radius: 4px;
}

    .demo-gallery > ul > li:first-child {
        grid-column: 1 / 6;
    }

    .demo-gallery > ul > li a {
        border-radius: 3px;
        width: 100%;
        overflow: hidden;
        position: relative;
    }

        .demo-gallery > ul > li a > img {
            transition: transform 0.15s ease 0s;
            transform: scale3d(1, 1, 1);
            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: center;
            width: 100%;
        }

        .demo-gallery > ul > li a:hover > img {
            transform: scale3d(1.1, 1.1, 1.1);
        }

        .demo-gallery > ul > li a:hover .demo-gallery-poster > img {
            opacity: 1;
        }

        .demo-gallery > ul > li a .demo-gallery-poster {
            background-color: rgba(0, 0, 0, 0.1);
            bottom: 0;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            transition: background-color 0.15s ease 0s;
        }

            .demo-gallery > ul > li a .demo-gallery-poster > img {
                left: 50%;
                margin-left: -10px;
                margin-top: -10px;
                opacity: 0;
                position: absolute;
                top: 50%;
                transition: opacity 0.3s ease 0s;
            }

        .demo-gallery > ul > li a:hover .demo-gallery-poster {
            background-color: rgba(0, 0, 0, 0.5);
        }

.demo-gallery .justified-gallery > a > img {
    transition: transform 0.15s ease 0s;
    transform: scale3d(1, 1, 1);
    height: 100%;
    width: 100%;
}

.demo-gallery .justified-gallery > a:hover > img {
    transform: scale3d(1.1, 1.1, 1.1);
}

.demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
    opacity: 1;
}

.demo-gallery .justified-gallery > a .demo-gallery-poster {
    background-color: rgba(0, 0, 0, 0.1);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: background-color 0.15s ease 0s;
}

    .demo-gallery .justified-gallery > a .demo-gallery-poster > img {
        left: 50%;
        margin-left: -10px;
        margin-top: -10px;
        opacity: 0;
        position: absolute;
        top: 50%;
        transition: opacity 0.3s ease 0s;
    }

.demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
    background-color: rgba(0, 0, 0, 0.5);
}

.demo-gallery .video .demo-gallery-poster img {
    height: 48px;
    margin-left: -24px;
    margin-top: -24px;
    opacity: 0.8;
    width: 48px;
}

.demo-gallery.dark > ul > li a {
    border: 3px solid #04070a;
}

.demo-gallery > ul > li a .demo-gallery-poster {
    background-color: transparent;
}

.canvas {
    position: absolute;
    bottom: -24%;
    right: 50%;
    transform: translate(50%, -50%);
    font-size: 2rem;
    animation: spinnerThree 1s linear infinite;
}

@keyframes spinnerThree {
    0%, 35% {
        color: white;
    }

    20%, 50% {
        color: #db3552;
    }
}

.add-request .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 10px;
    padding-left: 23px;
    line-height: 40px;
}

.add-request .select2-container .select2-selection--single {
    height: 40px;
    font-size: .9rem;
}

.form-submit {
    width: 100%;
    display: flex;
    justify-content: center;
}

    .form-submit h3 {
        box-sizing: border-box;
        border: none;
        vertical-align: middle;
        text-align: center;
        text-overflow: ellipsis;
        text-transform: uppercase;
        font-size: 14px;
        overflow: hidden;
        outline: none;
        cursor: pointer;
        color: white;
        background-color: #db3552;
        border-radius: 4px;
        width: max-content;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        margin: 1rem 0;
        padding: .7rem 1rem;
    }

@media screen and (max-width: 1000px) {
    .form-submit h3 {
        border-radius: 4px;
    }
}

.sub-modal {
    position: fixed;
    top: 25%;
    right: 0;
    left: 0;
    visibility: hidden;
    margin: 0 auto;
    text-align: center;
    width: max-content;
    height: max-content !important;
    border-radius: 7px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    background: #fefefe;
    z-index: 999 !important;
    transform: none;
    max-width: 89vmin;
    width: 350px;
    opacity: 0;
    transform: scale(1.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

    .sub-modal .sub-text {
        padding: 0 1rem;
        margin: 0 0 1.5rem;
        font-size: 1rem;
        color: #001334;
    }

    .sub-modal .sub-option {
        display: inline-flex;
        justify-content: space-around;
        width: 100%;
        border-top: 1px solid rgba(46, 41, 78, 0.13);
        direction: rtl;
    }

        .sub-modal .sub-option > div {
            flex: 1 1 49%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

            .sub-modal .sub-option > div button,
            .sub-modal .sub-option > div span {
                font-size: 1rem;
                padding: .7rem 0 .4rem;
                cursor: inherit;
                width: 100%;
            }

            .sub-modal .sub-option > div a {
                font-size: 1rem;
                padding: .9rem 0 .6rem;
                cursor: inherit;
                width: 100%;
            }

        .sub-modal .sub-option .sub-yes {
            border-left: 1px solid rgba(46, 41, 78, 0.13);
            color: #028948;
        }

            .sub-modal .sub-option .sub-yes button,
            .sub-modal .sub-option .sub-yes a {
                color: inherit;
            }

        .sub-modal .sub-option .sub-no {
            color: #db3552;
        }

            .sub-modal .sub-option .sub-no button,
            .sub-modal .sub-option .sub-no a {
                color: inherit;
            }

.sub-logo {
    font-size: 5rem;
    color: #25D366;
    padding-top: 1rem;
}

.unbox {
    visibility: initial;
    transform: scale(1);
    opacity: 1;
}

.done-modal {
    position: fixed;
    top: 25%;
    right: 0;
    left: 0;
    visibility: hidden;
    margin: 0 auto;
    text-align: center;
    width: max-content;
    height: max-content !important;
    border-radius: 5px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    background: #fefefe;
    z-index: 999 !important;
    transform: none;
    max-width: 89vmin;
    width: 350px;
    opacity: 0;
    transform: scale(1.1);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

    .done-modal h3 {
        padding: 0 1rem 1.5rem;
    }

    .done-modal > span {
        display: flex;
        justify-content: space-around;
        border-top: 1px solid rgba(46, 41, 78, 0.13);
    }

        .done-modal > span :nth-child(1) {
            border-left: 1px solid rgba(46, 41, 78, 0.13);
            color: #00b400;
        }

        .done-modal > span > a {
            flex: 1 1 50%;
            padding: .7rem 0;
            color: #db3552;
        }

.unbox {
    visibility: initial;
    transform: scale(1);
    opacity: 1;
}

.short-link {
    margin-bottom: 1rem;
    background-color: rgba(242, 244, 246, 0.4);
    border: 1px solid #e0e4f698;
    border-radius: 7px;
    transition: all .2s ease;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    display: none;
}

@media screen and (max-width: 700px) {
    .short-link {
        font-size: .85rem;
    }
}

.short-link > div {
    text-transform: capitalize;
    display: block;
    padding: .9rem .8rem .7rem;
}

.short-link .short-msg {
    display: flex;
    justify-content: space-between;
}

    .short-link .short-msg span {
        display: flex;
        align-items: center;
    }

        .short-link .short-msg span i {
            margin-left: .7rem;
        }

.short-link .short-copy {
    position: absolute;
    display: flex;
    justify-content: center;
    top: -110%;
    left: 0;
    right: 0;
    color: green;
    transition: all .2s ease;
    background-color: #e3faec;
    border: 1px solid #cef6dd;
}

.Copied {
    transform: translateY(103%);
    transition: all .2s ease;
    display: none;
}

.pagination-wrapper {
    text-align: center;
    display: none;
}

.pagination {
    display: inline-block;
    height: 60px;
    margin-top: 70px;
    border-radius: 35px;
    background-color: #fff;
    box-shadow: 0 2px 3px RGB(0 0 0/5%);
    overflow: hidden;
}

@media only screen and (max-width: 1199px) {
    .pagination {
        height: 50px;
        margin-top: 50px;
        padding: 0 10px;
        border-radius: 25px;
    }
}

.page-numbers {
    display: block;
    padding: 0 25px;
    float: left;
    transition: 400ms ease;
    color: #595959;
    font-size: 20px;
    letter-spacing: 0.1em;
    line-height: 60px;
}

    .page-numbers:hover,
    .page-numbers.current {
        background-color: #db3552;
        color: #fff;
    }

    .page-numbers.prev:hover,
    .page-numbers.next:hover {
        background-color: transparent;
        color: #db3552;
    }

@media only screen and (max-width: 1199px) {
    .page-numbers {
        padding: 0 15px;
        font-size: 16px;
        line-height: 50px;
    }
}

@media only screen and (min-width: 120px) and (max-width: 1024px) {
    .page-numbers {
        padding: 0 14px;
        display: none;
    }

        .page-numbers:nth-of-type(2) {
            position: relative;
            padding-right: 50px;
        }

            .page-numbers:nth-of-type(2)::after {
                content: "...";
                position: absolute;
                font-size: 25px;
                top: 0;
                left: 45px;
            }

        .page-numbers:nth-child(-n+3),
        .page-numbers:nth-last-child(-n+3) {
            display: block;
        }

        .page-numbers:nth-last-child(-n+4) {
            padding-right: 14px;
        }

            .page-numbers:nth-last-child(-n+4)::after {
                content: none;
            }
}

.paginate {
    display: flex;
    justify-content: center;
    align-items: center;
    direction: ltr;
}

.page-num {
    display: flex;
    position: relative;
    justify-content: center;
    border-radius: 5px;
    align-items: center;
    font-family: med;
    padding: 1rem 0;
    color: #30405A;
    font-size: .95rem;
}

@media screen and (max-width: 600px) {
    .page-num {
        width: 100%;
        font-size: .85rem;
    }

        .page-num .fade {
            display: none;
        }

        .page-num .first-page {
            margin-right: auto;
            border-right: 1px dashed #e2e2e2;
        }

        .page-num .last-page {
            margin-left: auto;
            border-left: 1px dashed #e2e2e2;
        }
}

.page-num .list-num {
    display: flex;
    background: #0078D7;
}

    .page-num .list-num span {
        cursor: pointer;
    }

.page-num .numbers {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: .5rem;
    padding: .3rem;
    background: white;
    box-shadow: 0 1px 2px RGB(0 0 0/10%);
    border-radius: 5px;
}

    .page-num .numbers > * {
        padding: .65rem .9rem .45rem;
        background: white;
        cursor: pointer;
    }

        .page-num .numbers > *:hover {
            background: rgba(204, 204, 204, 0.2);
            border-radius: 5px;
        }

@media screen and (min-width: 600px) {
    .page-num .numbers {
        margin: 0 1rem;
    }
}

.page-num .page-next,
.page-num .page-prev {
    padding: .5rem .65rem;
    background: white;
    border-radius: 5px;
    display: flex;
    place-items: center;
    box-shadow: 0 1px 1px RGB(0 0 0/10%);
    cursor: pointer;
}

@media screen and (max-width: 600px) {
    .page-num .page-next,
    .page-num .page-prev {
        position: absolute;
    }
}

.page-num .page-next:hover,
.page-num .page-prev:hover {
    background: rgba(204, 204, 204, 0.2);
}

.page-num .page-next i,
.page-num .page-prev i {
    font-size: 1.5rem;
}

.page-num .page-next span,
.page-num .page-prev span {
    margin: 0 .5rem;
    white-space: nowrap;
}

@media screen and (max-width: 830px) and (min-width: 600px) {
    .page-num .page-next span,
    .page-num .page-prev span {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .page-num .page-next {
        top: 80px;
        right: 0;
    }

    .page-num .page-prev {
        top: 80px;
        left: 0;
    }
}

.page-in {
    background-color: #db3552 !important;
    color: white !important;
    border-radius: 4px !important;
}

.side-panel {
    position: fixed;
    top: 0;
    right: -310px;
    bottom: 0;
    width: 300px;
    height: 100%;
    z-index: 999;
    transform: translateX(0);
    background-color: white;
    display: flex;
    direction: rtl;
    flex-flow: column;
    transition: all 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

    .side-panel .side-head {
        position: relative;
        display: none;
        padding: 1rem 1.5rem .8rem;
        font-family: bold;
        color: #606B7F;
        font-size: 1.2rem;
        border: 1px solid #e0e4f698;
    }

    .side-panel .side-wrap {
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
        padding-bottom: 10rem;
        position: relative;
        padding: 0 0 1rem;
    }

        .side-panel .side-wrap > :nth-last-child(1) {
            margin-bottom: 6rem !important;
        }

        .side-panel .side-wrap > li > a {
            display: block;
            cursor: pointer;
            padding: .9rem 1.5rem .5rem 0;
            display: flex;
            color: #2E3C51;
            align-items: center;
            transition: all .2s ease;
        }

            .side-panel .side-wrap > li > a:hover {
                color: #db3552;
            }

                .side-panel .side-wrap > li > a:hover i {
                    color: inherit;
                }

            .side-panel .side-wrap > li > a i {
                margin-left: .9rem;
                font-size: 1.1rem;
                color: currentColor;
            }

        .side-panel .side-wrap > li > ul {
            display: none;
            padding: .5rem 0;
            background-color: rgba(46, 41, 78, 0);
        }

            .side-panel .side-wrap > li > ul > li {
                cursor: pointer;
                transition: all .2s ease-out;
            }

                .side-panel .side-wrap > li > ul > li .opt-item {
                    display: block;
                    font-family: med;
                    color: rgba(46, 60, 81, 0.9);
                    text-transform: uppercase;
                    transition: all .3s ease-out;
                    padding: .7rem 1.7rem .7rem 0;
                    font-size: .8rem;
                }

                    .side-panel .side-wrap > li > ul > li .opt-item:hover {
                        color: #db3552;
                    }

                    .side-panel .side-wrap > li > ul > li .opt-item::before {
                        content: "●";
                        color: inherit;
                        margin-left: .5rem;
                    }

        .side-panel .side-wrap > li ul.active {
            display: block;
        }

.side-on {
    transform: translateX(-310px);
    transition: all 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

@media screen and (min-width: 1100px) {
    .menu-btn {
        display: none;
    }
}

.side-close {
    position: absolute;
    display: grid;
    place-items: center;
    bottom: 66px;
    left: 0;
    width: 40px;
    height: 40px;
    background: white;
    font-size: 1.4rem;
    color: #606B7F;
    cursor: pointer;
    z-index: 999;
    border: 1px solid rgba(46, 41, 78, 0.13);
    padding: .25rem .25rem 0 .25rem;
    border-left: none;
    border-radius: 0 50px 50px 0;
}

@media screen and (min-width: 900px) {
    .side-close {
        display: none;
    }
}

.side-social {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .8rem 1rem;
    position: absolute;
    bottom: 0;
    background: white;
    z-index: 999;
    right: 0;
    left: 0;
}

    .side-social a {
        display: flex;
        place-items: center;
        padding: .4rem .5rem;
        border-radius: 60px;
        font-size: 1.3rem;
        transition: all .2s ease;
        border: 1px solid transparent;
    }

        .side-social a i {
            color: currentColor;
        }

    .side-social > :nth-child(1) {
        color: #0088cc;
        border-color: rgba(0, 136, 204, 0.5);
    }

    .side-social > :nth-child(2) {
        color: #25d366;
        border-color: rgba(37, 211, 102, 0.5);
    }

    .side-social > :nth-child(3) {
        color: #3b5998;
        border-color: rgba(59, 89, 152, 0.5);
    }

    .side-social > :nth-child(4) {
        color: #e1306c;
        border-color: rgba(225, 48, 108, 0.5);
    }

    .side-social > :nth-child(5) {
        color: #3b5998;
        border-color: rgba(59, 89, 152, 0.5);
    }

.side_app {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .8rem 1rem;
    bottom: 0;
    background: white;
    z-index: 999;
    right: 0;
    left: 0;
    gap: 1rem;
}

    .side_app a {
        background: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-grow: 1;
        padding: .25rem .5rem;
        border-radius: 5px;
        color: #2E3C51;
        border: 1px solid rgba(46, 41, 78, 0.13);
    }

        .side_app a img {
            width: 100%;
        }

        .side_app a i {
            font-size: 1.7rem;
            margin-left: .7rem;
            color: #001334;
        }

        .side_app a small {
            font-size: .8rem;
            color: #001334;
            flex-grow: 1;
            font-family: med;
        }

            .side_app a small :nth-child(2) {
                margin-top: .2rem;
                font-size: .6rem;
                display: none;
            }

.sidebar_app {
    margin: 1rem 1rem 0.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

    .sidebar_app a {
        width: 130px;
    }

        .sidebar_app a img {
            width: 100%;
        }

.user_prof {
    /*display: none;*/
    border-bottom: 1px solid #e0e4f698;
    margin-bottom: .5rem;
}

    .user_prof div {
        display: flex;
        background: rgba(46, 41, 78, 0);
        padding: .8rem 1rem .8rem;
    }

        .user_prof div img,
        .user_prof div svg {
            width: 50px;
            display: inline-block;
            border-radius: 50%;
            margin-left: 1rem;
        }

        .user_prof div .avatar_info {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            font-size: .85rem;
            font-family: med;
            color: #2E3C51;
        }

            .user_prof div .avatar_info :nth-child(2) {
                color: #606B7F;
            }

.side_login {
    padding: 1rem 0;
    display: flex;
    justify-content: space-evenly;
}

    .side_login a {
        border-radius: 4px;
        padding: .6rem 1rem;
        white-space: nowrap;
        font-size: .9rem;
        font-family: med;
    }

    .side_login :nth-child(1) {
        background: rgba(219, 53, 82, 0.05);
        border: 1px solid rgba(219, 53, 82, 0.1);
        color: #db3552;
    }

    .side_login :nth-child(2) {
        background: rgba(0, 120, 215, 0.05);
        color: #0078D7;
        border: 1px solid rgba(0, 120, 215, 0.1);
    }

.foot_bar {
    position: fixed;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: white;
    bottom: 0;
    left: 0;
    right: 0;
    color: #2E3C51;
    z-index: 800;
    border-top: 1px solid #e0e4f698;
}

@media screen and (min-width: 900px) {
    .foot_bar {
        display: none;
    }
}

.foot_bar :nth-child(3) i {
    font-size: 1.2rem;
}

.foot_bar a {
    padding: .7rem 1rem .5rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    color: currentColor;
}

    .foot_bar a small {
        margin-top: .8rem;
        font-size: .85rem;
    }

@media screen and (max-width: 700px) {
    .foot_bar a small {
        font-size: .75rem;
    }
}

.foot_bar a i {
    font-size: 1.2rem;
}

@media screen and (max-width: 700px) {
    .foot_bar a i {
        font-size: 1rem;
    }
}

.user_sign {
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 1px #e0e4f6;
}

    .user_sign .select2-container .select2-selection--single {
        font-size: 1rem;
        height: 40px;
    }

    .user_sign .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
        line-height: 40px;
    }

.sign_wrap {
    padding-top: 1rem;
}

@media screen and (min-width: 700px) {
    .sign_wrap {
        padding-top: 1rem;
    }
}

.sign_tab {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background: white;
    box-shadow: 0 1px 2px #e0e4f6;
    border-radius: 5px;
    padding: .5rem;
}

    .sign_tab > a {
        flex-grow: 1;
        padding: 1rem 0;
        text-align: center;
        font-family: med;
        color: #606B7F;
    }

@media screen and (max-width: 700px) {
    .sign_tab > a {
        padding: .8rem 0;
    }
}

.sign_tab .select_tab {
    background: rgba(219, 53, 82, 0.1);
    border-radius: 5px;
}

.sign_content {
    padding: 2.5rem 1rem 1rem;
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(2px);
}

    .sign_content .select2 {
        min-width: 100%;
    }

    .sign_content input + label {
        display: initial;
    }

    .sign_content b {
        color: rgba(0, 19, 52, 0.5);
    }

    .sign_content p {
        line-height: 1.8;
        margin-bottom: 1rem;
    }

    .sign_content .select-box {
        margin: 1rem 0 2rem;
    }

    .sign_content label {
        display: block;
    }

        .sign_content label + input {
            border: 1px solid rgba(46, 41, 78, 0.13);
            margin: 1rem 0 2rem;
            width: 100%;
            border-radius: 4px;
            background: white;
            padding: .5rem 1rem;
            transition: all .2s ease;
        }

    .sign_content .login-check {
        margin-bottom: 1.5rem;
    }

        .sign_content .login-check > * {
            cursor: pointer;
        }

    .sign_content .login-submit {
        gap: 1rem;
        display: flex;
    }

        .sign_content .login-submit > * {
            padding: .5rem 1rem;
            flex-grow: 1;
            text-align: center;
            display: grid;
            place-items: center;
            background: rgba(0, 19, 52, 0.05);
            border: 1px solid rgba(0, 19, 52, 0.05);
            color: #2E3C51;
            border-radius: 4px;
        }

        .sign_content .login-submit > button {
            background: rgba(219, 53, 82, 0.1) !important;
            color: #db3552;
            font-family: med;
            font-size: 1rem;
            border-radius: 4px;
            border: 1px solid rgba(219, 53, 82, 0.1);
            cursor: pointer;
        }

.tab {
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    direction: rtl;
    margin: 0 auto;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.tabs {
    display: flex;
    position: relative;
    overflow: hidden;
    margin: 0;
    width: 100%;
}

.tab_content {
    padding-top: 1rem;
}

.tabs li {
    flex-grow: 1;
    line-height: 2.5;
    overflow: hidden;
    padding: 0;
    text-align: center;
    position: relative;
}

.tabs a {
    background-color: #fafafa;
    border-bottom: 1px solid #fff;
    color: rgba(96, 107, 127, 0.5);
    display: block;
    outline: none;
    padding: 5px 20px 10px;
    font-family: med;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    border-bottom: 3px solid rgba(46, 41, 78, 0.13);
}

.tabs_item {
    display: none;
    padding: 20px .5rem 100px;
    color: #2E3C51;
}

    .tabs_item .select2 {
        min-width: 100%;
    }

    .tabs_item input + label {
        display: initial;
    }

    .tabs_item b {
        color: #db3552;
    }

    .tabs_item p {
        line-height: 1.8;
        margin-bottom: 1rem;
        text-align: justify;
    }

    .tabs_item .select-box {
        margin: 1rem 0 2rem;
    }

    .tabs_item label {
        display: block;
    }

        .tabs_item label + input {
            border: 1px solid rgba(46, 41, 78, 0.13);
            margin: 1rem 0 2rem;
            width: 100%;
            border-radius: 4px;
            background: white;
            padding: .5rem 1rem;
        }

    .tabs_item .login-check {
        margin-bottom: 1.5rem;
    }

        .tabs_item .login-check > * {
            cursor: pointer;
        }

    .tabs_item .login-submit {
        gap: 1rem;
        display: flex;
    }

        .tabs_item .login-submit > * {
            padding: .5rem 1rem;
            flex-grow: 1;
            text-align: center;
            background: #606B7F;
            color: white;
            border-radius: 4px;
        }

        .tabs_item .login-submit > button {
            background: #db3552 !important;
            color: white;
            font-size: 1rem;
            border-radius: 4px;
            cursor: pointer;
        }

    .tabs_item:first-child {
        display: block;
    }

.current a {
    color: #db3552;
    border-radius: 4px 4px 0 0;
    border-bottom: 3px solid #db3552;
}

.check_txt {
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-left: .5rem;
}

.cbx {
    position: relative;
    display: block;
    float: right;
    margin-left: .9rem;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 3px;
    /* background-color: #f3f3f5; */
    /* border: 1px solid #eee; */
    /* background-image: linear-gradient(#474749, #606062); */
    /* box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), inset 0 -1px 1px rgba(0, 0, 0, 0.15); */
    transition: all 0.15s ease;
    background-color: #fff;
    border: 1px solid #ccd1d6;
    /* border: 1px solid #e1e6ecad; */
}

    .cbx svg {
        position: absolute;
        top: 3px;
        left: 3px;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke: #fff;
        stroke-width: 2;
        stroke-dasharray: 17;
        stroke-dashoffset: 17;
        transform: translate3d(0, 0, 0);
    }

    .cbx + span,
    .rdo + span {
        padding-bottom: .1rem;
    }

.form-check label {
    cursor: pointer;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    position: absolute;
    opacity: 0;
}

    .form-check input[type="checkbox"]:checked + .cbx {
        background-color: #db3552;
        border: 1px solid #db3552;
        /* background-image: linear-gradient(#255cd2, #1d52c1); */
        /* background-image: red; */
    }

        .form-check input[type="checkbox"]:checked + .cbx svg {
            stroke-dashoffset: 0;
            transition: all 0.15s ease;
        }

.pass-forget {
    margin-top: 2rem;
    padding-top: 1.5rem;
    display: none;
    border-top: 2px dashed rgba(46, 41, 78, 0.13);
}

.cnl-btn {
    cursor: pointer;
}

.expand-toggle {
    background: rgba(219, 53, 82, 0.03);
    padding: .5rem 1rem;
    color: #db3552;
    border-radius: 8px;
    cursor: pointer;
    font-size: .9rem;
}

div.expander {
    position: relative;
    overflow: hidden;
    max-height: 200px;
    width: 100%;
    /* starting height - best to use a multiple of line-height */
    transition: max-height 0.5s ease-in-out;
    -moz-transition: max-height 0.5s ease-in-out;
    -webkit-transition: max-height 0.5s ease-in-out;
}

    div.expander:before {
        /* this applies a faded gradient to the bottom of the expanding content when closed */
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: linear-gradient(#F9FBFB00 50%, #F9FBFB);
        /* match this colour with the colour of the background */
        transition: opacity 0.5s ease-in-out;
        -moz-transition: opacity 0.5s ease-in-out;
        -webkit-transition: opacity 0.5s ease-in-out;
    }

    div.expander.expanded:before {
        /* hides the gradient when expanded */
        opacity: 0;
    }

.share_option {
    background: #fbfbfb;
    margin-bottom: 1rem;
    padding: 1.3rem;
    border-radius: 7px;
    display: none;
}

@media screen and (max-width: 700px) {
    .share_option {
        padding: 1rem;
    }
}

.share_option ::selection {
    color: #fff;
    background: #db3552;
}

.share_option .share_icons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .5rem;
}

    .share_option .share_icons a {
        height: 45px;
        width: 45px;
        font-size: 22px;
        border-radius: 50%;
        text-decoration: none;
        border: 1px solid transparent;
        display: grid;
        place-items: center;
        transition: all .2s ease;
    }

@media screen and (max-width: 600px) {
    .share_option .share_icons a {
        height: 40px;
        width: 40px;
    }
}

.share_option .share_icons a i {
    transition: transform 0.3s ease-in-out;
}

.share_option .share_icons a:nth-child(1) {
    border-color: #1877F2;
    color: #1877F2;
}

    .share_option .share_icons a:nth-child(1):hover {
        color: white;
        background: #1877F2;
    }

.share_option .share_icons a:nth-child(2) {
    border-color: #2f6f7e;
    color: #2f6f7e;
}

    .share_option .share_icons a:nth-child(2):hover {
        color: white;
        background: #2f6f7e;
    }

.share_option .share_icons a:nth-child(3) {
    border-color: #e1306c;
    color: #e1306c;
}

    .share_option .share_icons a:nth-child(3):hover {
        color: white;
        background: #e1306c;
    }

.share_option .share_icons a:nth-child(4) {
    border-color: #25D366;
    color: #25D366;
}

    .share_option .share_icons a:nth-child(4):hover {
        color: white;
        background: #25D366;
    }

.share_option .share_icons a:nth-child(5) {
    border-color: #0088cc;
    color: #0088cc;
}

    .share_option .share_icons a:nth-child(5):hover {
        color: white;
        background: #0088cc;
    }

.share_option .share_field {
    margin: 2rem auto 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid rgba(46, 41, 78, 0.13);
    padding: .3rem;
}

    .share_option .share_field button {
        background: #db3552;
        padding: 0 1rem;
        font-size: .9rem;
        border-radius: 40px;
        color: white;
        cursor: pointer;
    }

    .share_option .share_field input {
        flex-grow: 1;
        text-align: left;
        font-size: .9rem;
        padding: .5rem 1rem;
    }

        .share_option .share_field input:focus {
            box-shadow: none !important;
        }

@media screen and (max-width: 700px) {
    .share_option .share_field input {
        padding: .4rem 0 .4rem .4rem;
    }
}

.share_option.show_on {
    height: 500px;
}

.share_post_btn {
    color: #2E3C51;
    margin-bottom: 1rem;
    cursor: pointer;
}

.change-pass-wrap {
    display: none;
}

.change-pass-form {
    display: grid;
    grid-gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    grid-auto-rows: auto;
    border-top: 2px dashed #e0e4f698;
    padding: 1rem 0;
    margin-top: 1rem;
}

    .change-pass-form > div {
        display: flex;
        flex-flow: column;
        justify-content: flex-end;
    }

        .change-pass-form > div label {
            font-size: .9rem;
            padding: 1rem 0 1.2rem;
            display: flex;
            align-items: center;
        }

            .change-pass-form > div label::before {
                content: "⬤     ";
                font-size: .6rem;
                color: rgba(219, 53, 82, 0.7);
            }

        .change-pass-form > div input {
            border-radius: 4px;
            padding: .5rem 1rem;
            border: 2px solid #e0e4f698;
            transition: all .2s ease;
            font-family: med;
            color: #2E3C51;
        }

    .change-pass-form :nth-last-child(1) > input {
        background-color: #db3552;
        color: white;
        border: 2px solid #db3552;
        margin-top: .5rem;
    }

.pass_btn,
.phone_number_btn {
    display: inline-block;
    background: rgba(219, 53, 82, 0.05);
    color: #db3552;
    display: flex;
    align-items: center;
    padding: .3rem 1rem;
    margin-bottom: .5rem;
    margin-left: 1rem;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid rgba(219, 53, 82, 0.1);
}

@media screen and (max-width: 700px) {
    .pass_btn,
    .phone_number_btn {
        padding: .3rem .4rem;
    }
}

.pass_btn i,
.phone_number_btn i {
    margin-left: .7rem;
}

.user_prof_btns {
    display: flex;
    margin-top: 2rem;
}

@media screen and (max-width: 500px) {
    .user_prof_btns {
        gap: 1rem;
    }

        .user_prof_btns > * {
            flex-grow: 1;
            margin-left: 0;
        }
}

.about {
    position: fixed;
    z-index: 10;
    bottom: 30px;
    left: 30px;
    z-index: 895;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    transition: all 0.2s ease;
    cursor: pointer;
}

@media screen and (min-width: 900px) {
    .about {
        display: none;
    }
}

@media screen and (max-width: 900px) {
    .about {
        bottom: 85px;
        width: 40px;
        height: 40px;
        line-height: 35px;
        font-size: .5rem;
        left: 20px;
        right: unset;
    }

        .about::before {
            content: "";
            width: 100%;
            height: 70%;
            position: absolute;
            bottom: -70%;
        }
}

.about_bg {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background: #2c3e5098;
    height: 100vh;
    display: none;
    z-index: 890;
}

.bg_on {
    display: initial;
}

.about .bg_links {
    width: 35px;
    height: 35px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    position: absolute;
    background: white;
}

    .about .bg_links i {
        font-size: 1rem;
        color: #2E3C51;
    }

@media screen and (max-width: 900px) {
    .about .bg_links i {
        font-size: 1.2rem;
        color: #db3552 !important;
    }
}

.about .logo {
    width: 40px;
    height: 40px;
    z-index: 9;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 10px 7px;
    transition: all 1s 0.2s ease;
    bottom: 0;
    right: 0;
}

@media screen and (max-width: 900px) {
    .about .logo {
        left: 0;
        right: unset;
        box-shadow: 0 1px 2px #e0e4f6;
    }
}

@media screen and (max-width: 700px) {
    .about .logo {
        width: 35px;
        height: 35px;
    }
}

@media screen and (min-width: 900px) {
    .about .logo {
        border: 1px solid rgba(46, 41, 78, 0.13);
    }
}

.about .social {
    opacity: 0;
    right: 0;
    bottom: 0;
    transform: scale(0);
}

    .about .social i {
        color: white !important;
    }

@media screen and (max-width: 900px) {
    .about .social {
        left: 0;
        right: unset;
    }
}

.social_show {
    opacity: 1 !important;
    transform: scale(1) !important;
}

@media screen and (min-width: 900px) {
    .about_show {
        transition: all 0.6s cubic-bezier(0.64, 0.01, 0.07, 1.65);
        height: 320px !important;
        transform: scale(1);
    }
}

@media screen and (max-width: 900px) {
    .about_show {
        width: 105px !important;
        transition: all 0.6s cubic-bezier(0.64, 0.01, 0.07, 1.65);
        height: 105px !important;
        transform: scale(1);
    }
}

.social.portfolio {
    background: #3b5998;
}

@media screen and (min-width: 900px) {
    .social.portfolio {
        bottom: calc(100% - 40px);
        transition: all 0.3s 0.2s cubic-bezier(0.64, 0.01, 0.07, 1.65);
        right: 2px;
    }
}

@media screen and (max-width: 900px) {
    .social.portfolio {
        bottom: calc(100% - 25px);
        left: 0;
        right: unset;
        transition: all 0.3s 0s cubic-bezier(0.64, 0.01, 0.07, 1.65);
    }
}

.social.portfolio i {
    color: #3b5998;
    color: white;
}

.social.dribbble {
    background: #e1306c;
}

@media screen and (min-width: 900px) {
    .social.dribbble {
        bottom: calc(80% - 30px);
        transition: all 0.3s 0.15s cubic-bezier(0.64, 0.01, 0.07, 1.65);
        right: 2px;
    }
}

@media screen and (max-width: 900px) {
    .social.dribbble {
        left: calc(80% - 35px);
        bottom: calc(80% - 30px);
        right: unset;
        transition: all 0.3s 0.1s cubic-bezier(0.64, 0.01, 0.07, 1.65);
    }
}

.social.dribbble i {
    color: white;
}

.social.linkedin {
    background: #59267c;
}

@media screen and (min-width: 900px) {
    .social.linkedin {
        bottom: calc(62% - 30px);
        right: 2px;
        transition: all 0.3s 0.1s cubic-bezier(0.64, 0.01, 0.07, 1.65);
    }
}

@media screen and (max-width: 900px) {
    .social.linkedin {
        left: calc(100% - 40px);
        bottom: 0;
        transition: all 0.3s 0.15s cubic-bezier(0.64, 0.01, 0.07, 1.65);
        right: unset;
    }
}

.social.linkedin i {
    color: white;
}

.social.telegram {
    background: #25D366;
}

@media screen and (min-width: 900px) {
    .social.telegram {
        bottom: calc(41% - 20px);
        right: 2px;
        transition: all 0.3s 0.1s cubic-bezier(0.64, 0.01, 0.07, 1.65);
    }
}

@media screen and (max-width: 900px) {
    .social.telegram {
        left: calc(80% - 35px);
        bottom: calc(-80% + 30px);
        right: unset;
        transition: all 0.3s 0.05s cubic-bezier(0.64, 0.01, 0.07, 1.65);
    }
}

.social.telegram i {
    color: white;
}

.social.viber {
    right: 0;
    background: #2d364c;
}

@media screen and (min-width: 900px) {
    .social.viber {
        bottom: calc(18% - 0px);
        right: 2px;
        transition: all 0.3s 0s cubic-bezier(0.64, 0.01, 0.07, 1.65);
    }
}

@media screen and (max-width: 900px) {
    .social.viber {
        left: 0;
        right: unset;
        bottom: calc(-100% + 30px);
        transition: all 0.3s 0s cubic-bezier(0.64, 0.01, 0.07, 1.65);
    }
}

.social.viber i {
    color: white;
}

h1:focus,
h2:focus,
h3:focus,
h4:focus,
h5:focus,
h6:focus,
p:focus,
ul:focus,
li:focus,
button:focus,
a:focus,
i:focus,
input:focus,
body:focus {
    outline: 0;
}

.option_box {
    display: none;
}

.option_btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background-color: #db3552;
    color: white;
    font-size: 1rem;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    cursor: pointer;
}

@media screen and (max-width: 900px) {
    .option_btn {
        width: 35px;
        height: 35px;
        bottom: 80px;
        left: 15px;
    }
}

.popy,
.app_intro {
    position: fixed;
    margin: 0;
    background-color: white;
    top: 15%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10000;
    max-height: 90vh;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 3px 3px RGB(0 0 0/20%);
}

@media screen and (max-width: 700px) {
    .popy,
    .app_intro {
        top: 10%;
    }
}

.popy_show {
    display: initial;
}

.option_popup {
    background: white;
    padding: .2rem;
    gap: 1rem;
    overflow: hidden;
}

    .option_popup .option_head {
        background: #db3552;
        color: white;
        padding: .7rem 1.5rem;
        border-radius: 2px;
        white-space: nowrap;
        margin-bottom: .5rem;
    }

    .option_popup .option_list {
        padding: .7rem;
        display: flex;
        flex-flow: column;
        gap: .8rem;
    }

        .option_popup .option_list a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: .4rem .8rem;
            border-radius: 4px;
        }

            .option_popup .option_list a span {
                font-family: med;
            }

            .option_popup .option_list a i {
                font-size: 1.4rem;
            }

.our_social {
    position: fixed;
    bottom: 15px;
    left: 10px;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    border-radius: 8px;
    padding: .5rem 1rem;
}

@media screen and (max-width: 900px) {
    .our_social {
        display: none;
    }
}

.our_social a {
    font-size: 1.5rem;
    transition: all .3s ease;
    color: rgba(0, 19, 52, 0.2);
}

    .our_social a:hover {
        color: #001334;
    }

    .our_social a i {
        display: flex;
    }

.our_social .ri-viber-brands {
    margin-bottom: -.25rem;
}

.lang_btn {
    padding: .4rem .7rem .4rem .4rem;
    position: relative;
    background: rgba(0, 19, 52, 0.02);
    color: #001334;
    border: 1px solid rgba(0, 19, 52, 0.05);
}

@media screen and (max-width: 900px) {
    .lang_btn {
        padding: 0;
        background: transparent;
        border: none;
    }
}

.lang_btn > section {
    display: flex;
    align-items: center;
}

.lang_btn .btn-txt {
    margin-left: 1.5rem;
    font-family: med;
}

@media screen and (max-width: 900px) {
    .lang_btn .btn-txt {
        display: none;
    }
}

.lang_btn img {
    height: 20px;
}

.lang_drop {
    position: absolute;
    top: 130%;
    right: 0;
    background: white;
    z-index: 10000;
    width: 140px;
    border-radius: 4px;
    padding: .4rem;
    border: 1px solid #e0e4f698;
    display: none;
    box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.05);
}

    .lang_drop a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .5rem;
        border-radius: 4px;
    }

        .lang_drop a:hover {
            background: #F2F4F6;
        }

    .lang_drop img {
        height: 20px;
    }

.main_img_prw {
    padding: 1rem .5rem;
}

    .main_img_prw > img {
        width: 100%;
        border-radius: 10px;
        border: 1px solid #e0e4f698;
    }

.app_intro_wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 910 !important;
    background: #2c3e5098;
    cursor: pointer;
    transition: all .3s ease;
}

    .app_intro_wrap .app_intro {
        background: #FDF8F2;
        max-width: 90%;
        width: 400px;
        border-radius: 7px;
        overflow: hidden;
        text-align: center;
        color: #2E3C51;
        font-family: med;
        padding-bottom: 1.5rem;
    }

        .app_intro_wrap .app_intro h3 {
            font-size: 1.3rem;
            margin-bottom: 3rem;
            font-family: bold;
        }

        .app_intro_wrap .app_intro .sidebar_app {
            margin: 0;
            justify-content: space-evenly;
            gap: 0;
        }

        .app_intro_wrap .app_intro img {
            width: 100%;
        }

        .app_intro_wrap .app_intro .share_icons {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            margin-top: 2rem;
        }

            .app_intro_wrap .app_intro .share_icons a {
                font-size: 1.5rem;
                color: #2E3C51;
                transition: all .2s ease;
            }

                .app_intro_wrap .app_intro .share_icons a:hover {
                    color: #606B7F;
                }

        .app_intro_wrap .app_intro .intro_close {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 1.8rem;
            color: #606B7F;
            opacity: .3;
            cursor: pointer;
        }

.top_header {
    background: #2E3C51;
    color: white;
    font-size: .9rem;
    display: none;
}

    .top_header > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .top_header > div a {
            color: white;
        }

    .top_header .top_social {
        display: flex;
        align-items: center;
    }

    .top_header .top_support {
        display: flex;
        align-items: center;
    }

.page_loading {
    position: fixed;
    display: grid;
    place-items: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: 12000;
    background: #2c3e5091;
    color: #2E3C51;
    display: none;
}

    .page_loading .loading_box {
        background: white;
        padding: 2rem;
        border-radius: 7px;
        width: max-content;
        transform: translateY(-15vh);
        box-shadow: 0 3px 3px RGB(0 0 0/20%);
        text-align: center;
    }

        .page_loading .loading_box h4 {
            font-family: med;
            font-size: 1.5rem;
            color: #606B7F;
        }

        .page_loading .loading_box h5 {
            margin: 1.5rem 0 2rem;
        }

.main-title {
    margin: 3rem auto 2.5rem;
    display: flex;
    align-items: center;
}

    .main-title h3 {
        color: #001334;
    }

    .main-title i {
        font-size: 1.3rem;
        margin-left: 1rem;
        color: #db3552;
    }

    .main-title svg {
        margin-left: 1rem;
        color: #db3552;
    }

.new-notie {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 10rem;
}

    .new-notie button {
        background: white;
        box-shadow: 0 1px 1px #e0e4f6;
        font-family: med;
        flex-grow: 1;
        border-radius: 4px;
        cursor: pointer;
        padding: .7rem 1rem;
    }

.breadcrumb {
    display: flex;
    align-items: center;
    font-size: .8rem;
    border-bottom: 1px solid #f1f1f3;
    padding: 1rem 0;
}

@media screen and (max-width: 700px) {
    .breadcrumb {
        font-size: .8rem;
    }
}

.breadcrumb a {
    color: #606B7F;
    font-family: med;
    transition: all .2s ease;
}

    .breadcrumb a:nth-child(1) {
        color: #db3552;
    }

    .breadcrumb a:hover + i {
        color: #db3552;
        transform: rotate(180deg);
        font-weight: bold;
    }

    .breadcrumb a:hover {
        color: #001334;
    }

.breadcrumb span {
    margin: 0 .7rem;
}

.breadcrumb i {
    margin: 0 .5rem;
    transition: all .2s ease;
}

.single-title {
    display: flex;
    margin: 1.5rem 0 2.5rem;
    font-family: bold;
    font-size: 1.3rem;
    position: relative;
}

    .single-title a {
        margin-left: .5rem;
    }

@media screen and (max-width: 700px) {
    .single-title {
        font-size: 1.1rem;
        margin: 1.5rem 0;
    }
}

.post-statu {
    display: flex;
    align-items: center;
    margin-left: .7rem;
}

    .post-statu span {
        letter-spacing: 1px;
        font-size: 1rem;
        padding: .3rem .45rem 0.1rem;
        border-radius: 3px;
        font-size: .8rem;
        font-family: bold;
        background-color: rgba(219, 53, 82, 0.05);
        color: #db3552;
        border: 1.5px solid rgba(219, 53, 82, 0.07);
        border-radius: 4px;
    }

.post-statu {
    letter-spacing: 1px;
    font-size: 1rem;
    padding: .3rem .45rem 0.1rem;
    border-radius: 3px;
    font-size: .8rem;
    font-family: bold;
    background-color: rgba(219, 53, 82, 0.05);
    color: #db3552;
    border: 1.5px solid rgba(219, 53, 82, 0.07);
    border-radius: 4px;
}

@media screen and (max-width: 1000px) {
    .post-statu span {
        border-radius: 4px;
    }
}

.single-post {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 2rem;
}

@media screen and (max-width: 1000px) {
    .single-post {
        gap: 1.5rem;
    }
}

.single-post .single-info {
    flex: 1 1 300px;
}

@media screen and (max-width: 1000px) {
    .single-post .single-info {
        flex: 1 1 100%;
    }
}

.single-post .single-gallery {
    flex: 2.5 1 300px;
    min-width: 300px;
    direction: ltr !important;
}

@media screen and (max-width: 1000px) {
    .single-post .single-gallery {
        order: -1;
    }
}

.info-line {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    font-size: .95rem;
    color: #2E3C51;
}

    .info-line a span {
        color: #db3552 !important;
        margin-right: .3rem;
    }

    .info-line .post_code b {
        color: #db3552;
        margin-left: .7rem;
    }

    .info-line .single-price {
        font-family: med;
        color: #db3552;
        direction: ltr;
        margin-right: auto;
        font-size: 1.1rem;
        border-radius: 30px;
    }

.single-call {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

    .single-call a {
        display: flex;
        align-items: center;
    }

    .single-call .call-btn {
        padding: .6rem 1rem .4rem;
        background-color: rgba(0, 19, 52, 0.03);
        border: 1px solid rgba(0, 19, 52, 0.05);
        border-radius: 6px;
        display: flex;
        align-items: center;
        margin-left: auto;
    }

        .single-call .call-btn i,
        .single-call .call-btn img {
            margin-left: 1rem;
            font-size: 1.2rem;
            color: #2E3C51 !important;
        }

        .single-call .call-btn small {
            margin-left: .9rem;
            color: #2E3C51;
            font-size: 1.2rem;
        }

        .single-call .call-btn span {
            color: #2E3C51;
            letter-spacing: 1px;
            font-family: med;
            margin-top: .1rem;
        }

    .single-call .whatsapp {
        border-radius: 5px;
        margin-left: 1.3rem;
    }

        .single-call .whatsapp i {
            color: #25D366;
            font-size: 2.2rem;
        }

    .single-call .viber {
        font-size: 1.9rem;
        color: #59267c;
    }

.share-option {
    display: flex;
    justify-content: space-around;
    position: absolute;
    left: 25px;
    visibility: hidden;
    top: 0;
    height: max-content;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform, opacity;
    opacity: 0;
    z-index: 300;
    background-color: white;
}

    .share-option a {
        font-size: 1.5rem;
        margin-right: 1rem;
    }

        .share-option a i {
            color: #606B7F;
            transition: all .3s ease;
        }

        .share-option a:hover i {
            color: #001334;
            transform: scale(1.2);
        }

.see-share {
    visibility: initial;
    transform: translateX(15px);
    opacity: 1;
}

.car-info {
    display: flex;
    align-items: center;
    flex-flow: column;
    margin-bottom: 2rem;
}

    .car-info ul {
        width: 100%;
    }

        .car-info ul li {
            padding: .8rem 0;
        }

            .car-info ul li + li {
                border-top: 1px solid #e1e6ec75;
            }

    .car-info .info-banner {
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: rgba(242, 244, 246, 0.5);
        border: 1px solid #e0e4f698;
        padding: 1rem 0;
        width: 100%;
        border-radius: 5px;
        margin-bottom: 1rem;
    }

@media screen and (max-width: 800px) {
    .car-info .info-banner {
        font-size: .9rem;
    }
}

.car-info .info-banner div {
    display: flex;
    align-items: center;
    flex-flow: column;
    color: #606B7F;
}

    .car-info .info-banner div span {
        margin-top: 1rem;
        color: #001334;
    }

.info-option {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

    .info-option span {
        margin: 0 .5rem;
    }

        .info-option span:nth-child(1) {
            color: #001334;
        }

    .info-option i {
        margin-left: 1.3rem;
        color: rgba(0, 128, 0, 0.7);
        font-size: 1.5rem;
    }

.single-text {
    margin: 2rem 0;
}

    .single-text span {
        color: #db3552;
        font-family: med;
    }

    .single-text div {
        margin: 1rem 0;
        text-align: justify;
        line-height: 1.9;
    }

.serv-single {
    display: flex;
    align-items: center;
    flex-flow: column;
    align-items: flex-start;
    margin-bottom: .5rem;
}

    .serv-single a {
        margin-bottom: 1rem;
    }

        .serv-single a span {
            color: #db3552;
            margin-left: .5rem;
        }

.shop_page_link {
    padding: .8rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 5px;
    color: #2E3C51;
    background-color: rgba(242, 244, 246, 0.3);
    border: 1px solid #e0e4f698;
    display: flex;
    align-items: center;
}

    .shop_page_link .shop_icon {
        padding-left: 1rem;
        margin-left: .5rem;
        display: grid;
        place-items: center;
    }

        .shop_page_link .shop_icon i {
            font-size: 2.3rem;
            color: #606B7F;
        }

        .shop_page_link .shop_icon img {
            width: 37px;
        }

    .shop_page_link .shop_info {
        color: #2E3C51;
    }

        .shop_page_link .shop_info :nth-child(2) {
            color: rgba(0, 19, 52, 0.5);
            font-size: .88rem;
            margin-top: .5rem;
        }

.similar-ads {
    margin-top: 3rem;
}

.similar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px dashed rgba(46, 41, 78, 0.13);
    margin-bottom: 2rem;
}

    .similar-title span,
    .similar-title a {
        display: inherit;
        color: #db3552;
    }

        .similar-title span i,
        .similar-title a i {
            margin-left: .7rem;
            color: #db3552;
            font-size: 1.1rem;
        }

    .similar-title a {
        font-size: .9rem;
    }

.similar-content {
    display: grid;
    grid-gap: 1.3rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: auto;
    margin-bottom: 3rem;
}

.cv-export {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(242, 244, 246, 0.5);
    border: 1px solid #e0e4f698;
    padding: .6rem 1rem;
    border-radius: 5px;
    margin-top: 1rem;
}

    .cv-export i {
        font-size: 1.2rem;
    }

.booky {
    color: #db3552 !important;
}

.forms {
    user-select: none;
    margin-bottom: 2rem;
}

    .forms label ~ input {
        min-width: 280px;
        background-color: #fff;
        padding: .5rem 1rem;
        border-radius: 5px;
        border: 1px solid rgba(46, 41, 78, 0.2);
        width: 100%;
    }

    .forms .seller span {
        font-size: .5rem;
        color: #db3552;
        margin-left: .5rem;
    }

    .forms textarea {
        resize: none;
        direction: rtl;
        display: block;
        width: 100%;
        padding: .7rem 1rem;
        border-radius: 5px;
        outline: none;
        outline-style: none;
        background-color: #fff;
        border: 1px solid rgba(46, 41, 78, 0.13);
        font-family: reg;
    }

        .forms textarea::placeholder {
            font-family: inherit;
            font-size: 1rem;
        }

.form_section {
    background: white;
    box-shadow: 0 1px 1px #e0e4f6;
    margin-bottom: 2rem;
    padding: 1rem 1.2rem 1.3rem;
    border-radius: 8px;
}

    .form_section .select2-container--default .select2-selection--single .select2-selection__arrow {
        padding: 0 1.3rem;
        height: 40px;
    }

    .form_section h4 {
        padding: .5rem 0 1rem;
        font-family: med;
        color: #db3552;
        font-size: 1rem;
        border-bottom: 2px dashed #e0e4f698;
        text-align: center;
        margin-bottom: 1rem;
        border-radius: 5px;
    }

.price_check_text {
    line-height: 2;
    padding: .6rem 1rem;
    background: #f8f8f9;
    border-radius: 8px;
    font-size: .95rem;
}

    .price_check_text b {
        color: #db3552;
        font-family: med;
    }

.other-option h3 {
    margin-bottom: 1.3rem;
    border-bottom: 1px solid rgba(46, 41, 78, 0.13);
    padding: 1rem 0;
}

@media screen and (max-width: 700px) {
    .other-option h3 {
        display: none;
    }
}

.other-option h3 span {
    color: rgba(219, 53, 82, 0.8);
    margin-left: .5rem;
}

.sub_grid {
    display: grid;
    grid-gap: 0;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-auto-rows: auto;
    padding-top: 1rem;
}

@media screen and (max-width: 700px) {
    .sub_grid {
        display: grid;
        grid-gap: 0;
        grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
        grid-auto-rows: auto;
    }
}

.sub_grid .cbx {
    margin-left: .8rem !important;
    flex-shrink: 0;
}

.sub_grid1 {
    display: grid;
    grid-gap: 0;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-auto-rows: auto;
    padding-top: 1rem;
}

.img_up,
.img_prw {
    padding: 0 .5rem;
}

.img_input {
    background: #F2F4F6;
    border: 2px dashed rgba(46, 41, 78, 0.13);
    width: 100%;
    padding: 2rem 1rem;
    text-align: center;
    border-radius: 8px;
}

.img_prw {
    margin-top: 2rem;
}

    .img_prw .img-div {
        position: relative;
        cursor: pointer;
    }

        .img_prw .img-div img {
            height: 115px;
            width: 100%;
            object-fit: cover;
            display: flex;
            border: 3px solid white;
            border-radius: 6px;
            box-shadow: 0 1px 2px #e0e4f6;
            transition: all 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
        }

        .img_prw .img-div .middle {
            position: absolute;
            top: -7px;
            right: -7px;
        }

        .img_prw .img-div .remove_img {
            background: #db3552;
            width: 25px;
            height: 25px;
            color: white;
            border-radius: 50%;
            font-size: 1rem;
            display: grid;
            place-items: center;
            border: 2px solid #fff;
            cursor: pointer;
            transition: all .2s ease-out;
        }

            .img_prw .img-div .remove_img:hover {
                border: 2px solid #db3552;
                transform: scale(1.1);
            }

.img_prw_grid {
    display: grid;
    grid-gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-auto-rows: auto;
    padding: 1rem;
}

.img_up {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

    .img_up .btn {
        border: 2px dashed rgba(128, 128, 128, 0.3);
        color: gray;
        background-color: white;
        padding: 30px 5px 20px;
        border-radius: 8px;
        font-family: med;
        font-size: 18px;
        width: 100%;
        display: flex;
        flex-flow: column;
    }

        .img_up .btn b {
            color: #db3552;
        }

        .img_up .btn svg {
            fill: #db3552;
            margin-bottom: 2rem;
        }

        .img_up .btn img {
            width: 40px;
            margin-bottom: 1.5rem;
        }

    .img_up input[type=file] {
        font-size: 100px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }

.hide_input {
    display: none;
}

.seller {
    margin-top: 1rem;
}

#sell_price {
    margin: .5rem 0 2rem;
}

.form-title {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    font-family: med;
    font-size: 1.1rem;
}

    .form-title span {
        margin-left: .5rem;
        color: #db3552;
        font-size: 1.1rem;
    }

.add-request .req-describe {
    margin-top: 2rem;
}

    .add-request .req-describe p {
        text-align: justify;
        line-height: 2;
        font-size: 1rem;
        color: #2E3C51;
    }

        .add-request .req-describe p span {
            color: #db3552;
            font-size: .5rem;
            margin-left: .3rem;
        }

.add-request .selection {
    margin: 1.5rem 0 0;
}

    .add-request .selection select {
        padding: .5rem 1rem !important;
        border: 1px solid rgba(46, 41, 78, 0.2);
    }

    .add-request .selection h3 {
        margin-bottom: 1.3rem;
    }

@media screen and (max-width: 700px) {
    .add-request .selection h3 {
        display: none;
    }
}

.add-request .selection h3 span {
    font-size: .5rem;
    margin-left: .5rem;
    color: #db3552;
}

.add-request .selection .select-box {
    margin-left: 0 !important;
}

.slider-img {
    width: 100%;
    overflow: hidden;
}

    .slider-img .slider-grid {
        border-radius: 4px;
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 160px 160px 90px;
        grid-template-areas: "a a a a"
            "a a a a"
            "b c d e";
    }

@media screen and (max-width: 900px) {
    .slider-img .slider-grid {
        grid-template-rows: 150px 150px 80px;
    }
}

@media screen and (max-width: 700px) {
    .slider-img .slider-grid {
        grid-template-rows: 130px 130px 60px;
    }
}

@media screen and (max-width: 500px) {
    .slider-img .slider-grid {
        grid-template-rows: 110px 110px 45px;
    }
}

@media screen and (min-width: 1000px) {
    .slider-img .slider-grid {
        background-color: #e1e6eccb;
        padding: 0.3rem;
    }
}

.slider-img .slider-grid div {
    grid-area: s;
}

    .slider-img .slider-grid div:nth-child(1) {
        grid-area: a;
    }

    .slider-img .slider-grid div:nth-child(2) {
        grid-area: b;
    }

    .slider-img .slider-grid div:nth-child(3) {
        grid-area: c;
    }

    .slider-img .slider-grid div:nth-child(4) {
        grid-area: d;
    }

    .slider-img .slider-grid div:nth-child(5) {
        grid-area: e;
    }

.slider-img .slider-grid .image {
    width: 100%;
    display: flex;
    overflow: hidden;
}

    .slider-img .slider-grid .image img {
        border-radius: 3px;
        object-fit: cover;
        object-position: center;
        width: 100%;
    }

.vgs__container {
    border-radius: unset !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 767px) {
    .vgs__container {
        height: 75vh !important;
    }
}

@media screen and (min-width: 500px) {
    .vgs__gallery {
        bottom: 5vh !important;
    }
}

.vgs__container {
    background-color: transparent !important;
}

.vgs__gallery__container__img {
    width: 15% !important;
    height: 80px !important;
}

@media screen and (max-width: 767px) {
    .vgs__gallery__container__img {
        width: 15% !important;
        height: 50px !important;
    }
}

@media screen and (max-width: 400px) {
    .vgs__gallery__container__img {
        width: 13% !important;
        height: 30px !important;
    }
}

@media (max-width: 767px) {
    .vgs__gallery {
        padding-left: 1rem;
    }

    .vgs__next,
    .vgs__prev {
        background-color: rgba(0, 0, 0, 0.445) !important;
        color: white !important;
        width: 40px !important;
        height: 40px !important;
    }
}

.vgs__gallery {
    padding-left: 2rem;
}

.vgs__gallery__container__img {
    border-radius: 5px !important;
}

.shop_social {
    margin-top: 1rem;
}

    .shop_social h4 {
        text-align: center;
        border: 1px solid #f3f3f5;
        font-family: med;
        background: #f6f6f8;
        color: #30405A;
        border-radius: 5px;
        padding: .8rem;
    }

@media screen and (max-width: 700px) {
    .shop_social h4 {
        font-size: .8rem;
    }
}

.shop_social > div {
    display: flex;
    gap: 1rem;
}

    .shop_social > div a {
        background: rgba(0, 120, 215, 0.05);
        flex-grow: 1;
        display: inline-flex;
        color: #0078D7;
        justify-content: space-around;
        padding: .6rem 0;
        border-radius: 5px;
        align-items: center;
    }

@media screen and (max-width: 700px) {
    .shop_social > div a {
        font-size: .8rem;
    }
}

.shop_social > div a i {
    font-size: 1.2rem;
}

.shop-content {
    display: grid;
    grid-gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: auto;
    margin-bottom: 3rem;
}

.from_top {
    margin-top: 11rem;
    min-height: 600px;
}

@media screen and (max-width: 800px) {
    .from_top {
        margin-top: 9rem;
    }
}

.user-header {
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(46, 41, 78, 0.1);
    border-radius: 10px;
    margin-bottom: 2rem;
}

.panel-info {
    display: flex;
    align-items: center;
    line-height: 1.5;
    margin-bottom: 2rem;
    background: white;
    box-shadow: 0 1px 1px #e0e4f6;
    font-family: med;
    color: #606B7F;
    padding: 1rem 1rem .8rem;
    border-radius: 6px;
}

@media screen and (max-width: 500px) {
    .panel-info {
        font-size: 14px;
    }
}

.panel-info > span {
    margin-left: .7rem;
    color: #db3552 !important;
}

.panel-info .alert {
    margin-right: auto;
}

.panel-info .delete-all {
    padding: .3rem .6rem;
    display: flex;
    align-items: center;
    color: #db3552;
    border-radius: 4px;
    background-color: rgba(219, 53, 82, 0.05);
    flex-shrink: 0;
    cursor: pointer;
    font-size: .9rem;
    margin-right: auto;
}

@media screen and (max-width: 500px) {
    .panel-info .delete-all {
        font-size: 14px;
    }
}

.panel-info .delete-all i {
    margin: 0 .7rem 0 .1rem;
}

.user-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid rgba(46, 41, 78, 0.13);
}

    .user-head div,
    .user-head a {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

@media screen and (max-width: 700px) {
    .user-head div,
    .user-head a {
        font-size: 0.85rem;
    }
}

.user-head span {
    color: #db3552;
    font-family: med;
    margin: 0 .2rem;
}

.user-head i {
    margin-right: .5rem;
    color: #db3552;
    font-size: 1.1rem;
}

.user-tab {
    width: clamp(300px, 95%, 1366px);
    margin: 0 auto;
}

    .user-tab ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .user-tab ul li {
            flex-grow: 1;
        }

            .user-tab ul li a {
                width: 100%;
                display: flex;
                align-items: center;
                padding: 1.3rem 0 1rem;
                justify-content: center;
                transition: all .2s ease;
                color: inherit;
            }

@media screen and (max-width: 700px) {
    .user-tab ul li a {
        padding: 1.5rem 0 1rem;
    }
}

.user-tab ul li a:hover {
    color: #db3552;
}

.user-tab ul li a i {
    margin-left: .8rem;
}

@media screen and (max-width: 700px) {
    .user-tab ul li a i {
        display: none;
    }
}

@media screen and (max-width: 700px) {
    .user-tab ul li a i {
        display: none;
    }

    .user-tab ul li a span {
        font-size: .95rem;
    }
}

@media screen and (max-width: 400px) {
    .user-tab ul li a span {
        font-size: .9rem;
    }
}

.selected {
    color: #db3552 !important;
    position: relative;
}

.select_tab {
    color: #db3552 !important;
    position: relative;
}

    .select_tab ::after {
        content: "";
        position: absolute;
        height: 2.5px;
        width: 60%;
        border-radius: 10px 10px 0 0;
        left: 20%;
        bottom: 0;
        background: #db3552;
    }

.profile-content {
    background-color: #fff;
    padding: 1rem;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 1px #e0e4f6;
}

    .profile-content img {
        position: absolute;
        top: 80px;
        left: 0px;
        opacity: .05;
        transform: rotateZ(20deg);
    }

    .profile-content .each_item {
        margin: 1.2rem 0;
        padding-right: 1.5rem;
        position: relative;
    }

@media screen and (max-width: 700px) {
    .profile-content .each_item {
        display: flex;
        justify-content: space-between;
    }
}

.profile-content .each_item span:nth-child(1) {
    color: #db3552;
    margin-left: .5rem;
}

.profile-content .each_item::before {
    content: "•";
    position: absolute;
    font-size: 2rem;
    top: -6px;
    right: 0;
    color: rgba(219, 53, 82, 0.7);
}

.profile-content .each_item input {
    border: 2px solid rgba(46, 41, 78, 0.13);
    padding: .5rem 1rem;
    margin-top: 1rem;
    border-radius: 4px;
    margin-left: .5rem;
}

    .profile-content .each_item input::placeholder {
        color: #30405A;
    }

.profile-content .each_item button {
    display: inline-flex;
    padding: .5rem 1rem;
    box-sizing: border-box;
    border: none;
    vertical-align: middle;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    font-size: 14px;
    overflow: hidden;
    outline: none;
    cursor: pointer;
    color: white;
    background-color: #db3552;
    border-radius: 4px;
}

@media screen and (max-width: 1000px) {
    .profile-content .each_item button {
        border-radius: 4px;
    }
}

.alarming {
    position: relative;
    overflow: hidden;
}

    .alarming::after {
        content: "•";
        position: absolute;
        font-size: 3rem;
        color: white;
        bottom: -63px;
        right: 50%;
        z-index: -1 !important;
        transform: translate(50%, -50%);
        animation: spinnerThree 1s linear infinite;
    }

.login_sign::before {
    background: -webkit-linear-gradient(45deg, #db3552, #2E3C51 80%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.user-adv {
    display: grid;
    grid-gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: auto;
}

.card-data {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1rem;
    direction: rtl;
}

    .card-data h3 {
        display: block;
        font-size: 0.85rem;
        color: #db3552;
        width: 100%;
        margin-bottom: 1rem;
    }

    .card-data i {
        color: #cfcfcf;
        margin-left: 0.5rem;
        cursor: pointer;
        transition: all .3s ease-out;
    }

    .card-data div {
        color: #001334;
    }

    .card-data button {
        border: 1px solid rgba(219, 53, 82, 0.06);
        border-radius: 4px;
        padding: .1rem .5rem;
        margin-left: .5rem;
        color: rgba(219, 53, 82, 0.8);
        direction: ltr;
        background-color: rgba(219, 53, 82, 0.05);
        font-family: med;
        cursor: pointer;
        transition: all .2s ease;
        display: flex;
        align-items: baseline !important;
    }

        .card-data button:hover {
            background-color: #db3552;
            color: white;
        }

    .card-data span,
    .card-data a {
        margin-left: .5rem;
        font-size: 0.85rem;
        color: #db3552;
        position: relative;
        cursor: pointer;
    }

.card-statu {
    display: flex;
    justify-content: space-between;
    padding: .8rem 1.1rem;
    font-size: .93rem;
}

.card-option {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1rem;
    direction: rtl;
}

    .card-option > :nth-child(1) {
        color: green;
        display: none;
        background: rgba(37, 211, 102, 0.05);
        padding: .6rem .5rem;
        border-radius: 5px;
    }

    .card-option > div {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 1rem;
        font-size: .9rem;
        font-family: med;
        color: #30405A;
    }

        .card-option > div > :nth-child(2) {
            direction: ltr;
        }

.option-btn .btn-submit {
    flex: 0 1 30%;
    text-align: center;
    background-color: rgba(219, 53, 82, 0.05);
    border-radius: 2px;
    cursor: pointer;
    transition: all .3s ease;
}

    .option-btn .btn-submit:hover {
        background: #db3552;
    }

        .option-btn .btn-submit:hover h3 {
            color: white;
        }

    .option-btn .btn-submit h3 {
        color: rgba(219, 53, 82, 0.9);
        font-size: .85rem;
        transition: all .3s ease;
        padding: .5rem 0 .4rem;
    }

.user-request {
    display: grid;
    grid-gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: auto;
}

    .user-request .request {
        display: flex;
        align-items: center;
        align-items: stretch;
        border: 1px solid rgba(46, 41, 78, 0.13);
        background-color: #fff;
        padding: .8rem;
        font-size: 14px !important;
        border-radius: 7px;
        position: relative;
    }

        .user-request .request .req-number {
            background-color: rgba(219, 53, 82, 0.05);
            color: #db3552;
            border: 1.5px solid rgba(219, 53, 82, 0.07);
            border-radius: 4px;
            position: absolute;
            display: flex;
            align-items: center;
            font-family: bold;
            padding: .2rem .4rem 0;
            top: 10px;
            left: 10px;
        }

@media screen and (max-width: 1000px) {
    .user-request .request .req-number {
        border-radius: 4px;
    }
}

.user-request .request .req-img {
    display: grid;
    place-items: center;
    height: 85px;
    width: 85px;
    background-color: rgba(0, 19, 52, 0.18);
    border-radius: 6px;
}

    .user-request .request .req-img i {
        font-size: 2.5rem;
        opacity: .7;
    }

.user-request .request .req-info {
    padding-right: .3rem;
    display: inherit;
    flex-flow: column;
    justify-content: space-between;
    flex-grow: 1;
}

    .user-request .request .req-info > div + div {
        margin-top: .7rem;
    }

    .user-request .request .req-info span {
        margin-left: .7rem;
    }

    .user-request .request .req-info .req-text {
        font-family: med;
        font-size: 1rem;
    }

    .user-request .request .req-info .req-option {
        display: inherit;
        justify-content: space-between;
        align-items: flex-end;
    }

        .user-request .request .req-info .req-option i {
            font-size: 1.3rem;
        }

        .user-request .request .req-info .req-option > a {
            color: #db3552;
        }

.facture-cart {
    overflow: hidden;
}

    .facture-cart > div {
        padding: .7rem 1rem !important;
        background-color: white;
        border-radius: 8px;
        border: 1px solid #e0e4f698;
    }

    .facture-cart span {
        border-radius: 5px;
        display: flex;
        line-height: 2.8;
        font-family: med;
        font-size: .95rem;
        color: #606B7F;
        justify-content: space-between;
        align-items: center;
    }

    .facture-cart .facture-head {
        font-family: bold;
        margin-top: .8rem;
        font-size: 1.2rem;
        color: #2E3C51;
        border-radius: 0;
        position: relative;
    }

    .facture-cart .facture-option {
        padding: .5rem 0 0.2rem;
        gap: .8rem;
    }

        .facture-cart .facture-option a {
            flex: 1 1 40%;
            background-color: rgba(219, 53, 82, 0.05);
            line-height: 2;
            border-radius: 3px;
            white-space: nowrap;
            color: rgba(219, 53, 82, 0.8);
            border: 1px solid rgba(219, 53, 82, 0.1);
            padding: 0 1rem;
            text-align: center;
            font-size: .9rem;
            padding-top: .2rem;
            transition: all .3s ease;
        }

            .facture-cart .facture-option a:hover {
                color: white;
                background: #db3552;
            }

    .facture-cart .facture-footer {
        border-bottom: 2px dashed rgba(46, 41, 78, 0.13);
        padding: .2rem 0 .9rem;
        line-height: 1.3;
        color: #db3552;
        border-radius: 0;
        position: relative;
        font-size: 1.3rem;
    }

        .facture-cart .facture-footer i {
            font-size: 1.7rem;
        }

        .facture-cart .facture-footer::before {
            position: absolute;
            content: "";
            width: 17px;
            height: 17px;
            bottom: -10px;
            border-radius: 50%;
            left: -27px;
            border: 1px solid #e0e4f698;
            background-color: #F8F9FC;
            z-index: 500;
        }

        .facture-cart .facture-footer::after {
            position: absolute;
            content: "";
            width: 17px;
            height: 17px;
            bottom: -10px;
            border-radius: 50%;
            right: -27px;
            border: 1px solid #e0e4f698;
            background-color: #F8F9FC;
            z-index: 500;
        }

.support_wrap {
    border-radius: 10px;
    color: #2E3C51;
    padding: 0 1rem;
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(2px);
}

@media screen and (max-width: 700px) {
    .support_wrap {
        padding: .5rem;
    }
}

.support_wrap .support_title {
    background: white;
    padding: 1.2rem 1rem;
    border-radius: 7px;
    font-size: 1.3rem;
    font-family: med;
    text-align: center;
}

@media screen and (max-width: 700px) {
    .support_wrap .support_title {
        font-size: 1.2rem;
    }
}

.support_wrap .support_img {
    border-radius: 10px;
    display: flex;
    overflow: hidden;
}

.support_item {
    border-radius: 10px;
    margin-bottom: 4rem;
    background: #fff;
    backdrop-filter: blur(2px);
    border: 1px solid #F2F4F6;
    padding: 1rem;
}

@media screen and (max-width: 700px) {
    .support_item {
        padding: 1rem 0;
        border: none;
    }
}

.support_item h4 {
    text-align: center;
    padding: 0.2rem 3rem 1rem;
    margin: 0 auto;
    font-family: med;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    position: relative;
    border-bottom: 2px dashed #F2F4F6;
}

.support_item div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    margin-top: 2rem;
    font-family: med;
    padding: 0 .5rem;
    color: #2E3C51;
}

@media screen and (max-width: 700px) {
    .support_item div {
        flex-flow: column;
        padding: 0;
    }

        .support_item div a {
            margin: 2rem 0;
            text-align: center;
            color: #606B7F;
            font-size: .9rem !important;
        }
}

.support_item div span {
    display: flex;
    align-items: center;
}

    .support_item div span i {
        margin-left: .7rem;
        font-size: 1.2rem;
        border-radius: 5px;
        border: none !important;
        background: none !important;
    }

.support_item div a {
    font-size: 1rem;
    font-family: med;
    color: currentColor;
}

.support_call {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}

    .support_call a {
        flex-grow: 1;
        display: inline-flex;
        justify-content: inherit;
        align-items: center;
        padding: .5rem .8rem;
        border-radius: 5px;
        font-family: med;
    }

@media screen and (max-width: 600px) {
    .support_call a {
        justify-content: center;
    }

        .support_call a small {
            display: none;
        }
}

.support_call a i {
    margin-right: 1.5rem;
    font-size: 1.2rem;
}

@media screen and (max-width: 600px) {
    .support_call a i {
        margin-right: 0;
        font-size: 2rem;
    }
}

.training_wrap {
    padding: 0 1rem;
}

    .training_wrap .tr_title {
        background: white;
        border-radius: 8px;
        text-align: center;
        padding: 1.2rem 1rem;
        margin-bottom: 2rem;
        font-family: med;
        font-size: 1.2rem;
        color: #2E3C51;
        background: rgba(255, 255, 255, 0);
        backdrop-filter: blur(2px);
    }

    .training_wrap .tr_img {
        border-radius: 7px;
        overflow: hidden;
        display: flex;
        border: 2px solid whitesmoke;
    }

    .training_wrap .tr_list {
        background: #fff;
        border: 1px solid #F2F4F6;
        padding: 1rem;
        margin-top: 2rem;
        border-radius: 8px;
        overflow: hidden;
    }

        .training_wrap .tr_list .tr_list_head {
            text-align: center;
            padding: .3rem 0 1rem;
            border-bottom: 2px dashed #e0e4f698;
            margin-bottom: 1rem;
            font-family: med;
            color: #2E3C51;
            font-size: 1.2rem;
        }

        .training_wrap .tr_list .tr_list_main {
            padding: .6rem;
            display: grid;
            grid-gap: 1.5rem;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            grid-auto-rows: auto;
        }

            .training_wrap .tr_list .tr_list_main a::before {
                content: "⬤";
                color: #db3552;
                margin-left: .5rem;
                font-size: .5rem;
            }

    .training_wrap .tr_item {
        background: white;
        border-radius: 8px;
        margin-top: 2.5rem;
        padding: 1rem;
        background: rgba(255, 255, 255, 0);
        backdrop-filter: blur(2px);
    }

@media screen and (max-width: 700px) {
    .training_wrap .tr_item {
        padding: 0;
        margin-top: 3.5rem;
    }
}

.training_wrap .tr_item h4 {
    padding: .5rem 3.5rem 1rem 1rem;
    font-family: med;
    position: relative;
    margin-bottom: 1.5rem;
    color: #2E3C51;
}

    .training_wrap .tr_item h4::before {
        content: "";
        position: absolute;
        top: 3px;
        right: -5px;
        width: 40px;
        height: 40px;
        opacity: .8;
        background-image: url(../../images/asset/Asset.svg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }

.training_wrap .tr_item .tr_text {
    line-height: 1.8;
}

    .training_wrap .tr_item .tr_text p {
        margin-bottom: 1rem;
    }

.training_wrap .tr_item .tr_video {
    padding: 1rem;
    background: #f5f5f7;
    font-size: 2rem;
    font-family: med;
    color: #ccc;
    border-radius: 5px;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
}

.app_wrap {
    padding-top: 3rem;
}

    .app_wrap .app_box {
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(2px);
        overflow: hidden;
    }

@media screen and (min-width: 700px) {
    .app_wrap .app_box {
        border: 2px solid #F2F4F6;
    }
}

.app_wrap .app_box h3 {
    text-align: center;
    font-family: med;
    font-size: 1.2rem;
    color: #606B7F;
    padding-bottom: 1rem;
    border-bottom: 2px dashed #F2F4F6;
    padding: 1rem 0;
}

.app_wrap .app_box p {
    line-height: 2;
    text-align: justify;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
}

.app_wrap .app_box .app_link {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 700px) {
    .app_wrap .app_box .app_link {
        padding: 0 1rem;
        gap: 1rem;
    }
}

.app_wrap .app_box .app_link a {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
    border-top: 2px solid #F2F4F6;
}

@media screen and (max-width: 700px) {
    .app_wrap .app_box .app_link a {
        border-radius: 7px;
        padding: .5rem 0;
        border: 2px solid #F2F4F6;
    }
}

.app_wrap .app_box .app_link a:nth-child(1) {
    border-left: 2px solid #F2F4F6;
}

.app_wrap .app_box .app_link a img {
    width: 120px;
}

@media screen and (max-width: 700px) {
    .app_wrap .app_box .app_link a img {
        width: 100px;
    }
}

.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    margin-top: 30vh;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

    .error-page h1 {
        font-size: 30vh;
        font-weight: bold;
        position: relative;
        margin: -8vh 0 0;
        padding: 0;
    }

        .error-page h1:after {
            content: attr(data-h1);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            color: transparent;
            /* webkit only for graceful degradation to IE */
            background: -webkit-repeating-linear-gradient(-45deg, #71b7e6, #69a6ce, #b98acc, #ee8176, #b98acc, #69a6ce, #9b59b6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: 400%;
            text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.25);
            animation: animateTextBackground 10s ease-in-out infinite;
        }

        .error-page h1 + p {
            color: #606B7F;
            font-size: 2rem;
            font-family: med;
            line-height: 10vh;
            position: relative;
        }

            .error-page h1 + p:after {
                content: attr(data-p);
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                color: transparent;
                text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
                -webkit-background-clip: text;
                background-clip: text;
            }

#particles-js {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* display: none; */
}

@keyframes animateTextBackground {
    0% {
        background-position: 0 0;
    }

    25% {
        background-position: 100% 0;
    }

    50% {
        background-position: 100% 100%;
    }

    75% {
        background-position: 0 100%;
    }

    100% {
        background-position: 0 0;
    }
}

@media (max-width: 767px) {
    .error-page h1 {
        font-size: 32vw;
    }

        .error-page h1 + p {
            font-size: 8vw;
            line-height: 10vw;
            max-width: 70vw;
        }
}

a.back {
    position: fixed;
    right: 40px;
    bottom: 40px;
    background: -webkit-repeating-linear-gradient(-45deg, #71b7e6, #69a6ce, #b98acc, #ee8176);
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    padding: 15px 30px;
    text-decoration: none;
    transition: 0.25s all ease-in-out;
}

    a.back:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    }

.home_link {
    background: rgba(219, 53, 82, 0.05);
    color: #db3552;
    font-family: reg;
    display: flex;
    font-size: 1rem;
    padding: .7rem 1.1rem;
    border-radius: 50px;
    margin-top: 1rem;
    width: max-content;
    margin: 0 auto;
    z-index: 999;
}

    .home_link i {
        margin-left: .7rem;
    }

.error-page p {
    margin-bottom: 2rem;
}

@media screen and (max-width: 700px) {
    .error-page p {
        font-size: 1.5rem !important;
    }
}

@media screen and (max-width: 700px) {
    .error-page p {
        font-size: 1.2rem !important;
    }
}

.waiting {
    color: #f85a40;
    background: rgba(248, 90, 64, 0.05);
}

.approved {
    color: #1da851;
    background: rgba(37, 211, 102, 0.05);
}

.not_approved {
    color: #bc213c;
    background: rgba(219, 53, 82, 0.05);
}

.check {
    color: #25D366 !important;
}
/*# sourceMappingURL=main.css.map */