.fontpage-tabs .tabs-header .page-width,
.index-carousel .page-width,
.new-login .alerts-container .page-width,
.page-width.no-padding,
fieldset {
    padding: 0;
}

header,
img {
    display: block;
}

.cart-sc .items .item:last-child,
.cart-sc.cart-empty.error-page .main-wrapper .empty-illu img,
.p-index .designers .item:last-child,
.p-page .blog-post-header .headline,
body,
fieldset,
h1,
h2,
h3,
header,
p {
    margin: 0;
}

.card>a,
body,
header a {
    color: var(--c-text-1);
}

.card,
.cart-sc .form-coupon-wrap .tabcontent .input-wrapper,
.cart-sc .items .item .license-icon,
.fontpage-tabs .tabs-header,
.form-control .select-wrapper,
.inp-control,
.license-desc-modal .modal__container,
.m-invoice-req .main-wrapper,
.main-font-desc .section.gallery .item .photo-wrapper,
.main-font-desc .section.gallery .photo-wrapper,
.main-font-desc .section.gallery .photos-carusel,
.main-nav li,
.new-login .login-form .inp-input,
.order-summary .item .license-icon,
.select-license-modal .l-content .content-wrapper,
body,
header .cart .icon-wrapper,
header .profile-picture {
    position: relative;
}

.search-modal .modal-content,
.search-modal .overlay {
    -webkit-animation-duration: 0.4s;
    top: 0;
    right: 0;
    left: 0;
}

*,
.modal__container,
:after,
:before {
    box-sizing: border-box;
}

@font-face {
    font-family: "IRANYekanX VF";
    src: url("../font/iranyekanxVF/IRANYekanXVF.woff") format("woff-variations"), url("../font/iranyekanxVF/IRANYekanXVF.woff") format("woff"), url("../font/iranyekanxVF/IRANYekanXVF.woff2") format("woff2");
    font-display: fallback;
}

@font-face {
    font-family: IRANYekanX;
    font-style: normal;
    font-weight: 300;
    src: url("../font/iranyekanx/woff2/IRANYekanX-Light.woff2") format("woff2"), url("../font/iranyekanx/woff/IRANYekanX-Light.woff") format("woff");
}

@font-face {
    font-family: IRANYekanX;
    font-style: normal;
    font-weight: 400;
    src: url("../font/iranyekanx/woff2/IRANYekanX-Regular.woff2") format("woff2"), url("../font/iranyekanx/woff/IRANYekanX-Regular.woff") format("woff");
}

@font-face {
    font-family: IRANYekanX;
    font-style: normal;
    font-weight: 500;
    src: url("../font/iranyekanx/woff2/IRANYekanX-Medium.woff2") format("woff2"), url("../font/iranyekanx/woff/IRANYekanX-Medium.woff") format("woff");
}

@font-face {
    font-family: IRANYekanX;
    font-style: normal;
    font-weight: 700;
    src: url("../font/iranyekanx/woff2/IRANYekanX-Bold.woff2") format("woff2"), url("../font/iranyekanx/woff/IRANYekanX-Bold.woff") format("woff");
}

@font-face {
    font-family: IRANYekanX;
    font-style: normal;
    font-weight: 900;
    src: url("../font/iranyekanx/woff2/IRANYekanX-ExtraBold.woff2") format("woff2"), url("../font/iranyekanx/woff/IRANYekanX-ExtraBold.woff") format("woff");
}

:root {
    --c-grey-light-8: hsl(240 24% 98%);
    --c-grey-light-7: hsl(240 24% 96%);
    --c-grey-light-6: hsl(240 14% 94%);
    --c-grey-light-5: hsl(240 10% 93%);
    --c-grey-light-4-5: hsl(240 8% 90%);
    --c-grey-light-4: hsl(240 6% 83%);
    --c-grey-light-3: hsl(240 5% 79%);
    --c-grey-light-2: hsl(240 3% 69%);
    --c-grey: hsl(240 2% 57%);
    --c-grey-dark-2: hsl(240 1% 39%);
    --c-grey-dark-3: hsl(240 1% 29%);
    --c-grey-dark-4: hsl(240 2% 23%);
    --c-grey-dark-5: hsl(240 2% 18%);
    --c-grey-dark-6: hsl(240 3% 11%);
    --c-red-1: hsl(358, 96%, 89%);
    --c-red-2: hsl(358, 96%, 74%);
    --c-red-3: hsl(358, 95%, 66%);
    --c-red: hsl(358, 95%, 62%);
    --c-red-5: hsl(358, 94%, 57%);
    --c-red-6: hsl(358, 95%, 47%);
    --c-blue-1: hsl(210, 81%, 78%);
    --c-blue-2: hsl(210, 80%, 67%);
    --c-blue-3: hsl(210, 80%, 50%);
    --c-blue: hsl(210, 100%, 45%);
    --c-blue-5: hsl(210, 100%, 40%);
    --c-blue-6: hsl(210, 100%, 36%);
    --c-grey-bg: hsl(240 14% 97%);
    --c-white: hsl(0, 0%, 100%);
    --c-black: hsl(0 0% 0%);
    --c-text-1: hsl(240 3% 11%);
    --till: #1dd9bb;
    --blue: #009191;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffbb01;
    --green: #02931b;
    --teal: #20c997;
    --cyan: #00baba;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #009191;
    --secondary: #6c757d;
    --success: #02931b;
    --info: #00baba;
    --warning: #ffbb01;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --ff-primary: "dana VF", dana, tahoma;
    --fs-base: 18px;
    --fs-1: 0.579rem;
    --fs-2: 0.694rem;
    --fs-2-5: 0.722rem;
    --fs-3: 0.833rem;
    --fs-4: 1rem;
    --fs-5: 1.2rem;
    --fs-6: 1.44rem;
    --fs-7: 1.728rem;
    --fs-8: 2.074rem;
    --fs-9: 2.488rem;
    --fs-extra: 3rem;
    --fw-regular: 400;
    --fw-extra: 900;
    --fw-damnboyhethic: 900;
    --br-1: 4px;
    --br-2: 8px;
    --br-3: 12px;
    --br-4: 16px;
    --br-5: 24px;
    --br-6: 36px;
    --br-base: 8px;
    --br-round: 9999px;
    --bs-grey-1: hsla(0, 0%, 0%, 0.05) 0px 0px 0px 1px;
    --bs-grey-2: hsla(0, 0%, 0%, 0.05) 0px 1px 2px 0px;
    --bs-grey-3: hsla(0, 0%, 0%, 0.1) 0px 1px 3px 0px, hsla(0, 0%, 0%, 0.06) 0px 1px 2px 0px;
    --bs-grey-4: hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.06) 0px 2px 4px -1px;
    --bs-grey-5: hsla(0, 0%, 0%, 0.1) 0px 10px 15px -3px, hsla(0, 0%, 0%, 0.05) 0px 4px 6px -2px;
    --bs-grey-6: hsla(0, 0%, 0%, 0.1) 0px 20px 25px -5px, hsla(0, 0%, 0%, 0.04) 0px 10px 10px -5px;
    --bs-grey-7: hsla(0, 0%, 0%, 0.25) 0px 25px 50px -12px;
    --bs-grey-inset: hsla(0, 0%, 0%, 0.06) 0px 2px 4px 0px inset;
    --bs-tailwind: 0 0 #0000, 0 0 #0000, 0 0 1px rgb(66 71 76 / 32%), 0 4px 8px rgb(66 71 76 / 6%), 0 8px 48px rgb(238 238 238);
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;
    --sp-10: 128px;
    --sp-11: 192px;
    --sp-12: 256px;
    --sp-13: 384px;
    --breakpoint-xs: 320px;
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --header-height: 58px;
    --global-padding: 0 15px;
    --c-bg-default: hsl(0, 0%, 100%);
    --c-bg-light: hsl(210, 29%, 97%);
    --c-bg-dark: hsl(213, 11%, 16%);
    --c-gray-5: hsl(0, 0%, 94%);
    --c-gray-10: hsl(0, 0%, 93%);
    --c-gray-15: hsl(0, 0%, 92%);
    --c-gray-20: hsl(0, 0%, 90%);
    --c-gray-25: hsl(0, 0%, 88%);
    --c-gray-30: hsl(0, 0%, 85%);
    --c-gray-35: hsl(0, 0%, 80%);
    --c-gray-40: hsl(0, 0%, 75%);
    --c-gray-45: hsl(0, 0%, 70%);
    --c-gray-50: hsl(0, 0%, 65%);
    --c-gray-55: hsl(0, 0%, 60%);
    --c-gray-60: hsl(0, 0%, 55%);
    --c-gray-65: hsl(0, 0%, 50%);
    --c-gray-70: hsl(0, 0%, 40%);
    --c-gray-75: hsl(0, 0%, 35%);
    --c-gray-80: hsl(0, 0%, 30%);
    --c-gray-85: hsl(0, 0%, 25%);
    --c-gray-90: hsl(0, 0%, 15%);
    --c-gray-95: hsl(0, 0%, 10%);
    --c-gray-97: hsl(0, 0%, 5%);
    --c-gray-100: hsl(0, 0%, 2%);
    --c-shade-3: hsl(240, 9%, 98%);
    --c-shade-5: hsl(240, 10%, 96%);
    --c-shade-10: hsl(216, 16%, 94%);
    --c-shade-15: hsl(210, 19%, 89%);
    --c-shade-20: hsl(208, 19%, 85%);
    --c-shade-25: hsl(208, 17%, 80%);
    --c-shade-30: hsl(208, 16%, 77%);
    --c-shade-40: hsl(208, 16%, 72%);
    --c-shade-50: hsl(208, 14%, 67%);
    --c-shade-60: hsl(208, 14%, 62%);
    --c-shade-70: hsl(208, 12%, 57%);
    --c-shade-80: hsl(208, 12%, 52%);
    --c-shade-90: hsl(208, 10%, 47%);
    --c-shade-100: hsl(208, 10%, 42%);
    --c-border-default: hsl(0, 0%, 90%);
    --c-border-light: hsl(0, 0%, 85%);
    --c-border-dark: hsl(0, 0%, 80%);
    --c-text: hsl(240, 1%, 8%);
    --c-text-secondary: hsl(240, 1%, 17%);
    --c-text-tertiary: hsl(210, 1%, 27%);
    --c-text-disabled: hsl(0, 0%, 58%);
    --new-login-width: 400px;
}

::-moz-selection {
    background: hsl(240 3% 11%);
    color: #fff;
    text-shadow: none;
}

::selection {
    background: hsl(240 3% 11%);
    color: #fff;
    text-shadow: none;
}

@-webkit-keyframes shine {
    100% {
        right: 200%;
    }
}

@keyframes shine {
    100% {
        right: 200%;
    }
}

html {
    line-height: 1.4;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
    font-size: 18px;
}

body {
    font-family: IRANYekanX, tahoma;
    direction: rtl;
    height: 100%;
}

@supports (font-variation-settings: normal) {
    body {
        font-family: "IRANYekanX VF", tahoma;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0.5rem;
    margin-top: 0;
    line-height: 1;
}

p {
    margin-bottom: 1rem;
    margin-top: 0;
    max-width: 40em;
}

img {
    max-width: 100%;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
}

.search-modal .field-wrapper,
header {
    width: 100%;
    border-bottom: 1px solid var(--c-grey-light-5);
}

textarea {
    resize: vertical;
}

body.disable-scroll {
    overflow: hidden;
    height: 100vh;
    margin: 0;
}

header,
header .icon-wrapper {
    height: var(--header-height);
}

.page-content {
    padding-top: var(--header-height);
}

.page-width {
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
    max-width: 1220px;
}

.footer .top .page-width,
.main-font-desc .text-content-wrapper iframe,
.page-container {
    max-width: 100%;
}

header {
    z-index: 100;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(190%) blur(16px);
    backdrop-filter: saturate(190%) blur(16px);
}

body.disable-scroll header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.card>a,
header a {
    text-decoration: none;
}

header .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}

header .branding {
    width: 92px;
}

header .icon-wrapper {
    display: block;
    padding: 14px 6px;
    cursor: pointer;
    background-color: #0000;
    transition: background-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    display: grid;
    place-items: center;
}

.blog-index-content .cats-list .category:hover,
.comments-faq-sc .comment.type-reply .media,
header .icon-wrapper:focus,
header .icon-wrapper:hover {
    background-color: var(--c-grey-light-6);
}

header .icon-wrapper img {
    height: 24px;
    width: 24px;
}

header .icon-wrapper.profile-picture img {
    width: 30px;
    height: 30px;
    border-radius: var(--br-round);
}

header .cart .cart-counter {
    position: absolute;
    top: 8px;
    right: 4px;
    font-size: var(--fs-3);
    color: var(--white);
    background-color: var(--c-red);
    min-width: 16px;
    height: 16px;
    display: grid;
    place-content: center;
    border-radius: var(--br-1);
}

header .profile-picture .login-indicator {
    width: 12px;
    height: 12px;
    background-color: #20c997;
    position: absolute;
    margin: auto;
    border-radius: 999px;
    border: 2px solid #fff;
    right: 8px;
    top: 10px;
}

.blog-post-header .head .hero,
.cart-sc .discount-steps .texts .sub-text,
.cart-sc .items .item .title-details .details,
.cart-sc.cart-empty .cart-p-title .counter,
.comments-faq-sc .comments-sc .sc-title .icon,
.content-box .box .right,
.faq-content .search-result,
.font-card .cta,
.font-card .desktop-link,
.font-card .font-title,
.font-lab-sc .fl-results.long>.wrapper:after,
.font-lab-sc .fl-view-more,
.font-p-designers .designer .fonts,
.footer .main .footer-badges,
.footer .main .nav,
.form-control .input-wrapper.custom-check input,
.form-control .switch-radio .switch-wrapper input[type="radio"],
.fp-header .cat:last-child::after,
.hide-in-mobile,
.i-card .cta,
.i-card .details .title,
.license-view .top .dash,
.loading-alert-download,
.m-invoice-req .inv-radio,
.main-nav .menu-banners,
.micromodal-slide,
.new-login .alerts-container .sw-alert .swal2-modal::before,
.new-login .login-box .right,
.new-login .tabs-header::after,
.order-summary .item .font-dl-bt span,
.order-summary .item.license .end,
.orders-list .item .license .website-script span,
.orders-list .item .license-desk-act,
.p-faq-search .faq-cats,
.p-faq-search .faq-content .all-questions,
.p-index .license .font-icon,
.p-license-check .search-result,
.p-license-check-search .latest-licenses,
.p-page .blog-post-header .page-container::before,
.page-search-bar .back-to-home,
.pre-load-images,
.pre-load-images img,
.profile-edit #formTypeToggle.t-business .personal-form,
.profile-edit #formTypeToggle.t-personal .business-form,
.profile-edit .avatar input[type="file"],
.purchase-options .bundles .extra,
.purchase-options .licenses .owner-info,
.purchase-options .registered-license .license-select .owner-info,
.recommended-posts .post-summary,
.search-modal,
.section-title .icon,
.select-license-modal,
.select-license-modal .license-desc .list li.hidden,
.select-license-modal .license-head,
.select-license-modal .op-label .badge,
.select-license-modal .op-label .old-price,
.user-top .profile-act .icon {
    display: none;
}

.cart-sc .form-coupon-wrap .alert-sc.show,
.license-view .top span,
.main-nav.active .overlay,
.micromodal-slide.is-open,
.p-faq-search .faq-content .search-result,
.p-index .latest-fonts .filters .filter.active::after,
.p-license-check-search .search-result,
.profile-edit #formTypeToggle.t-business .business-form,
.profile-edit #formTypeToggle.t-personal .personal-form,
.purchase-options .registered-license .owner-info,
.search-modal.is-open,
.select-license-modal .license-desc .only-for-personal,
.select-license-modal.is-open {
    display: block;
}

.search-modal .overlay {
    position: fixed;
    z-index: 120;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    overflow: auto;
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: saturate(190%) blur(12px);
    backdrop-filter: saturate(190%) blur(12px);
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    animation-duration: 0.4s;
}

.search-modal .modal-content {
    position: fixed;
    height: 140px;
    z-index: 130;
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
    animation-duration: 0.4s;
}

.search-modal .field-wrapper {
    position: relative;
    display: flex;
    height: var(--header-height);
    background-color: var(--white);
}

.search-modal .close-modal-bt,
.search-modal .search-bt {
    width: 50px;
    display: grid;
    place-items: center;
    outline: 0;
    cursor: pointer;
}

.search-modal .close-modal-bt {
    position: relative;
    border: none;
    background-color: var(--white);
}

.search-modal .close-modal-bt::after {
    content: "";
    position: absolute;
    height: 28px;
    width: 1px;
    background-color: var(--c-grey-light-5);
    left: 0;
}

.search-modal .search-field {
    padding-right: 10px;
    flex-grow: 1;
    outline: 0;
    border: none;
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.search-modal .search-field::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background: url("../img/icons/trash-grey-2.svg") 50% 50% / contain no-repeat;
    opacity: 0;
    pointer-events: none;
}

.search-modal .search-field:focus::-webkit-search-cancel-button {
    opacity: 1;
    pointer-events: all;
}

.search-modal .search-bt {
    padding: 0;
    border: none;
    background-color: var(--white);
}

.new-login .social-login-box .social-login-btn .icon,
.search-modal .search-bt img {
    width: 24px;
    height: 24px;
}

.search-modal .suggestions {
    transition: 0.26s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.search-modal .suggestions .title {
    font-size: var(--fs-2);
    margin: 10px 10px 0 0;
    color: var(--c-grey);
}

.search-modal .search-history {
    display: flex;
    overflow-x: scroll;
    padding: 12px 0;
}

.search-modal .search-history .item {
    flex-shrink: 0;
    display: block;
    text-decoration: none;
    font-size: var(--fs-3);
    color: var(--c-grey-dark-4);
    background-color: var(--white);
    box-shadow: var(--bs-grey-2);
    padding: 4px 8px;
    margin-left: 8px;
    border-radius: var(--br-1);
    border: 1px solid var(--c-grey-light-4);
    transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.recommended-sc .sc-title .rf-control-button-next,
.search-modal .search-history .item:first-child {
    margin-right: 10px;
}

.search-modal .search-history .item:hover {
    border-color: var(--c-grey-light-6);
    background-color: var(--c-grey-light-6);
    box-shadow: none;
}

.font-lab-sc .controls .bt-wrapper,
.search-modal .result-wrapper {
    padding: 5px;
}

.search-modal .result {
    text-decoration: none;
    color: initial;
    display: block;
    margin-bottom: 10px;
}

.fontpage-tabs .tabs-content .font-specs .spec:hover,
.search-modal .result:hover .font-wrapper {
    background-color: var(--c-grey-light-8);
}

.search-modal .font-wrapper {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: var(--br-2);
}

.search-modal .font-wrapper .thumb {
    width: 48px;
    height: 48px;
    padding: 8px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--br-2);
}

.i-card .thumb img,
.search-modal .font-wrapper img,
.sw-loader .swal2-modal .swal2-html-container img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

.p-index .license .details,
.search-modal .font-wrapper .details {
    width: calc(100% - 48px);
    padding-right: 10px;
}

.blog-post-content .posts-seo-tags .title,
.main-nav .sub-nav.active .nav-link.back-bt .nav-title,
.search-modal .font-wrapper .title {
    font-weight: 500;
    font-variation-settings: "wght" 500;
}

.search-modal .font-wrapper .currency {
    font-weight: 300;
    font-variation-settings: "wght" 300;
    font-size: var(--fs-2-5);
    color: var(--c-grey);
}

.main-nav {
    position: fixed;
}

.main-nav .overlay {
    display: none;
    position: fixed;
    z-index: 120;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: saturate(50%) blur(12px);
    backdrop-filter: saturate(50%) blur(12px);
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s;
}

.main-nav .menu-wrapper,
.main-nav .sub-nav {
    width: min(80%, 360px);
    right: min(-80%, -360px);
    position: fixed;
    top: 0;
    transition: right 0.36s cubic-bezier(0.25, 0.1, 0.25, 1);
    bottom: 0;
}

.main-nav .menu-wrapper {
    z-index: 130;
    height: 100%;
    min-height: 100vh;
    overflow-y: scroll;
    background: var(--white);
}

.main-nav .sub-nav.active,
.main-nav.active .menu-wrapper {
    right: 0;
}

.main-nav .sub-nav {
    overflow-y: scroll;
    z-index: 140;
    background: #fff;
    padding-bottom: 80px;
}

.faq-content .questions-list,
.main-nav ul,
.select-license-modal .license-desc .list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav .navbar {
    position: relative;
    padding-top: 24px;
}

.main-nav .nav-link {
    text-decoration: none;
    color: var(--c-text-1);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    position: relative;
}

.main-nav .nav-link.custom-mob-link span {
    display: block;
    text-align: center;
    width: 100%;
    padding: 10px 0;
    background-color: var(--c-grey-light-6);
    border-radius: 8px;
    font-variation-settings: "wght" 400;
}

.main-nav li.has-child::after {
    content: "";
    position: absolute;
    border-style: solid;
    border-color: var(--c-red);
    border-width: 2px 2px 0 0;
    transform: rotate(-135deg);
    height: 8px;
    width: 8px;
    left: 30px;
    top: calc(50% - 3px);
}

.main-nav .nav-icon {
    width: 42px;
    height: 42px;
    background-color: var(--c-grey-light-8);
    border-radius: var(--br-3);
    overflow: hidden;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-nav .mega-menu-wrapper .lvl-3 .m-link>.nav-icon img {
    max-width: 28px;
    max-height: 28px;
}

.main-nav .nav-title {
    color: var(--c-grey-dark-4);
    font-variation-settings: "wght" 600, "dots" 1;
}

.main-nav .nav-link.back-bt {
    border-bottom: 1px solid var(--c-grey-light-5);
    margin-bottom: 4px;
    padding: 16px 16px 14px;
    opacity: 0;
    transition: 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.main-nav .nav-link.back-bt .nav-icon {
    width: auto;
    height: auto;
    background-color: transparent;
    border-radius: 0;
}

.footer .brands-carousel .brand:hover .tooltip,
.footer .brands-carousel .brand:hover img,
.main-nav .sub-nav.active .nav-link.back-bt,
.p-index .designers .item:hover .font-counter {
    opacity: 1;
}

.main-nav .nav-link.back-bt .nav-icon img {
    width: 25px;
    height: auto;
    background-color: #0000;
    border-radius: 0;
    overflow: hidden;
}

.main-nav .nav-footer {
    display: grid;
    place-items: center;
    margin: 100px auto 0;
    width: 180px;
}

.main-nav .social-links {
    display: flex;
    justify-content: space-between;
    width: 180px;
    margin-bottom: 16px;
}

.main-nav .more {
    display: flex;
    justify-content: space-between;
    width: 180px;
}

.main-nav .more a {
    font-size: var(--fs-2);
    color: var(--c-grey-light-2);
}

.main-nav .lang {
    margin-top: 16px;
    width: 100%;
    direction: ltr;
}

.main-nav .lang .icon {
    width: 18px;
    opacity: 0.5;
    display: none;
}

.main-nav .lang .select {
    position: relative;
}

.main-nav .lang .select::after {
    content: '';
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 5px;
    width: 16px;
    height: 16px;
    background-image: url(../img/icons/chevron-right-red.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.main-nav .lang .select select {
    font-size: 12px;
    font-weight: 300;
    height: 32px;
    border-radius: 999px;
    padding: 4px 16px 0 16px;
    background-color: rgb(255 255 255 / 10%);
    border: 1px solid #0000003d;
    color: #616161;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    width: 100%;
}

.card-large.slider a,
.i-card a {
    color: inherit;
    text-decoration: none;
}

.main-nav .close-nav {
    width: 42px;
    height: 42px;
    background-color: #fff;
    border-radius: 999px 0 0 999px;
    z-index: 150;
    top: 6px;
    position: fixed;
    right: min(-42px, -42px);
    transition: 0.36s cubic-bezier(0.25, 0.1, 0.25, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-nav.active .close-nav {
    right: calc(min(80%, 360px) - 30px);
}

.main-nav .close-nav img {
    width: 36px;
    height: 36px;
    opacity: 0.24;
    border-radius: 999px;
}

.index-carousel .page-container {
    background-color: var(--c-grey-light-8);
    padding: 15px 0;
    border-radius: 0 0 var(--br-5) var(--br-5);
}

.featured-categories .page-container,
.index-carousel .main-carousel,
.p-index .designers .page-container {
    max-width: 100%;
    overflow: hidden;
}

.index-carousel .slide {
    max-width: 480px;
    padding: 0 15px;
}

.index-carousel .aspect-ratio {
    width: 100%;
    display: inline-block;
    position: relative;
}

.i-card .thumb::after,
.index-carousel .aspect-ratio::after {
    padding-top: 100%;
    display: block;
    content: "";
}

.index-carousel .index-cards-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
}

.index-carousel .slide.banner img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--br-4);
}

.i-card {
    height: 31%;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    overflow: hidden;
}

.i-card .wrapper {
    height: 100%;
    padding: 10px;
    display: flex;
    align-items: flex-end;
    position: relative;
    background-color: var(--white);
    border-radius: var(--br-3);
    transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.designer-info .profile-photo img,
.i-card .thumb,
.index-carousel .slide.multiple .card:nth-child(2) .wrapper {
    border-radius: var(--br-2);
}

.i-card .details,
.i-card .thumb {
    transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.i-card:hover .wrapper {
    background-color: var(--c-grey-dark-5);
}

.index-carousel .slide.multiple .card:first-child .wrapper {
    border-radius: var(--br-4) var(--br-4) var(--br-2) var(--br-2);
}

.index-carousel .slide.multiple .card:nth-child(3) .wrapper {
    border-radius: var(--br-2) var(--br-2) var(--br-4) var(--br-4);
}

.i-card .thumb {
    width: 28%;
    max-height: 100%;
    display: inline-block;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 6px -3px;
}

.blog-latest .post:hover .post-cover .overlay,
.i-card:hover .details,
.i-card:hover .thumb,
.p-index .designers .item:hover .overlay {
    opacity: 0;
}

.i-card .thumb .icon-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    padding: 15px;
}

.i-card .details {
    width: 72%;
    padding-right: 15px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
}

.card-large.slider .price .value,
.i-card .price .value {
    font-variation-settings: "wght" 700;
    letter-spacing: -1px;
}

.cart-sc .cart-total-sc .g-total .currency,
.cart-sc .cart-total-sc .row .currency,
.comments-faq-sc .comment .date,
.i-card .price .currency,
.select-license-modal .license-owner label .sub {
    font-size: var(--fs-2);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    color: var(--c-grey);
}

.card-large.slider .tag,
.i-card .tags,
.index-f-cats .title {
    font-weight: 300;
    font-variation-settings: "wght" 300, "dots" 1;
}

.i-card .tags {
    font-size: var(--fs-2);
    color: var(--c-grey-dark-4);
    margin-bottom: 2px;
}

.i-card .details .tag {
    display: none;
    border-radius: var(--br-round);
    padding: 0 12px 2px;
    background-color: var(--c-grey-light-5);
    opacity: 0.9;
}

.i-card .details .tag.font-weight {
    display: initial;
}

.i-card .oneliner {
    position: absolute;
    width: calc(72% - 30px);
    left: 10px;
    top: 12px;
    height: 35px;
    display: flex;
    align-items: flex-start;
    justify-content: right;
}

.i-card:hover .oneliner {
    justify-content: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.i-card .oneliner img {
    max-width: 100%;
    max-height: 100%;
    opacity: 0.85;
}

.i-card:hover .oneliner img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(319deg) brightness(102%) contrast(101%);
}

.card-large.slider {
    width: 100%;
    max-width: 480px;
    position: relative;
    overflow: hidden;
    border-radius: var(--br-4);
}

.card-large.slider .wrapper {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: 120px;
    padding: 12px;
    display: flex;
    align-items: center;
    border-radius: var(--br-3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: saturate(120%) blur(12px);
    backdrop-filter: saturate(120%) blur(12px);
}

.card-large.slider a {
    display: block;
}

.card-large.slider .cover-image,
.card-large.slider .thumb img,
.cart-sc .items .item .thumb img,
.fp-header .meta .icon-container img,
.m-license-edit .badge img,
.order-summary .item img,
.orders-list .item img,
.support-faq .info img {
    max-width: 100%;
    max-height: 100%;
}

.card-large.slider .thumb {
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 6px -3px;
    border-radius: var(--br-2);
}

.card-large.slider .thumb .icon-container {
    width: 96px;
    height: 96px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
}

.card-large.slider .details {
    width: calc(100% - 80px);
    padding: 5px 10px 0 0;
    height: 100%;
    overflow: hidden;
    display: grid;
}

.card-large.slider .details .title {
    font-size: var(--fs-5);
    font-variation-settings: "wght" 700, "dots" 1;
    margin: 0 0 5px;
    padding: 0;
}

.card-large.slider .price {
    margin-bottom: 5px;
}

.card-large.slider .price .currency {
    font-size: var(--fs-2);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    color: var(--c-text-1);
    opacity: 0.58;
}

.card-large.slider .tags {
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
    height: 20px;
}

.card-large.slider .tag {
    padding: 0 12px 2px;
    margin-left: 5px;
    margin-bottom: 50px;
    white-space: nowrap;
    font-size: var(--fs-2);
    color: var(--c-text-1);
    background-color: rgb(255 255 255 / 25%);
    border-radius: var(--br-round);
}

.index-carousel .pagination-wrapper {
    display: flex;
    justify-content: center;
    height: 10px;
    position: relative;
}

.index-carousel .main-carousel-pagination {
    width: auto;
    margin: 10px auto 0;
    height: 30px;
    min-width: 100%;
    padding: 0 10px;
    background-color: #fff;
    border-radius: var(--br-round);
    display: flex;
    align-items: center;
    justify-content: center;
}

.index-carousel .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.index-carousel .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--c-red-3);
    width: 24px;
    border-radius: 999px;
}

.featured-categories {
    padding-top: 36px;
}

.affiliate-top .main>.end,
.content-box .box .top,
.designers-list .sc-title,
.font-lab-sc,
.fonts-list,
.fonts-list .content-stream,
.fp-header .short-desc,
.index-f-cats,
.orders-list,
.p-designer-view .font-list .sc-title,
.p-index .licenses,
.p-search-result .posts-stream {
    padding: 20px 0;
}

.index-f-cats .item {
    text-decoration: none;
    color: initial;
    display: flex;
    align-items: center;
    position: relative;
    width: 220px;
    height: 120px;
    padding: 10px;
    overflow: hidden;
    background-color: var(--white);
    border-radius: var(--br-3);
    border: 1px solid var(--c-grey-light-5);
    margin: 0 8px;
}

.form-control .input-wrapper.custom-check,
.index-f-cats .title,
.purchase-options .licenses .header .about,
.support-faq .info {
    align-items: center;
    display: flex;
}

.index-f-cats .item:first-child {
    margin-right: 0;
}

.index-f-cats .title {
    color: var(--c-grey-dark-2);
    margin-bottom: -2px;
    font-size: var(--fs-3);
}

.index-f-cats .title .counter {
    background-color: var(--c-grey-light-5);
    color: var(--c-grey);
    font-size: var(--fs-2);
    letter-spacing: 0.5px;
    padding: 0 8px;
    min-width: 38px;
    height: 18px;
    margin-right: 3px;
    border-radius: var(--br-round);
    display: flex;
    justify-content: center;
    align-items: center;
}

.index-f-cats .title .counter div {
    margin-top: 1px;
    display: flex;
    overflow: hidden;
    flex-direction: row-reverse;
    text-shadow: 0 calc(var(--fs-3) * -1) 0 var(--white);
}

.index-f-cats .counter div span {
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.4s;
    transform: translateY(var(--m)) translateZ(0);
}

.index-f-cats .counter div span:first-child {
    transition-delay: 60ms;
}

.index-f-cats .counter div span:nth-child(2) {
    transition-delay: 0.12s;
}

.index-f-cats .counter div span:nth-child(3) {
    transition-delay: 0.18s;
}

.index-f-cats .cat-name {
    z-index: 2;
    position: relative;
    font-variation-settings: "wght" 700, "dots" 1;
    font-size: var(--fs-6);
}

.section-title .title,
.support-faq .name-bio .bio span {
    font-weight: 400;
    font-variation-settings: "wght" 400, "dots" 1;
}

.index-f-cats .icon {
    position: absolute;
    left: 0;
}

.index-f-cats .icon img {
    width: 70px;
    opacity: 0.5;
}

.footer .main .box,
.support-faq {
    padding-top: 50px;
}

.support-faq .main-wrapper {
    padding: 15px;
    background-color: var(--c-grey-light-7);
    border-radius: var(--br-3);
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 15px;
}

.section-title .title {
    font-size: var(--fs-5);
    margin: 0;
    padding: 5px 0;
    columns: var(--c-text-1);
}

.section-title .view-more {
    text-decoration: none;
    font-size: var(--fs-3);
    font-weight: 300;
    font-variation-settings: "wght" 300, "dots" 1;
    color: var(--c-grey);
}

.support-faq .profile {
    background-color: var(--white);
    padding: 15px;
    border-bottom: 1px solid var(--c-grey-light-6);
}

.support-faq .profile:first-child {
    border-radius: var(--br-2) var(--br-2) 0 0;
}

.support-faq .profile:last-child {
    border-radius: 0 0 var(--br-2) var(--br-2);
    border: none !important;
}

.support-faq .info .picture,
.support-faq .option {
    overflow: hidden;
    background-color: var(--c-grey-light-6);
    border-radius: var(--br-round);
}

.support-faq .info .picture {
    width: 64px;
    height: 64px;
    transition: background-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.card .wrapper,
.p-index .latest-fonts .filters .filter,
.support-faq .option,
.support-faq .option .value {
    transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.support-faq .profile:hover .info .picture {
    background-color: var(--c-red);
}

.support-faq .name-bio {
    width: calc(100% - 68px);
    padding-right: 10px;
}

.support-faq .name-bio .name {
    font-weight: 700;
    font-variation-settings: "wght" 700, "dots" 1;
    color: var(--c-red-3);
    margin: 0;
}

.card .price .currency,
.card .tag,
.font-card .price .currency,
.p-index .latest-fonts .list-view-all,
.support-faq .faq-link,
.support-faq .name-bio .bio {
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.support-faq .name-bio .bio {
    display: block;
    margin-top: 6px;
    color: var(--c-grey);
    font-size: var(--fs-2);
    line-height: 1.3;
}

.support-faq .name-bio .bio span {
    color: var(--c-red-3);
}

.p-index .licenses .license-details,
.support-faq .contact {
    padding-top: 15px;
}

.support-faq .options {
    display: flex;
    max-width: 300px;
}

.support-faq .options input {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    z-index: -10;
}

.support-faq .option {
    height: 34px;
    width: 34px;
    margin-left: 5px;
    position: relative;
    display: flex;
    align-items: center;
    flex-grow: 0;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.support-faq .option.email {
    background-image: url(../img/icons/socials/at-sign-grey-18-15.svg);
}

.support-faq .option.phone {
    background-image: url(../img/icons/socials/phone-call-grey-18-15.svg);
}

.support-faq .option.telegram {
    background-image: url(../img/icons/socials/send-grey-18-15.svg);
}

.support-faq .option.whatsapp {
    background-image: url(../img/icons/socials/message-circle-grey-18-15.svg);
}

.blog-latest .post:last-child,
.support-faq .option:last-child {
    margin-left: 0;
}

.support-faq .option .value {
    opacity: 0;
    visibility: hidden;
    display: block;
    width: 100%;
    padding-top: 1px;
    text-decoration: none;
    color: initial;
    text-align: center;
    font-size: var(--fs-3);
    color: var(--white);
}

.support-faq .option .value span {
    margin: 0 3px;
}

.support-faq .option .value:hover {
    color: var(--c-red-3);
    text-decoration: underline;
}

.support-faq .option.email .value {
    font-size: 12px;
    direction: ltr;
}

.support-faq .option.telegram .value {
    direction: ltr;
}

.support-faq .option:hover .value {
    opacity: 1;
    visibility: visible;
}

.support-faq .option:hover {
    flex-grow: 1;
    background-color: var(--c-grey-dark-5);
    background-image: none;
}

.support-faq .faq-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    padding: 0 15px;
    margin-top: 15px;
    font-size: var(--fs-2);
    text-decoration: none;
    color: var(--white);
    background-color: var(--c-grey-dark-5);
    border-radius: var(--br-2);
}

.support-faq .faq-link .value {
    white-space: nowrap;
}

.new-support .page-container {
    padding: 64px 0;
}

.new-support .page-width {}

.new-support .contact-page .page-container .main-wrapper {
    background-color: #fff;
    border: 1px solid var(--c-gray-20);
    border-radius: 24px;
    margin: 16px auto;
    max-width: var(--new-login-width);
    display: block;
    padding: 0;
}

.new-support .sup-title {
    padding: 36px 24px;
    text-align: center;
    margin-bottom: 0 !important;

}

.new-support .sup-title>h1 {
    font-size: 18px !important;
    font-weight: bold !important;
    color: var(--c-text-secondary) !important;
}

.new-support .sup-title .sub-title {
    font-size: 16px !important;
    color: var(--c-text-tertiary) !important;
}

.new-support .sp-cards {
    padding-bottom: 36px;
}

.new-support .stream {
    display: flex;
    flex-direction: column;
    padding: 0 24px;
    gap: 16px;
}

.new-support .profile {
    border: 1px solid var(--c-gray-30);
    border-radius: 16px;
    padding: 16px;
}

.new-support .profile .details {
    display: flex;
    align-items: center;
    gap: 4px;
}

.new-support .profile .picture {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    overflow: hidden;
    background-color: var(--c-gray-10);
    border: 1px solid var(--c-gray-20);
}

.new-support .profile .name {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 16px;
}

.new-support .profile .links {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.new-support .profile .link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 6px 12px;
    background-color: var(--c-gray-5);
    border-radius: 999px;
    text-decoration: none;
    flex-grow: 1;
    transition: all 0.2s ease-in-out;
}

.new-support .profile .link:hover {
    background-color: var(--c-gray-20);
}

.new-support .profile .link .icon {
    opacity: 0.4;
    padding: 2px;
    width: 24px;
    height: 24px;
}

.new-support .profile .link .value {
    text-decoration: none;
    font-size: 15px;
    direction: ltr;
    color: var(--c-text-1);
    margin-top: 2px;
}

.font-p-designers .container {
    padding: 16px 0 36px 0;
}

.font-breadcrumb {
    padding: 12px 8px 36px 8px;
}

.font-breadcrumb .breadcrumb-container {}

.font-breadcrumb .breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

.font-breadcrumb .breadcrumb-item {
    font-size: 16px;
    font-weight: 300;
    text-decoration: none;
    display: block;
    position: relative;
    color: var(--c-text-tertiary);
    padding-left: 36px;
}

.font-breadcrumb .breadcrumb-item::after {
    content: '🢐';
    position: absolute;
    top: 0;
    left: 16px;
    color: hsl(0deg 0% 75.59%);
    font-size: 18px;
}

.font-breadcrumb .breadcrumb-item::marker {}

.font-breadcrumb .breadcrumb-item.active {
    padding-left: 0;
    color: var(--c-text);
}

.font-breadcrumb .breadcrumb-item.active::after {
    display: none;
}

.font-breadcrumb .breadcrumb-item a {
    font-size: 16px;
    font-weight: 300;
    text-decoration: none;
    display: block;
    position: relative;
    color: var(--c-text-tertiary);
    transition: all 0.2s ease-in-out;
    opacity: 0.8;
}

.font-breadcrumb .breadcrumb-item a:hover {
    color: var(--c-red);
    opacity: 1;
}

.p-designer-view .breadcrumb-container,
.p-contact .breadcrumb-container {
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
    max-width: 1220px;
    display: none;
}

.p-contact .breadcrumb-container {
    padding: 24px 15px;

}

.p-designer-view .breadcrumb,
.p-contact .breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    padding-right: 164px;
    height: 36px;
    align-items: center;
    font-size: 14px;
    font-weight: 300;
}

.p-contact .breadcrumb {
    padding-right: 0;
}

.p-designer-view .breadcrumb-item,
.p-contact .breadcrumb-item {
    padding-left: 36px;
    position: relative;
}

.p-designer-view .breadcrumb-item::after,
.p-contact .breadcrumb-item::after {
    content: "🢐";
    position: absolute;
    top: 0px;
    left: 16px;
    color: rgb(193, 193, 193);
    font-size: 18px;
}

.designer-info .profile-photo,
.p-designer-view .profile-photo {
    border-radius: 8px;
    overflow: hidden;
}

.p-designer-view .breadcrumb-item.active,
.p-contact .breadcrumb-item.active {}

.p-designer-view .breadcrumb-item.active::after,
.p-contact .breadcrumb-item.active::after {
    display: none;
}

.p-designer-view .breadcrumb-item a {}

.p-designer-view .breadcrumb-item a,
.p-contact .breadcrumb-item a {
    text-decoration: none;
    color: var(--c-text-secondary);
    transition: all 0.2s ease-in-out;
    opacity: 0.7;
}

.p-designer-view .breadcrumb-item a:hover,
.p-contact .breadcrumb-item a:hover {
    color: var(--c-red);
    opacity: 1;
}

.pagination-container .item.perv img,
.support-faq .faq-link .icon img {
    transform: scaleX(-1);
}

.p-index .latest-fonts {
    padding: 50px 0;
    border-bottom: 1px solid var(--c-grey-light-5);
}

.p-index .latest-fonts .filters .wrapper {
    display: flex;
    overflow-y: scroll;
    padding: 12px;
    background-color: var(--c-grey-light-7);
    border-radius: var(--br-2);
    position: relative;
}

.p-index .latest-fonts .filters .filter {
    flex-shrink: 0;
    white-space: nowrap;
    height: 38px;
    background-color: #0000;
    border: none;
    outline: 0;
    padding: 0 8px;
    margin-left: 8px;
    font-weight: 300;
    font-variation-settings: "wght" 300, "dots" 1;
    font-size: 16px;
    position: relative;
    cursor: pointer;
    border-radius: var(--br-2);
}

.card .wrapper,
.p-index .latest-fonts .list-view-all {
    background-color: var(--c-grey-light-7);
    border-radius: var(--br-2);
}

.p-index .latest-fonts .filters .filter:hover {
    background-color: #e4e4e9;
}

.p-index .latest-fonts .filters .filter::after {
    content: "✕" !important;
    position: absolute;
    left: 7px;
    top: 13px;
    line-height: 1;
    color: #d5d5df;
    display: none;
    transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.fontpage-tabs .tabs-content .font-specs .spec.tags .tag,
.p-index .latest-fonts .filters .filter:hover::after,
.tabs .tabs-header .tablink.active {
    color: var(--c-text-1);
}

.p-index .latest-fonts .filters .filter.active {
    background-color: #fff;
    padding-left: 30px;
    color: var(--c-red-3);
    font-weight: 500;
    font-variation-settings: "wght" 500, "dots" 1;
    box-shadow: 0 8px 8px -2px rgb(0 0 0 / 5%), 0 4px 4px -3px rgb(0 0 0 / 15%);
}

.p-index .latest-fonts .list-view-all {
    text-decoration: none;
    color: var(--c-text-1);
    width: 100%;
    display: block;
    padding: 14px 0;
    text-align: center;
}

.cards-wrapper {
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-start;
}

.cards-wrapper .card.small,
.contact-page .main-wrapper .start,
.m-invoice-req .l-wrapper .inputs-container,
.new-login .signup-btns-wrapper .submit-bt,
.new-login.otp-form-visible .otp-form-buttons .submit-bt,
.order-summary .item.license .start,
.purchase-options .bundles .bundle-already-purchased .info {
    width: 100%;
}

.cards-wrapper .card.small a {
    text-decoration: none;
    color: initial;
    display: block;
}

.card .wrapper {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.card .wrapper:hover {
    background-color: var(--c-grey-light-4-5);
}

.card .thumb {
    width: 98px;
    height: 98px;
    padding: 15px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card .thumb img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    transition: 0.26s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.card .details {
    padding: 5px 10px 5px 5px;
    width: calc(100% - 86px);
    height: 100%;
    overflow: hidden;
}

.card.small .details .title {
    font-size: var(--fs-4);
    font-weight: 400;
    font-variation-settings: "wght" 400, "dots" 1;
    margin-bottom: 8px;
    margin-top: 2px;
    white-space: nowrap;
}

.card .price {
    margin-bottom: 8px;
}

.card.small .price .value {
    font-variation-settings: "wght" 700;
    font-size: var(--fs-4);
}

.card .price .currency,
.font-card .price .currency {
    font-size: var(--fs-2);
}

.p-index .designers .name,
.sponser-linkx {
    font-variation-settings: "wght" 400, "dots" 1;
}

.card .tags,
.font-card .tags {
    display: flex;
    flex-wrap: wrap;
    height: 22px;
    overflow: hidden;
}

.card .tag {
    display: flex !important;
    height: 22px;
    padding: 0 8px;
    margin-left: 5px;
    margin-bottom: 50px;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: var(--fs-2);
    color: var(--c-grey-dark-2);
    background-color: var(--white);
    border-radius: var(--br-round);
}

.card a.tag {
    transition: background-color 0.26s ease-in-out;
}

.card a.tag:hover,
.pagination-container .item:hover {
    background-color: var(--c-grey-light-4);
}

.card .purchased {
    width: 100%;
    padding: 6px 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    font-size: var(--fs-2);
    color: var(--white);
    background-color: hsl(0deg 0% 55.69%);
    box-shadow: var(--bs-grey-3);
}

.afilliate-sign-up,
.designer-info .about,
.order-summary,
.p-index .big-banner,
.p-license-check-search .results-wrapper {
    padding: 40px 0;
}

.faq-content,
.font-lab-sc .main-wrapper,
.font-p-designers,
.p-index .designers {
    padding: 50px 0;
}

.designers-list,
.p-index .designers .swiper-wrapper {
    padding-bottom: 40px;
}

.p-index .designers .item {
    width: 200px;
    height: 267px;
    margin-left: 22px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: initial;
    border-radius: var(--br-3);
    transition: box-shadow 0.26s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.p-index .designers .item:hover {
    box-shadow: var(--bs-grey-6);
}

.p-index .designers .picture-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.designers-list .designer .picture-wrapper img,
.p-index .designers .picture-wrapper img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: 0.36s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.designers-list .designer .overlay,
.p-index .designers .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: linear-gradient(180deg, hsl(240 3% 11% / 0%) 0, hsl(240 3% 11% / 80%) 100%);
    transition: opacity 0.26s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.designers-list .designer .second-overlay,
.p-index .designers .second-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: linear-gradient(180deg, hsl(240 3% 11% / 0%) 50%, hsl(240 3% 11% / 100%) 90%);
    transition: background-color 0.26s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.p-index .designers .item:hover .picture-wrapper img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.p-index .designers .item:hover .second-overlay {
    background: linear-gradient(180deg, hsl(240 3% 11% / 0%) 50%, hsl(240 3% 11% / 80%) 90%);
}

.p-index .designers .item:hover .details .divider {
    background: var(--red);
    opacity: 1;
    width: 36px;
}

.designers-list .designer .info,
.p-index .designers .info {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.designers-list .designers .overlay-link,
.p-index .designers .overlay-link {
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2;
}

.designers-list .designer .details,
.p-index .designers .details {
    width: 100%;
    padding: 12px;
    z-index: 3;
}

.designers-list .designer .font-counter,
.p-index .designers .font-counter {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: var(--fs-2);
    background-color: #fff;
    padding: 1px 6px;
    border-radius: var(--br-round);
    opacity: 0.5;
    transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    font-variation-settings: "wght" 400, "dots" 1;
}

.p-index .designers .name {
    text-decoration: none;
    color: var(--white);
    text-align: center;
    font-size: var(--fs-5);
    font-weight: 400;
}

.p-index .designers .divider {
    height: 3px;
    width: 30px;
    background-color: var(--white);
    margin: 12px auto;
    border-radius: var(--br-round);
    opacity: 0.2;
    transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.designers-list .designer .fonts,
.p-index .designers .fonts {
    display: flex;
    justify-content: center;
    padding-left: 10px;
}

.p-index .designers .font-icon {
    width: 38px;
    height: 38px;
    padding: 10px;
    margin-left: -10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--br-round);
    border: 2px solid var(--c-text-1);
    transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.p-index .designers .font-icon:hover {
    transform: scale(1.1);
}

.afilliate-sign-up .form-wrapper,
.cart-sc .main-wrapper .items,
.p-index .licenses .section-container {
    padding: 10px 0;
}

.p-index .license {
    padding: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: initial;
    background-color: var(--c-grey-light-7);
    border-radius: var(--br-3);
}

.p-index .license .thumb {
    width: 48px;
    height: 48px;
    padding: 8px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--white);
    border-radius: var(--br-round);
}

.blog-latest .post,
.p-index .licenses .summary-licenses,
.purchase-options {
    background-color: var(--c-grey-light-7);
}

.p-index .license .details .top,
.p-license-check .license .top {
    font-size: var(--fs-2);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    color: var(--c-grey);
    height: 18px;
    overflow: hidden;
    margin-bottom: 3px;
}

.p-index .license .details .bot,
.p-license-check .license .bot {
    font-size: var(--fs-3);
    font-weight: 500;
    font-variation-settings: "wght" 500;
    color: var(--c-text-1);
    height: 21px;
    overflow: hidden;
}

.p-index .license .license-holder {
    color: var(--c-red-3);
    font-variation-settings: "wght" 500, "dots" 1;
}

.blog-latest .content-card .top,
.p-index .licenses .view-more {
    color: var(--c-grey);
    font-size: var(--fs-2);
    font-weight: 300;
    display: flex;
}

.p-index .licenses .summary-licenses {
    margin-top: 30px;
    padding: 15px;
    border-radius: var(--br-4);
    overflow: hidden;
    position: relative;
}

.p-index .licenses .summary-licenses .license-badge {
    border-color: #dfdfdf;
}

.sponser-linkx {
    text-decoration: none;
    color: var(--c-red-5) !important;
    font-size: var(--fs-3);
}

.p-index .licenses .license-badge {
    width: 164px;
    height: 164px;
    padding: 24px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid var(--c-grey-light-4);
    border-radius: var(--br-round);
    background-color: var(--white);
}

.p-index .licenses .license-details ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.p-index .licenses .license-details li {
    color: var(--c-grey-dark-2);
    font-size: var(--fs-3);
    font-weight: 300;
}

.p-index .licenses .license-details .title {
    color: var(--c-text-1);
    font-variation-settings: "wght" 900;
    margin-bottom: 8px;
}

.p-index .licenses .license-details .summary {
    color: var(--c-grey-dark-2);
    font-size: var(--fs-3);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    overflow: hidden;
}

.p-index .licenses .bottom {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 5px;
}

.p-index .licenses .view-more {
    align-items: center;
    text-decoration: none;
    font-variation-settings: "wght" 300;
}

.p-index .licenses .view-more span {
    display: block;
    padding: 2px 5px;
}

.p-index .licenses .view-more img {
    width: 12px;
    height: 12px;
    margin-top: 2px;
}

.p-index .licenses .licenses-pagination {
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 10;
}

.p-index .licenses .licenses-pagination .swiper-pagination-bullet,
.select-license-modal .license-option-wrapper input:checked~.op-label~.licence-desc-toggle .circle::after,
.select-license-modal .license-option-wrapper input:checked~.op-label~.licence-desc-toggle .circle::before {
    background-color: var(--c-grey);
}

.p-index .licenses .licenses-pagination .swiper-pagination-bullet-active {
    width: 20px;
    border-radius: 999px;
    background-color: var(--c-red-3);
}

.blog-latest {
    padding: 60px 0 100px;
    overflow: hidden;
}

.blog-latest .post {
    border-radius: var(--br-3);
    width: 240px;
    overflow: hidden;
    margin-left: 20px;
}

.blog-latest .post a,
.blog-post-content .related-posts .post-card a,
.blog-post-header .meta a,
.designers-list .designer a,
.posts-stream .card-post a,
.recommended-sc .card a,
a.no-styling {
    text-decoration: none;
    color: initial;
}

.blog-latest .post-cover {
    width: 240px;
    height: 180px;
    position: relative;
    overflow: hidden;
}

.blog-latest .post.video .post-cover::after {
    content: "";
    background: url(../img/icons/play-circle.svg) 50% 50% no-repeat;
    width: 96px;
    height: 96px;
    position: absolute;
    top: -15px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: rgb(255 255 255 / 20%);
    border-radius: var(--br-round);
}

.blog-latest .post-cover .thumb {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.blog-latest .post-cover img,
.blog-post-content .related-posts .thumb img,
.posts-stream .card-post .thumb img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
}

.blog-latest .post-cover .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, currentColor 0, rgba(255, 255, 255, 0) 100%);
    opacity: 0.6;
    transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.blog-latest .post-cover .overlay-2 {
    position: absolute;
    height: calc(100% + 1px);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, currentColor 10%, rgba(255, 255, 255, 0) 40%);
}

.blog-latest .content-card {
    width: calc(100% - 20px);
    margin: -20px auto 10px;
    position: relative;
    padding: 10px;
    background-color: var(--white);
    border-radius: var(--br-2);
}

.blog-latest .content-card .top {
    justify-content: space-between;
    padding-bottom: 15px;
    font-variation-settings: "wght" 300;
}

.blog-latest .content-card .category {
    color: var(--red);
}

.blog-latest .content-card .title {
    margin-bottom: 5px;
    height: 45px;
    overflow: hidden;
    color: var(--c-text-1);
    font-size: var(--fs-3);
    font-variation-settings: "wght" 700;
    line-height: 1.5;
    transition: color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.blog-latest .content-card .summary,
.footer .main .about p {
    line-height: 1.6;
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.blog-latest .content-card .title:hover,
.blog-post-content .entry-content a,
.blog-post-content .related-posts .cat,
.faq-content .answer .wrapper a,
.fp-header .spec .value a:hover,
.orders-list .item .font-licenses .sc-title .add-license,
.p-license-check .license .license-holder,
.posts-stream .card-post .category,
.recommended-posts .post-cat,
.select-license-modal .license-option-wrapper input:checked~.op-label .name {
    color: var(--c-red-3);
}

.blog-latest .content-card .summary {
    font-size: var(--fs-2);
    height: 40px;
    overflow: hidden;
    margin-bottom: 0;
}

.footer .top .page-container {
    background-color: var(--c-grey-dark-6);
    overflow: hidden;
    padding-bottom: 30px;
}

.footer .brands-carousel .brand {
    padding: 40px 40px 10px;
    position: relative;
    display: flex;
    width: 154px;
}

.footer .brands-carousel .logo {
    width: 74px;
    height: 74px;
}

.footer .main::after,
.footer .main::before {
    height: 340px;
    bottom: 0;
    position: absolute;
    width: 100%;
    content: "";
}

.footer .brands-carousel .logo img {
    opacity: 0.4;
    transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.footer .brands-carousel .tooltip {
    position: absolute;
    padding: 5px 8px;
    max-width: 160px;
    top: 12px;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center;
    background-color: var(--c-grey-dark-3);
    font-size: var(--fs-2);
    border-radius: var(--br-1);
    opacity: 0;
    transition: 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.footer .brands-carousel .tooltip::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--c-grey-dark-3);
    bottom: -6px;
    left: 50%;
    transform: translate(-50%, 0);
}

.footer .brands-carousel .overflow {
    max-width: 160px;
    overflow: hidden;
    white-space: nowrap;
}

.footer .brands-carousel .brand-name,
.purchase-options .bundles input:checked~label .desc {
    color: var(--c-grey-light-3);
}

.footer .brands-carousel .font-name,
.fp-header .cat:hover,
.inp-message.error,
.tabs .tabs-header .tablink:hover {
    color: var(--c-red);
}

.footer .main .contact-info .email,
.footer .main .contact-info .phone-number {
    color: var(--c-text-1);
    font-size: var(--fs-3);
    font-variation-settings: "wght" 700;
}

.footer .main {
    background-color: var(--c-grey-dark-6);
    position: relative;
}

.footer .main::after {
    background-image: url(../img/pattern-2.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
}

.footer .main::before {
    background: linear-gradient(0deg, rgba(27, 27, 29, 0) 0, #1b1b1d 100%);
    opacity: 0.8;
    z-index: 2;
}

.footer .main .contact {
    padding: 15px;
    background-color: var(--c-grey-light-8);
    border-radius: var(--br-4);
    z-index: 5;
    position: relative;
}

.footer .main .contact .start {
    text-align: center;
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
}

.footer .main .contact .start::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 6px;
    background-color: var(--c-red-3);
    top: 0;
    border-radius: 999px;
    margin: 0 auto;
    left: 0;
    right: 0;
    box-shadow: 0 2px 8px -2px var(--c-red-3);
}

.purchase-options .bundles .circle .plus::after,
.purchase-options .bundles .circle .plus::before {
    background-color: var(--c-grey-light-4);
    top: 0;
    right: 0;
    left: 0;
    transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    bottom: 0;
}

.footer .main .contact .start .title {
    font-variation-settings: "wght" 900;
    color: var(--c-grey-dark-5);
    margin-bottom: 5px;
}

.cart-sc .form-coupon-wrap .tab-header .tablink.active,
.cart-sc .form-coupon-wrap .tab-header .tablink:hover,
.footer .main .contact .start .sub-title {
    color: var(--c-grey-dark-3);
}

.footer .main .contact-info {
    display: flex;
    width: 100%;
    border-radius: var(--br-3);
    background-color: var(--c-grey-light-6);
}

.footer .main .contact-info .item {
    width: 50%;
    padding: 12px 10px;
    position: relative;
}

.footer .main .contact-info .item.phone::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 38px;
    background-color: #dbdbe9;
    left: 10px;
    margin: auto;
    top: 0;
    bottom: 0;
}

.footer .main .contact-info .title {
    font-size: var(--fs-2);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    margin-bottom: 5px;
}

.footer .main .contact-info .phone-number {
    text-decoration: none;
    direction: rtl;
}

.footer .main .contact-info .phone-number span {
    color: var(--c-red-3);
    margin-right: 3px;
}

.footer .main .contact-info .email {
    text-decoration: none;
}

.footer .main .content {
    margin-top: 50px;
    position: relative;
    z-index: 5;
    padding-bottom: 120px;
}

.footer .main .about .logo {
    width: 163px;
    display: block;
    margin: 0 auto;
}

.footer .main .about p {
    width: 100%;
    padding: 0 30px;
    margin: 25px auto 0;
    text-align: center;
    color: var(--c-grey-light-2);
    font-size: var(--fs-2);
}

.footer .main .about .social-links {
    display: flex;
    width: 260px;
    margin: 30px auto;
    justify-content: space-between;
    background-color: var(--c-grey-dark-5);
    padding: 15px;
    border-radius: var(--br-3);
}

.footer .bottom-bar {
    background-color: #000;
}

.footer .footer-bar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer .bottom-bar .copyright {
    font-size: var(--fs-2);
    text-align: center;
    display: block;
    padding: 15px 0;
    color: var(--c-grey);
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.footer .bottom-bar .lang {
    padding-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
    gap: 8px;
}

.footer .bottom-bar .lang .icon {
    width: 18px;
    opacity: 0.5;
}

.footer .bottom-bar .lang .select {
    position: relative;
}

.footer .bottom-bar .lang .select select {
    font-size: 12px;
    font-weight: 300;
    width: 136px;
    height: 28px;
    border-radius: 999px;
    padding: 4px 8px 0 8px;
    background-color: rgb(255 255 255 / 10%);
    border: 1px solid #ffffff3d;
    color: #dddddd;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.footer .bottom-bar .lang .select::after {
    content: '';
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 5px;
    width: 16px;
    height: 16px;
    background-image: url(../img/icons/chevron-right-red.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.fp-header .hero {
    background-color: var(--c-grey-dark-6);
}

.fp-header .cover {
    height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.fp-header .oneliner {
    width: 90%;
    max-width: 560px;
    max-height: 160px;
}

.fp-header .oneliner img {
    max-height: 100%;
    margin: 0 auto;
}

.fp-header .font-cats {
    margin-top: 15px;
    color: var(--c-grey);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    font-size: var(--fs-3);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.fp-header .cat {
    display: block;
    position: relative;
    text-decoration: none;
    color: var(--c-grey);
    padding: 0 8px;
    font-weight: 400;
    font-variation-settings: "wght" 400, "dots" 1;
}

.fp-header .cat::after {
    content: "";
    height: 14px;
    width: 1px;
    position: absolute;
    margin: auto;
    left: 0;
    top: 5px;
    bottom: 0;
    background-color: var(--c-grey-dark-3);
}

.fp-header .meta .wrapper {
    margin-top: -70px;
}

.fp-header .meta .icon-container {
    width: 140px;
    height: 140px;
    padding: 25px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 6px 12px -6px;
    border-radius: var(--br-4);
}

.fp-header .f-title {
    text-align: center;
    margin-top: 30px;
    font-size: var(--fs-7);
    font-variation-settings: "wght" 700, "dots" 1;
}

.fp-header .specs {
    display: flex;
    overflow-x: scroll;
    padding: 20px 0;
}

.fp-header .spec {
    padding: 4px 8px 4px 12px;
    margin-left: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--c-grey-dark-2);
    border: 1px solid var(--c-grey-light-3);
    border-radius: var(--br-round);
    font-weight: 300;
    font-variation-settings: "wght" 300, "dots" 1;
    font-size: var(--fs-3);
}

.fp-header .spec .icon {
    margin-left: 7px;
}

.fp-header .spec .icon img,
.promo-code .trail .copy-code svg {
    width: 18px;
}

.fp-header .spec .value {
    padding-bottom: 2px;
}

.fp-header .spec .value a {
    text-decoration: none;
    color: var(--c-grey-dark-2);
}

.fp-header .spec .value a:nth-child(n + 2)::before {
    content: ",";
    font-variation-settings: "wght" 700;
    margin: 0 2px 0 5px;
}

.fp-header .short-desc p {
    line-height: 1.8;
    color: var(--c-text-1);
    font-variation-settings: "wght" 300;
    margin: 0 auto;
}

.purchase-options {
    margin: 20px 0;
}

.afilliate-sign-up .wrapper,
.purchase-options .bundles {
    padding: 25px 0;
}

.purchase-options .bundles .bundle-option {
    margin-bottom: 20px;
    display: flex;
    background-color: #fff;
    border-radius: var(--br-2);
    border: 1px solid hsla(0, 0%, 11%, 0.15);
    position: relative;
    flex-wrap: wrap;
}

.comments-faq-sc .comment .text-wrapper p,
.comments-faq-sc .comment-conatiner .comment:last-child,
.faq-content .answer .wrapper p:last-child,
.font-p-designers .designer:last-child,
.form-control .input-wrapper:last-child,
.inp-wrapper:last-child,
.order-summary .item:last-child,
.purchase-options .bundles .bundle-option:last-child,
.recommended-posts .post-stream .post-card:last-child {
    margin-bottom: 0;
}

.recommended-posts .post-stream .post-card:last-child {
    border-bottom: none;
}

.purchase-options .bundles input,
.select-license-modal .license-option-wrapper input[type="radio"] {
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.purchase-options .bundles .option-wrapper {
    padding: 10px 10px 10px 0;
    width: calc(100% - 65px);
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 0 var(--br-2) var(--br-2) 0;
    cursor: pointer;
    height: 98px;
}

.purchase-options .bundles .checkbox {
    width: 20px;
    height: 20px;
    background-color: var(--c-grey-light-6);
    border-radius: 999px;
    border: 1px solid var(--c-grey-light-4);
}

.purchase-options .bundles .info {
    width: calc(100% - 20px);
    padding: 0 10px 0 0;
}

.purchase-options .bundles .name {
    font-weight: 500;
    font-variation-settings: "wght" 500, "dots" 1;
    margin-bottom: 3px;
}

.purchase-options .bundles .desc {
    font-size: var(--fs-2);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    color: var(--c-grey-dark-2);
    height: 18px;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 3px;
}

.blog-post-content .related-posts .content-wrap,
.flex,
.form-control .double-input,
.p-license-check .license .thumb,
.purchase-options .bundles .bundle-already-purchased .prices,
.purchase-options .bundles .prices,
.recommended-sc .sc-title .carusel-controls,
.select-license-modal .op-label .preices,
.user-top .user-info {
    display: flex;
}

.create-gift-card .gift-amount .currency,
.orders-list .item .up-btn .value,
.purchase-options .bundles .price,
.purchase-options .licenses .price,
.standard-table .total .value {
    font-variation-settings: "wght" 700;
}

.purchase-options .bundles .currency,
.purchase-options .licenses .currency,
.purchase-options .total-sc .total .currency {
    font-weight: 300;
    font-variation-settings: "wght" 300;
    font-size: var(--fs-2);
    margin-right: 3px;
    color: var(--c-grey);
}

.purchase-options .bundles .preview-toggle {
    width: 65px;
}

.purchase-options .bundles .circle {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 30px;
    left: 15px;
    border-radius: 14px;
    border: 1px solid var(--c-grey-light-5);
    box-shadow: 0 3px 6px -3px rgb(0 0 0 / 10%);
    cursor: pointer;
}

.purchase-options.bundle-already-purchased .bundles .circle {
    background-color: var(--c-grey-light-5);
    border: 1px solid var(--c-grey-light-4);
}

.purchase-options .bundles .circle .plus {
    width: 100%;
    height: 100%;
    position: relative;
}

.purchase-options .bundles .circle .plus::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 2px;
    margin: auto;
}

.purchase-options .bundles .circle .plus::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 20px;
    margin: auto;
}

.purchase-options .bundles .preview {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.15s ease-out;
    width: 100%;
    border-radius: 0 0 var(--br-2) var(--br-2);
}

.purchase-options .bundles .preview .wrapper,
.select-license-modal .content-wrapper>.header .close-bt,
.select-license-modal .license-desc .content {
    padding: 10px;
}

.purchase-options .bundles .preview .media-container {
    padding: 10px;
    background-color: var(--c-grey-light-7);
    border-radius: var(--br-1);
    position: relative;
}

.purchase-options .bundles .preview .media-container::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--c-grey-light-7);
    top: -9px;
    left: 15px;
}

.purchase-options .bundles .preview img {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}

.purchase-options .bundles .bundle-option.open .preview {
    max-height: 600px;
    transition: max-height 0.25s ease-in;
}

.purchase-options .bundles input:checked~label {
    background-color: var(--c-text-1);
    box-shadow: -4px 4px 8px -4px var(--c-text-1);
}

.purchase-options .bundles .bundle-option.open input:checked~label {
    box-shadow: none;
    border-radius: 0 var(--br-2) 0 0;
}

.purchase-options .bundles input:checked~label .checkbox {
    background-color: var(--c-red);
    border: 1px solid var(--c-red);
    background-image: url(../img/icons/check-white.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.purchase-options .bundles input:checked~label .name {
    color: var(--red);
    font-variation-settings: "wght" 700, "dots" 1;
}

.purchase-options .bundles input:checked~label .price {
    color: #fff;
    font-weight: 400;
    font-variation-settings: "wght" 400;
}

.purchase-options .bundles input:checked~label~.preview-toggle {
    background-color: var(--c-text-1);
    border: 1px solid var(--c-text-1);
    border-radius: var(--br-2) 0 0 var(--br-2);
    box-shadow: 4px 4px 8px -4px var(--c-text-1);
}

.purchase-options .bundles .bundle-option.open input:checked~label~.preview-toggle {
    box-shadow: none;
    border-radius: var(--br-2) 0 0 0;
}

.purchase-options .bundles input:checked~label~.preview {
    background-color: var(--c-text-1);
    box-shadow: 0 4px 8px -4px var(--c-text-1);
}

.purchase-options .bundles input:checked~label~.preview-toggle .circle {
    border: 1px solid hsl(240deg 4% 40%);
    box-shadow: 0 3px 6px -3px rgb(0 0 0);
}

.purchase-options .bundles input:checked~label~.preview-toggle .circle .plus::after,
.purchase-options .bundles input:checked~label~.preview-toggle .circle .plus::before {
    background-color: hsl(240deg 4% 40%);
}

.purchase-options .bundles .bundle-option.open .preview-toggle .circle .plus::after,
.select-license-modal .license-option-wrapper.open .licence-desc-toggle .circle::before {
    transform: rotate(90deg);
}

.purchase-options .licenses {
    padding: 30px 15px;
    margin: 0 -15px;
    border-top: 1px solid var(--c-grey-light-4);
    border-bottom: 1px solid var(--c-grey-light-4);
}

.purchase-options .licenses .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.fontpage-tabs .tabs-content .font-specs .spec .title,
.promo-code .lead .discount-amount,
.promo-code .lead .font-name,
.purchase-options .licenses .header .title,
.purchase-options .total-sc .total .title,
.tabs.user-tabs .tabs-header .tablink.active {
    font-weight: 500;
    font-variation-settings: "wght" 500, "dots" 1;
}

.purchase-options .licenses .header .value {
    font-size: var(--fs-2);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    color: var(--c-blue);
    padding-right: 3px;
    cursor: pointer;
}

.purchase-options .licenses .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--c-grey-light-5);
    padding: 7px;
    border-radius: var(--br-3);
    position: relative;
}

.purchase-options .licenses .license-select {
    width: 68%;
    max-width: 420px;
    height: 54px;
    padding: 10px;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    background-color: #fff;
    border-radius: var(--br-2);
    border: 1px solid var(--c-grey-light-4);
    box-shadow: var(--bs-grey-2);
}

.purchase-options .licenses .license-select::after {
    content: "";
    display: inline-block;
    border-style: solid;
    position: absolute;
    height: 8px;
    width: 8px;
    left: 10px;
    border-width: 2px 2px 0 0;
    transform: rotate(135deg);
    color: var(--c-red);
}

.purchase-options .licenses .remove-license {
    z-index: 2;
    position: absolute;
    right: 20px;
    top: -3px;
    height: 22px;
    line-height: 22px;
    padding: 0 10px;
    font-size: var(--fs-2);
    background-color: var(--c-grey-light-8);
    border-radius: var(--br-round);
    border: 1px solid var(--c-grey-light-4);
    color: var(--c-red-3);
    cursor: pointer;
}

.afilliate-sign-up .form-wrapper .input-wrapper.custom-check span,
.cart-sc .cart-total-sc .row .title,
.orders-list .item .license-desk-act .up-btn .price,
.orders-list .item .license-desk-act .up-btn .title,
.purchase-options .licenses .license-title,
.select-license-modal .op-label .name {
    font-size: var(--fs-3);
}

.purchase-options .licenses .old-price {
    text-align: center;
    text-decoration: line-through;
    color: var(--c-red-3);
}

.purchase-options .registered-license .license-info {
    padding: 10px 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    font-size: var(--fs-3);
    background-color: hsl(240deg 12% 88%);
    border-radius: var(--br-2);
}

.purchase-options .registered-license .badge {
    width: 48px;
    height: 48px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--br-round);
    padding: 7px;
}

.purchase-options .registered-license .name {
    font-variation-settings: "wght" 700;
    font-size: var(--fs-4);
    margin-bottom: 3px;
}

.purchase-options .licenses .add-new-license {
    height: 54px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #fff;
    border-radius: var(--br-2);
    border: 1px solid var(--c-grey-light-4);
    box-shadow: var(--bs-grey-2);
}

.purchase-options .licenses .add-new-license img {
    transform: rotate(45deg);
    margin-left: 5px;
}

.purchase-options .registered-license .new-license {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.purchase-options .total-sc {
    padding: 30px 0;
    display: flex;
    flex-direction: column-reverse;
}

.purchase-options .total-sc .add-to-cart {
    outline: 0;
    display: block;
    height: 54px;
    margin-top: 20px;
    border-radius: var(--br-2);
    border: none;
    background-color: var(--c-red);
    color: #fff;
    font-size: var(--fs-5);
    cursor: pointer;
    font-weight: 400;
    font-variation-settings: "wght" 400, "dots" 1;
}

.cart-sc .cart-total-sc .g-total,
.purchase-options .total-sc .total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.purchase-options .total-sc .total .value {
    font-variation-settings: "wght" 700;
    font-size: var(--fs-6);
}

.purchase-options-new .noon-link {
    font-size: 13px;
    font-weight: 300;
    padding-top: 8px;
    text-align: left;
    color: hsl(0deg 0% 15%);
    padding-left: 30px;

    /* display: none; */
}

.purchase-options-new .noon-link span {}

.purchase-options-new .noon-link a {
    color: #ffbf00;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
}

.cart-sc .payment-gateways .noon-link {
    font-size: 13px;
    font-weight: 300;
    text-align: center;
    color: hsl(0deg 0% 20%);
    padding: 16px 24px 0 24px;
}

.cart-sc .payment-gateways .noon-link span {}

.cart-sc .payment-gateways .noon-link a {
    color: #ffffff;
    background-color: rgb(0 0 0);
    padding: 2px 12px;
    border-radius: 999px;
    border: 2px solid #ffbf00;
    transition: all 250ms ease;
    line-height: 1.8;
    text-decoration: none;
    box-sizing: content-box !important;
}

.cart-sc .payment-gateways .noon-link a:hover {
    background: #ffbf00;
    color: #000;
}

.license-desc-modal .license-desc {
    padding: 5px 20px;
    border-radius: 8px;
    background-color: var(--c-grey-light-8);
}

.license-desc-modal .license-desc ul {
    line-height: 185%;
    margin: 0;
    font-size: 80%;
    padding: 0;
}

.license-desc-modal.standard-modal .modal-close-bt {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    opacity: 1;
    display: block;
    box-sizing: content-box;
    padding: 4px;
}

.select-license-modal .l-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: saturate(50%) blur(12px);
    backdrop-filter: saturate(50%) blur(12px);
}

.select-license-modal .l-content {
    background-color: #fff;
    width: 90%;
    max-width: 500px;
    height: 630px;
    max-height: 96vh;
    border-radius: var(--br-3);
    overflow-y: auto;
    box-shadow: var(--bs-grey-5);
}

.content-box .box .bot .links,
.select-license-modal .content-wrapper>.header {
    display: flex;
    justify-content: space-between;
}

.select-license-modal .content-wrapper>.header .title {
    font-size: var(--fs-3);
    color: var(--c-red-3);
    font-variation-settings: "wght" 700;
    padding: 12px;
}

.select-license-modal .options {
    padding: 0 10px;
    max-height: 350px;
    overflow: auto;
}

.select-license-modal .license-option-wrapper {
    position: relative;
    margin-bottom: 8px;
}

.select-license-modal .license-option-wrapper .licence-desc-toggle .circle {
    position: relative;
    width: 21px;
    height: 21px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--c-grey-light-2);
    border-radius: var(--br-round);
    background-color: #fff;
}

.select-license-modal .license-option-wrapper .licence-desc-toggle .circle::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 1px;
    background-color: var(--c-grey-light-2);
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.select-license-modal .license-option-wrapper .licence-desc-toggle .circle::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 13px;
    background-color: var(--c-grey-light-2);
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.select-license-modal .op-label {
    cursor: pointer;
    position: relative;
}

.select-license-modal .op-label .option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px 8px 40px;
    background-color: var(--c-grey-light-7);
    border: 1px solid var(--c-grey-light-5);
    border-radius: var(--br-2);
    position: relative;
}

.select-license-modal .license-option-wrapper .licence-desc-toggle {
    position: absolute;
    left: 8px;
    top: 9px;
}

.select-license-modal .op-label .price {
    font-size: var(--fs-3);
    font-variation-settings: "wght" 700, "dots" 1;
}

.select-license-modal .op-label .currency {
    font-size: var(--fs-2);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    margin-right: 2px;
}

.select-license-modal .license-desc {
    max-height: 0;
    width: 100%;
    overflow: hidden;
    transition: max-height 0.15s ease-out;
    font-size: var(--fs-2-5);
    color: var(--c-text-1);
    background-color: var(--c-grey-light-7);
    border-radius: 0 0 var(--br-2) var(--br-2);
}

.select-license-modal .license-desc .list li {
    margin-bottom: 10px;
    position: relative;
    display: flex;
}

.select-license-modal .license-desc .list li::before {
    content: "";
    height: 15px;
    width: 15px;
    margin-left: 5px;
    background-color: #fff;
    display: block;
    border-radius: var(--br-1);
    flex-shrink: 0;
}

.select-license-modal .license-desc .list li.active::before {
    background-image: url(../img/icons/check-green.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

.orders-list .item .license-details .row .title,
.orders-list .item .owner .title,
.select-license-modal .license-desc .list li.inactive {
    color: var(--c-grey);
}

.select-license-modal .license-desc .list li.inactive::before {
    background-image: url(../img/icons/x-dark.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 11px;
    background-color: rgb(0 0 0 / 15%);
}

.select-license-modal .license-owner {
    padding: 10px;
    border-top: 1px solid var(--c-grey-light-5);
    overflow-y: scroll;
}

.recommended-sc,
.select-license-modal .license-owner.add-padding {
    padding-bottom: 100px;
}

.comments-faq-sc .new-comment .uploade-preview .item:not(:last-child),
.font-card .price,
.m-license-script .text li,
.select-license-modal .license-owner .form-control-x {
    margin-bottom: 10px;
}

.select-license-modal .license-owner label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
}

.select-license-modal .license-owner label .title {
    font-size: var(--fs-3);
    font-weight: 500;
    font-variation-settings: "wght" 500;
}

.select-license-modal .license-owner input {
    outline: 0;
    width: 100%;
    padding: 8px;
    border: 1px solid var(--c-grey);
    border-radius: var(--br-1);
}

.select-license-modal .license-owner input:focus {
    border: 1px solid var(--c-red-3);
}

.select-license-modal .license-owner .submit-license {
    outline: 0;
    display: block;
    width: 100%;
    height: 42px;
    border-radius: var(--br-1);
    border: none;
    background-color: var(--c-red);
    color: #fff;
    cursor: pointer;
    font-variation-settings: "wght" 400, "dots" 1;
}

.select-license-modal .license-option-wrapper input:checked~.op-label .option {
    background-color: var(--c-text-1);
    border-color: transparent;
    box-shadow: 0 3px 6px -3px var(--c-text-1);
}

.select-license-modal .license-option-wrapper input:checked~.op-label .option::before {
    content: "";
    height: 22px;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background-color: var(--c-red);
    right: 0;
    position: absolute;
    box-shadow: -1px 0 5px 0 var(--c-red);
}

.select-license-modal .license-option-wrapper input:checked~.op-label .price {
    color: var(--c-grey-light-7);
}

.select-license-modal .license-option-wrapper input:checked~.op-label .currency {
    opacity: 0.5;
}

.select-license-modal .license-option-wrapper input:checked~.op-label~.licence-desc-toggle .circle {
    background-color: transparent;
    border-color: var(--c-grey);
}

.comments-faq-sc,
.font-lab-sc .page-container,
.p-designer-view .font-list {
    border-top: 1px solid var(--c-grey-light-5);
}

.select-license-modal .license-option-wrapper input:checked~.op-label~.licence-desc-toggle~.license-desc {
    background-color: var(--c-text-1);
    color: var(--c-grey-light-4);
    box-shadow: 0 3px 6px -3px var(--c-text-1);
}

.select-license-modal .license-option-wrapper.open input:checked~.op-label~.licence-desc-toggle~.license-desc {
    border: 1px solid var(--c-text-1);
}

.cart-sc.cart-empty.error-page .main-wrapper,
.select-license-modal .license-option-wrapper input:checked~.op-label~.licence-desc-toggle~.license-desc .list li.active::before {
    background-color: transparent;
}

.select-license-modal .license-option-wrapper input:checked~.op-label~.licence-desc-toggle~.license-desc .list li.inactive::before {
    background-color: transparent;
    background-image: url(../img/icons/x-red-2.svg);
}

.select-license-modal .license-option-wrapper.open .license-desc {
    max-height: 600px;
    transition: max-height 0.25s ease-in;
    border: 1px solid var(--c-grey-light-5);
    border-top: none;
}

.select-license-modal .license-option-wrapper.open .op-label .option {
    border-radius: var(--br-2) var(--br-2) 0 0;
    border-bottom: none;
}

.purchase-options .bundles .bundle-already-purchased {
    background-color: var(--c-grey-light-4-5);
    border-radius: var(--br-2);
    margin-bottom: 20px;
}

.hidden,
.purchase-options .bundles .bundle-already-purchased label .checkbox,
[hidden] {
    display: none !important;
}

.purchase-options .bundles .bundle-already-purchased .already-purchased {
    font-size: var(--fs-3);
    color: #fff;
    background-color: hsl(0deg 0% 55.69%);
    padding: 1px 10px;
    border-radius: var(--br-1);
    margin-left: 5px;
    display: flex;
    align-items: center;
}

.purchase-options .bundles .prices .upgrade {
    margin-left: 5px;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    opacity: 0.8;
}

.purchase-options .bundles input:checked~label .upgrade {
    color: #fff;
}

.fontpage-tabs {
    padding: 30px 0 0;
}

.fontpage-tabs .tabs-header::after,
.user-tabs .tabs-header::after {
    content: "";
    position: absolute;
    bottom: 10px;
    width: 100%;
    border-bottom: 1px solid var(--c-grey-light-5);
}

/* nnnnnnnnnnnnnnnew purchase options */
.new-purchase-options {}

.npo {
    background-color: var(--c-grey-light-7);
    --bundle-height: 100px;
    --license-height: 36px;
}

.npo .options {
    padding: 16px 0;
    display: flex;
    flex-direction: column;
}

.npo .section {}

.npo .bundles {}

.npo .bundles-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    cursor: pointer;
}

.npo .bundles-wrapper>label {
    position: relative;
}

.npo .bundles-wrapper>label input {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer;
}

.npo .bundle {
    position: relative;
    max-height: 100px;
    font-size: 16px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 16px;
    border: 1px solid var(--c-gray-30);
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.npo .bundle.open {
    max-height: 800px;
}

.npo .bundle:hover {
    border-color: var(--c-gray-50);
    background-color: hsl(0, 0%, 99%);
}

.npo .bundle .bundle-content {
    display: flex;
    align-items: center;
    height: var(--bundle-height, 100px);
    width: 100%;
    cursor: pointer;
    -moz-font-feature-settings: "ss02";
    -webkit-font-feature-settings: "ss02";
    font-feature-settings: "ss02";
}

.npo .bundle .checkbox-wrapper {
    flex-shrink: 0;
    padding: 0 8px;
    width: fit-content;
}

.npo .bundle .checkbox-custom {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid var(--c-gray-40);
    background-color: hsl(0, 0%, 99%);
    position: relative;
}

.npo .bundle .checkmark {}

.npo .bundle .bundle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 32px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
}

.npo .bundle .bundle-info .title {
    font-weight: 600;
    font-variation-settings: "wght" 600, "dots" 2;
    font-size: 18px;
}

.npo .bundle .bundle-info .subtitle {
    font-size: 13px;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    color: var(--c-grey-dark-2);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.npo .bundle .price {
    position: absolute;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: auto;
    top: 64px;
    right: 36px;
}

.npo .purchased .bundle .price {
    right: 16px;
}

.npo .bundle .price .old-price {
    color: var(--c-red);
    text-decoration: line-through;
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.npo .bundle .old-price .amount {}

.npo .bundle .price .current-price {}

.npo .bundle .current-price .amount {
    font-weight: 700;
    font-variation-settings: "wght" 700;
    font-size: 18px;
}

.npo .bundle .current-price .currency {
    font-weight: 300;
    font-variation-settings: "wght" 300;
    font-size: 12px;
    color: var(--c-grey);
}

.npo .bundle .preview-toggle {
    width: 58px;
    flex-shrink: 0;
    padding-right: 4px;
    display: flex;
    align-items: center;
}

.npo .bundle .mobile-preview-toggle {
    width: 38px;
    height: 38px;
    border: 1px solid var(--c-gray-30);
    border-radius: 12px;
    box-shadow: 0 2px 4px -2px rgb(0 0 0 / 12%);
    margin-bottom: 2px;
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 5;
}

.npo .bundle .mobile-preview-toggle .inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.npo .bundle .mobile-preview-toggle .inner::before {
    content: "";
    position: absolute;
    height: 2px;
    width: 18px;
    background-color: var(--c-gray-30);
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.npo .bundle .mobile-preview-toggle .inner::after {
    content: "";
    height: 18px;
    width: 2px;
    position: absolute;
    background-color: var(--c-gray-30);
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.npo .bundle .mobile-preview-toggle.open .inner::after {
    transform: rotate(90deg);
}

.npo .bundle .mobile-preview {}

.npo .bundle .mobile-preview .wrapper {
    position: relative;
    padding: 0 8px 8px 8px;
    display: flex;
    justify-content: flex-end;
}

.npo .bundle .mobile-preview .wrapper img {
    border-radius: 9px;
    max-width: min(100%, 460px);
}

.npo .bundle .mobile-preview .wrapper:before {
    content: "";
    position: absolute;
    width: 28px;
    height: 21px;
    background-image: url(../img/icons/up-arrow-for-preview.svg);
    background-repeat: no-repeat;
    background-position: center;
    top: -17px;
    left: 20px;
    z-index: 1;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.npo .bundle.open .mobile-preview .wrapper:before {
    opacity: 1;
}

.npo .bundles-wrapper>label input:checked~.bundle {
    background-color: var(--c-text-1);
    border-color: var(--c-text-1);
    box-shadow: 0 6px 9px -8px var(--c-text-1);
}

.npo .bundles-wrapper>label input:checked~.bundle .checkbox-custom {
    background-image: url(../img/icons/check-white.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--red);
    border-color: var(--red);
}

.npo .bundles-wrapper>label input:checked~.bundle .bundle-info .title {
    color: var(--red);
}

.npo .bundles-wrapper>label input:checked~.bundle .bundle-info .subtitle {
    color: var(--c-grey-light-3);
    font-weight: 300;
}

.npo .bundles-wrapper>label input:checked~.bundle .price .current-price {
    color: #fff;
}

.npo .bundles-wrapper>label input:checked~.bundle .price .current-price .currency {
    opacity: 1;
}

.npo .bundles-wrapper>label input:checked~.bundle .mobile-preview-toggle {
    border-color: hsl(0, 0%, 40%);
    background-color: hsl(0, 0%, 15%);
}

.npo .bundles-wrapper>label.purchased .bundle {
    border-color: var(--c-gray-30);
}

.npo .bundles-wrapper>label.purchased .checkbox-custom {
    display: none;
}

.npo .bundles-wrapper>label.purchased .price:has(.purchased-badge) .old-price,
.npo .bundles-wrapper>label.purchased .price:has(.purchased-badge) .current-price {
    display: none;
}

.npo .bundles-wrapper>label.purchased .bundle-info .title,
.npo .bundles-wrapper>label.purchased .bundle-info .subtitle,
.npo .bundles-wrapper>label.purchased .old-price,
.npo .bundles-wrapper>label.purchased .current-price {
    opacity: 0.6;
}

.npo .bundles-wrapper>label.purchased input:checked~.bundle .bundle-info .title,
.npo .bundles-wrapper>label.purchased input:checked~.bundle .bundle-info .subtitle,
.npo .bundles-wrapper>label.purchased input:checked~.bundle .old-price,
.npo .bundles-wrapper>label.purchased input:checked~.bundle .current-price {
    opacity: 1;
}

.npo .bundle .purchased-badge {
    display: flex;
    height: 26px;
    font-size: 12px;
    font-weight: 300;
    margin-top: -3px;

}

.npo .bundle .purchased-badge .dl-link {
    display: flex;
    text-decoration: none;
    color: #237D40;
    background-color: #E0F4D9;
    box-shadow: inset 0 0 0 1px #BDE4AF;
    padding: 0 8px;
    border-radius: 6px;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.npo .bundle .purchased-badge .dl-link:hover {
    background-color: hsl(104, 55%, 95%);
    box-shadow: inset 0 0 0 1px #99bb8c;
}

.npo .bundles-wrapper>label input:checked~.bundle .purchased-badge .dl-link:hover {
    background-color: hsl(104, 55%, 95%);
    box-shadow: inset 0 0 0 1px #BDE4AF;
}

.npo .bundle .purchased-badge .dl-link .icon {
    margin-top: 4px;
    width: 18px;
}

.npo .bundle .purchased-badge .dl-link .text {
    padding-top: 5px;
}

.npo .bundle .purchased-badge .dl-link .text span {
    white-space: nowrap;
}

.npo .licenses {
    margin-top: 16px;
    border-top: 1px solid var(--c-gray-40);
    padding: 16px 0;
    font-size: 16px;
}

.npo .licenses .header {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: initial;
    margin-bottom: 24px;
}

.npo .licenses .header .title {
    font-weight: bold;
}

.npo .license-help-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 300;
    color: var(--c-blue);
    cursor: pointer;
}

.npo .license-help-toggle .icon {}

.npo .licenses-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

.npo .licenses-wrapper>label {
    position: relative;
}

.npo .licenses-wrapper>label>input {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer;
}

.npo .license {
    max-height: var(--license-height);
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    cursor: pointer;
}

.npo .license .info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: var(--license-height);
    font-family: var(--fa);
    -moz-font-feature-settings: "ss02";
    -webkit-font-feature-settings: "ss02";
    font-feature-settings: "ss02";
}

.npo .license .lead {
    display: flex;
    align-items: center;
    gap: 4px;
}

.npo .license .checkbox-custom {
    width: 18px;
    height: 18px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    background-color: #fff;
    border: 1px solid var(--c-gray-50);
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.npo .license .checkbox-custom:hover {
    background-color: var(--c-gray-20);
}

.npo .license .checkmark {
    background-image: url(../img/icons/check-white.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 12px;
    height: 12px;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.npo .license .info .title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.npo .license .info .title .text {
    font-size: 15px;
    font-weight: 600;
    font-variation-settings: "wght" 600, "dots" 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    color: var(--c-text-tertiary);
}

.npo .license .info .title .badge {
    font-size: 11px;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-top: -3px;
    color: var(--c-text-tertiary);
}

.npo .license .trail {}

.npo .license .info .price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.npo .license .info .price .old-price {
    color: var(--c-red);
    text-decoration: line-through;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    font-size: 13px;
    opacity: 0;
}

.npo .license .info .price .current-price {
    display: flex;
    align-items: baseline;
    gap: 1px;
}

.npo .license .info .price .current-price .amount {
    font-weight: 700;
    font-variation-settings: "wght" 700;
    font-size: 18px;
    color: hsl(0, 0%, 45%);
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.npo .license .info .price .current-price .currency {
    font-weight: 300;
    font-variation-settings: "wght" 300;
    font-size: 11px;
    color: var(--c-grey);
}

.npo .licenses-wrapper input:checked~.license {
    max-height: 400px;
}

.npo .licenses-wrapper input:checked~.license .checkbox-custom {
    background-color: var(--c-text-1);
    border-color: var(--c-text-1);
}

.npo .licenses-wrapper input:checked~.license .checkmark {
    opacity: 1;
}

.npo .licenses-wrapper .license-option.active .license .info .title .text {
    color: var(--c-text-1);
}

.npo .licenses-wrapper .license-option.active .license .current-price .amount {
    color: var(--c-gray-50);
    text-decoration: line-through;
}

.npo .licenses-wrapper .license-option.active.main-active .license .current-price .amount {
    color: #000;
    text-decoration: none;
}

.npo .license .details {
    padding-top: 8px;
    padding-right: 20px;
}

.npo .license .details>.inner {
    background-color: hsl(240deg 15% 90%);
    border-radius: 12px;
    box-shadow:
        inset 0px -1px 0px 0px #fff;
    position: relative;
}

.npo .license .license-description {
    padding: 12px;
    font-size: 13px;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    color: var(--c-text-secondary);


}

.npo .license .license-description .text {}

.npo .license .license-description a {
    color: var(--c-blue);
}

.npo .license .license-inputs {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px dashed var(--c-gray-50);
}

.npo .license .license-inputs:not(:has(.license-input-wrapper)) {
    display: none;
}

.npo .license-input-wrapper {
    display: flex;
    flex-direction: column;
}

.npo .license-input-wrapper label {
    font-size: 13px;
    display: block;
    margin-bottom: 3px;
    color: var(--c-text-secondary);
}

.npo .license-input-wrapper input {
    height: 36px;
    font-size: 15px;
    padding: 0 8px;
    outline: none;
    border: none;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid var(--c-gray-50);
    color: var(--c-text-secondary);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    width: 100%;
    box-sizing: border-box;

    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.npo .license-input-wrapper .input-helper {
    font-size: 11px;
    display: block;
    margin-top: 2px;
    color: var(--c-text-tertiary);
    display: none;
}

.npo .side-preview {
    display: none;
}

.npo .side-preview .preview-wrapper {}

.npo .side-preview .preview-wrapper img {}

.npo .license-option.active .checkbox-custom {
    background-color: var(--c-text-1) !important;
    border-color: var(--c-text-1) !important;
}

.npo .license-option.active .checkmark {
    opacity: 1 !important;
}

.npo .license-option.active::after {
    content: "";
    position: absolute;
    width: 4px;
    height: calc(100% + 3px);
    background-color: var(--c-text-1);
    top: 24px;
    right: 7px;
}

.npo .license-option.active.main-active::after {
    opacity: 0;
}

.npo .license-option.active.main-active .inner::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 16px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 12px 12px 12px;
    border-color: transparent transparent #e2e2e9 transparent;
    transform: rotate(0deg);
}

.npo .license-option.active:hover .license .info .checkbox-custom {}

.npo .section.total {
    margin-top: 16px;
    border-top: 1px solid var(--c-gray-40);
    padding-top: 16px;
    font-size: 16px;
}

.npo .section.total .total-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.npo .section.total .total-wrapper .title {
    font-size: 18px;
}

.npo .section.total .total-wrapper .value {
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 600;
    font-variation-settings: "wght" 600, "dots" 2;
    -moz-font-feature-settings: "ss02";
    -webkit-font-feature-settings: "ss02";
    font-feature-settings: "ss02";
}

.npo .section.total .total-wrapper .discount {}

.npo .section.total .total-wrapper .discount .amount {
    font-size: 18px;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    text-decoration: line-through;
    color: var(--c-red);
}

.npo .section.total .total-wrapper .discount .currency {
    display: none;
}

.npo .section.total .total-wrapper .total {}

.npo .section.total .total-wrapper .total .amount {
    font-size: 24px;
    font-weight: 700;
    font-variation-settings: "wght" 700;
}

.npo .section.total .total-wrapper .total .currency {
    font-weight: 400;
    font-variation-settings: "wght" 400;
}

.npo .section.total .add-to-cart {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 8px;
}

.npo .section.total .add-to-cart-btn {
    width: 100%;
    outline: 0;
    display: block;
    height: 54px;
    border-radius: var(--br-2);
    border: none;
    background-color: var(--c-red);
    color: #fff;
    font-size: var(--fs-5);
    cursor: pointer;
    font-weight: 400;
    font-variation-settings: "wght" 400, "dots" 1;
}



/* nnnnnnnnnnnnnnnew purchase options */
.tabs .tabs-header .wrapper {
    display: flex;
    overflow: auto;
    padding-bottom: 10px;
}

.tabs .tabs-header .tablink {
    padding: 15px;
    flex-shrink: 0;
    position: relative;
    border: none;
    outline: 0;
    background-color: transparent;
    font-weight: 300;
    font-variation-settings: "wght" 300, "dots" 1;
    color: var(--c-grey);
    cursor: pointer;
    overflow: visible;
    transition: 0.26s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.tabs .tabs-header .tablink::after {
    content: "";
    position: absolute;
    height: 9px;
    width: 0;
    bottom: -4px;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 2;
    border-radius: var(--br-round);
    background-color: var(--c-grey-light-7);
    transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.tabs .tabs-header .tablink.active::after {
    width: 48px;
    background-color: var(--c-red);
    box-shadow: 0 2px 4px -2px var(--c-red);
}

.tabs .tabs-content .tabcontent {
    display: none;
    animation: 1s fadeEffect;
    font-size: var(--fs-3);
}

.tabs .tabs-content .tabcontent>.wrapper {
    padding: 12px 0;
    max-width: 700px;
}

.fontpage-tabs .tabs-content .font-specs .spec {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: var(--fs-3);
}

.fontpage-tabs .tabs-content .font-specs .spec .value {
    text-align: left;
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.font-lab-sc .fl-results.long>.wrapper {
    max-height: 100%;
    overflow: visible;
}

.font-lab-sc .controls {
    width: 100%;
    max-width: 600px;
    background-color: var(--c-grey-light-8);
    border: 1px solid var(--c-grey-light-4);
    border-radius: var(--br-2);
    position: relative;
    margin: 0 auto;
}

.font-lab-sc .controls .fl-textfield {
    width: 100%;
    border: none;
    padding: 15px;
    background-color: transparent;
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.font-lab-sc .controls .character-counter {
    position: absolute;
    font-size: var(--fs-3);
    top: -25px;
    left: 0;
    color: var(--c-grey);
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.btDefult,
.font-lab-sc .controls .fl-submit {
    height: 46px;
    background-color: var(--c-blue);
    color: #fff;
    outline: 0;
}

.font-lab-sc .controls .fl-submit {
    width: 100%;
    display: block;
    border-radius: var(--br-1);
    border: none;
    box-shadow: 0 2px 4px -2px var(--c-blue);
    cursor: pointer;
}

.cart-sc,
.contact-page,
.font-lab-sc .fl-results,
.pagination-container {
    padding: 30px 0;
}

.font-lab-sc .fl-results .result {
    padding: 10px 0;
    border-bottom: 1px solid var(--c-grey-light-5);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.font-lab-sc .fl-results .result .font-weight {
    font-size: var(--fs-3);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    color: var(--c-grey-light-2);
    text-align: center;
}

.font-lab-sc .font-lab-link {
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    gap: 4px;
    flex-wrap: wrap;
    text-align: center;

}

.font-lab-sc .font-lab-link a {
    font-weight: 500;
    color: var(--c-red);
    cursor: pointer;
}

.font-lab-sc .font-lab-link .title {
    color: var(--c-text-tertiary);
    font-weight: 300;
}

.font-lab-sc .font-lab-link .btDefult {}

@media only screen and (max-width: 1024px) {
    .main-font-desc .text-content-wrapper img {
        max-width: 100% !important;
        height: auto;
    }
}

.main-font-desc .section.before-carusel .sc-title {
    margin-bottom: 1.5rem;
    font-size: var(--fs-5);
    text-align: center;
}

.main-font-desc .section.after-carusel,
.main-font-desc .section.before-carusel {
    font-size: var(--fs-3);
    line-height: 1.8;
}

.main-font-desc .section.gallery {
    padding: 30px 0;
    overflow: hidden;
    margin: 0 -15px;
}

.main-font-desc .section.gallery .item {
    width: auto;
    cursor: grab;
}

.main-font-desc .section.gallery .item .caption {
    position: absolute;
    width: calc(100% - 20px);
    bottom: 10px;
    left: 0;
    right: 0;
    margin: auto;
    padding: 10px;
    font-size: var(--fs-2-5);
    background-color: rgb(255 255 255 / 75%);
    border-radius: var(--br-1);
}

.main-font-desc .section.gallery .photo-wrapper img {
    height: calc((100vw - 50px) / 2);
    max-width: calc(100vw - 50px);
    border-radius: var(--br-2);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 8%);
}

.main-font-desc .section.gallery .swiper-buttons {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: var(--br-round);
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    font-size: 18px;
    font-variation-settings: "wght" 700;
    color: var(--c-text-1);
    opacity: 0.6;
}

.comments-faq-sc .comment.type-reply .reply-bt,
.font-p-designers .page-container,
.pagination-container .item.perv-next.disabled:hover {
    background-color: var(--c-grey-light-7);
}

.font-p-designers .designer {
    background-color: #fff;
    border-radius: var(--br-3);
    margin-bottom: 30px;
}

.font-p-designers .designer .right {
    padding-top: 30px;
    position: relative;
}

.font-p-designers .designer .media-container {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--br-round);
    border: 1px solid var(--c-grey-light-4);
}

.font-p-designers .designer .role span {
    position: absolute;
    padding: 5px 10px;
    margin: 10px auto;
    display: block;
    text-align: center;
    font-size: var(--fs-2-5);
    font-weight: 300;
    font-variation-settings: "wght" 300, "dots" 1;
    background-color: var(--c-grey-light-6);
    border-radius: var(--br-2);
    top: 0;
    left: 10px;
}

.font-p-designers .designer .name {
    text-align: center;
    font-variation-settings: "wght" 700, "dots" 1;
    font-size: var(--fs-5);
    color: var(--c-red-3);
    margin: 15px 0;
}

.font-p-designers .designer .social-links {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 10px 0 30px;
}

.font-p-designers .designer .social {
    display: block;
    margin: 0 10px;
}

.faq-cats .item:nth-child(2),
.font-p-designers .designer .about {
    border-bottom: 1px solid var(--c-grey-light-5);
}

.font-p-designers .designer .about .wrapper {
    padding: 15px;
    font-size: var(--fs-3);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    line-height: 1.8;
    color: var(--c-grey-dark-2);
}

.font-p-designers .designer .view-more {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: var(--fs-3);
    justify-content: center;
    padding: 15px;
    color: var(--c-grey-dark-5);
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.font-p-designers .designer .view-more img {
    margin-right: 5px;
    margin-top: 5px;
}

.recommended-sc .sc-title {
    margin-bottom: 15px;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.comments-faq-sc .comments-sc .sc-title .title,
.orders-list .item .bundle-name,
.recommended-posts .sc-title .title,
.recommended-sc .sc-title .title {
    font-variation-settings: "wght" 700, "dots" 1;
}

.recommended-sc .sc-title .swiper-buttons {
    width: 30px;
    height: 30px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    display: none;
}

.recommended-sc .sc-title .rf-control-button-prev img {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.recommended-sc .sc-title .swiper-buttons.swiper-button-disabled {
    cursor: inherit;
    opacity: 0.1;
}

.recommended-sc .recommended-fonts-carusel {
    overflow: hidden;
    margin: 0 -15px;
}

.recommended-sc .card {
    width: 86%;
    margin-right: 15px;
}

.comments-faq-sc {
    padding: 50px 0;
}

.comments-faq-sc .comments-sc .sc-title {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.comments-faq-sc .comment-conatiner {
    padding: 10px;
    background-color: var(--c-grey-light-6);
    border-radius: var(--br-2);
    margin-bottom: 15px;
}

.recommended-posts {
    margin-top: 120px;
}

.recommended-posts .sc-title {
    margin-bottom: 15px;
    display: flex;
}

.recommended-posts .post-card {
    text-decoration: none;
    color: var(--c-text);
    display: flex;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 12px;
    background-color: #fff;
    border-radius: var(--br-3);
    border: 1px solid var(--c-grey-light-4);
}

.inp-wrapper:first-child,
.m-invoice-req .form-control .input-wrapper.form-buttons,
.new-login .login-form .inp-wrapper:last-child,
.new-login .tabs-header,
.recommended-posts .post-stream .post-card:first-child {
    margin-top: 0;
}

.recommended-posts .post-image {
    width: 90px;
    height: 90px;
    overflow: hidden;
    border-radius: 8px;
    flex-shrink: 0;
}

.recommended-posts .post-content {
    padding: 4px 0;
    flex-grow: 1;
}

.recommended-posts .post-content .top {
    font-size: var(--fs-2-5);
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.new-login .tabs-header .tablink:hover,
.recommended-posts .post-date {
    color: var(--c-text-tertiary);
}

.recommended-posts a {
    text-decoration: none;
    color: var(--c-text);
}

.recommended-posts .post-title {
    margin-top: 8px;
    margin-bottom: 0;
    font-size: var(--fs-3);
    font-weight: 500;
    font-variation-settings: "wght" 500;
    line-height: 1.5;

}

.comment-need-to-login .wrapper {
    padding: 30px;
    background-color: var(--c-grey-light-6);
    border-radius: var(--br-2);
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 2;
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.comment-need-to-login .wrapper a,
.m-license-script .text a {
    color: var(--c-blue-3);
}

.comments-faq-sc .comment {
    padding-bottom: 10px;
}

.comments-faq-sc .comment.type-reply {
    padding: 10px;
    background-color: var(--white);
    border-radius: var(--br-2);
    margin-bottom: 15px;
}

.comments-faq-sc .comment .c-head {
    display: flex;
    justify-content: space-between;
    padding-bottom: 5px;
}

.comments-faq-sc .comment .c-head .start {
    width: 100%;
    display: flex;
    align-items: center;
}

.comments-faq-sc .comment .profile {
    position: relative;
    padding-bottom: 6px;
}

.comments-faq-sc .comment .avatar {
    width: 54px;
    height: 54px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: var(--br-round);
}

.comments-faq-sc .comment .profile .role {
    position: absolute;
    bottom: 0;
    width: 54px;
    padding: 1px 0;
    font-size: var(--fs-1);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    color: var(--c-grey-dark-4);
    background-color: #fff;
    text-align: center;
    border-radius: var(--br-round);
}

.comments-faq-sc .comment.rol-buyer .profile .role {
    color: var(--c-blue);
}

.comments-faq-sc .comment.rol-admin .profile .role {
    color: var(--white);
    background-color: var(--c-red-3);
}

.comments-faq-sc .comment.rol-admin .avatar {
    border-color: var(--c-red-3);
}

.comments-faq-sc .comment .details {
    width: calc(100% - 54px);
    padding: 0 10px 0 0;
    overflow: hidden;
}

.comments-faq-sc .comment .details * {
    white-space: nowrap;
    overflow: hidden;
}

.comments-faq-sc .comment .name {
    font-size: var(--fs-3);
    font-variation-settings: "wght" 700, "dots" 1;
    margin-bottom: 5px;
}

.comments-faq-sc .comment .reply-to {
    font-size: var(--fs-2);
    color: var(--c-red-3);
    display: none;
}

.comments-faq-sc .comment .c-head .end {
    flex-shrink: 0;
}

.comments-faq-sc .comment .reply-bt {
    height: 30px;
    width: 68px;
    outline: 0;
    border: none;
    background-color: #fff;
    color: var(--c-grey-dark-2);
    font-size: var(--fs-3);
    border-radius: var(--br-1);
    font-variation-settings: "wght" 400, "dots" 1;
}

.comments-faq-sc .comment .text-wrapper {
    font-size: var(--fs-3);
    line-height: 1.8;
    padding-bottom: 10px;
}

.comments-faq-sc .comment .media {
    display: flex;
    padding: 5px 5px 5px 0;
    background-color: var(--c-grey-light-4);
    border-radius: var(--br-1);
}

.comments-faq-sc .comment .media .media-container {
    width: 48px;
    height: 48px;
    margin-left: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--br-1);
    overflow: hidden;
    border: 2px solid #fff;
    background-color: #fff;
}

.comments-faq-sc .comment .media .media-container img,
.font-card .thumb img {
    max-height: 100%;
    max-width: 100%;
}

.pagination-container>.wrapper {
    display: flex;
    justify-content: center;
}

.pagination-container ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: inline-flex;
    justify-content: space-between;
}

.pagination-container .item {
    width: 44px;
    height: 44px;
    margin: 0 3px;
    background-color: var(--c-grey-light-7);
    flex-shrink: 0;
    border-radius: var(--br-round);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.pagination-container .item a {
    text-decoration: none;
    color: inherit;
    font-weight: 500;
    font-variation-settings: "wght" 500;
    line-height: 0;
}

.pagination-container .item.divider {
    background-color: transparent;
    width: 28px;
    padding-bottom: 5px;
    color: var(--c-grey);
    margin: 0;
    cursor: default;
}

.pagination-container .item.active {
    background-color: var(--c-red-3);
    color: var(--white);
}

.pagination-container .item.perv-next.disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.comments-faq-sc .new-comment {
    padding-top: 30px;
    border-top: 1px solid var(--c-grey-light-5);
}

.comments-faq-sc .new-comment .profile {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.comments-faq-sc .new-comment .avatar {
    width: 54px;
    height: 54px;
    margin-left: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--c-grey-light-5);
    border-radius: var(--br-round);
}

.comments-faq-sc .new-comment .avatar img,
.comments-faq-sc .new-comment .uploade-preview img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.comments-faq-sc .new-comment textarea {
    width: 100%;
    outline: 0;
    border: none;
    background: var(--c-grey-light-7);
    padding: 15px;
    border-radius: var(--br-3);
}

.comments-faq-sc .new-comment .bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

.comments-faq-sc .new-comment .file-attachment button {
    font-size: var(--fs-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    background-color: var(--c-grey-light-3);
    border-radius: var(--br-2);
    font-weight: 300;
    font-variation-settings: "wght" 300, "dots" 1;
}

.comments-faq-sc .new-comment .send-comment-bt button {
    font-size: var(--fs-3);
    border-radius: var(--br-2);
    background-color: var(--c-red);
    width: 160px;
    cursor: pointer;
    font-variation-settings: "wght" 400, "dots" 1;
}

.comments-faq-sc .new-comment .file-attachment img {
    width: 16px;
    margin-left: 5px;
}

.comments-faq-sc .new-comment .uploade-preview .item {
    background-color: var(--c-grey-light-7);
    padding: 6px;
    border-radius: var(--br-2);
    display: flex;
    justify-content: space-between;
}

.comments-faq-sc .new-comment .uploade-preview .media-container {
    width: 48px;
    height: 48px;
    border-radius: var(--br-1);
    overflow: hidden;
}

.comments-faq-sc .new-comment .uploade-preview .remove-file {
    border: none;
    cursor: pointer;
    background-color: transparent;
    padding: 0 10px;
    font-size: var(--fs-5);
}

.btDefult {
    display: block;
    border: none;
    padding: 0 15px;
    border-radius: var(--br-1);
    cursor: pointer;
}

.btDefult.btWithIcon,
.standard-table.invoices-table .c-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btDefult.btWithIcon .icon {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}

.blog-index-header {
    padding-bottom: 40px;
    border-bottom: 1px solid var(--c-grey-light-5);
}

.blog-index-header .page-container {
    position: relative;
    background: linear-gradient(0deg, var(--white) 0, var(--c-grey-light-5));
}

.blog-index-header .page-container::before {
    content: "";
    position: absolute;
    background-image: url(../img/pattern-3.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 320px;
    top: 10px;
    opacity: 1;
}

.blog-index-header .hero {
    position: relative;
    padding: 60px 0;
    display: flex;
    justify-content: center;
}

.blog-index-header .b-main-title,
.gift-card-table table td.action {
    text-align: center;
}

.blog-index-header .b-main-title .title {
    font-size: var(--fs-8);
    font-variation-settings: "wght" 900;
}

.blog-index-header .b-main-title .sub {
    font-size: var(--fs-3);
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.blog-index-header .b-featured-posts {
    position: relative;
    background-color: #fff;
    padding: 10px;
    border-radius: var(--br-3) var(--br-3) 0 0;
}

.blog-index-header .b-featured-posts .sc-title {
    display: flex;
    align-items: center;
    padding: 10px 0 20px;
}

.blog-index-header .b-featured-posts .sc-title .icon {
    margin-left: 5px;
}

.blog-index-header .b-featured-posts .sc-title .title,
.posts-stream .sc-title .title {
    margin: 0;
    font-variation-settings: "wght" 700;
    font-size: var(--fs-4);
}

.blog-index-header .b-featured-posts .full-width {
    margin: 0 -25px;
    overflow: hidden;
}

.blog-index-header .b-featured-posts .blog-latest {
    padding: 0;
    overflow: initial;
}

.blog-index-header .b-featured-posts .post {
    margin-left: 0;
    margin-right: 25px;
}

.blog-index-header .b-featured-posts .post:last-child,
.orders-list .item .licenses-list .license:last-child {
    margin-left: 25px;
}

.blog-index-content .cats-list ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 20px 0;
    overflow-x: auto;
}

.blog-index-content .cats-list .category {
    display: block;
    padding: 5px 20px;
    margin-left: 10px;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    border: 1px solid var(--c-grey-light-4);
    border-radius: var(--br-round);
    color: var(--c-grey-dark-2);
}

.blog-index-content .cats-list .category.active {
    background-color: var(--c-grey-dark-5);
    border-color: var(--c-grey-dark-5);
    box-shadow: 0 2px 6px -2px var(--c-grey-dark-5);
    color: var(--white);
}

.faq-cats .item:first-child,
.faq-cats .item:nth-child(3) {
    border-left: 1px solid var(--c-grey-light-5);
}

.posts-stream .sc-title {
    padding: 20px 0 30px;
}

.posts-stream .card-post {
    margin-bottom: 50px;
}

.posts-stream .card-post .thumb {
    padding-top: 75%;
    position: relative;
    width: 100%;
}

.posts-stream .card-post .tumb-media-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--c-grey-light-7);
    border-radius: var(--br-2);
    overflow: hidden;
}

.posts-stream .card-post .top {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    font-size: var(--fs-3);
}

.posts-stream .card-post .title-cap {
    display: block;
    height: 110px;
    overflow: hidden;
}

.posts-stream .card-post .headline {
    max-height: 54px;
    font-size: var(--fs-4);
    font-variation-settings: "wght" 700;
    line-height: 1.5;
    overflow: hidden;
}

.blog-post-content .entry-content span,
.blog-post-content .posts-seo-tags .tag,
.blog-post-content .related-posts .cat-date,
.blog-post-header .meta .value,
.posts-stream .card-post .dek {
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.posts-stream .card-post .dek {
    max-height: 46px;
    overflow: hidden;
    font-size: var(--fs-3);
}

.blog-archive-content .sc-title {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: var(--c-grey-light-5);
    border-radius: var(--br-2);
    margin: 40px 0 30px;
}

.blog-archive-content .sc-title .icon {
    width: 22px;
    margin-left: 5px;
}

.blog-post-header .page-container {
    padding-top: 150px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto 260px;
}

.blog-post-header .page-container::before {
    content: "";
    position: absolute;
    background: linear-gradient(0deg, rgb(255 255 255 / 100%) 0, rgb(255 255 255 / 0%));
    width: 100%;
    height: 260px;
    top: 0;
    opacity: 1;
}

.blog-post-header .head {
    position: relative;
    background-color: #fff;
    padding: 15px 15px 20px;
    border-radius: var(--br-2) var(--br-2) 0 0;
    min-height: 150px;
}

.blog-post-header .headline {
    font-size: var(--fs-5);
    line-height: 1.5;
    font-variation-settings: "wght" 700, "dots" 1;
}

.blog-post-header .meta {
    display: flex;
    overflow: auto;
    margin: 20px -30px 0;
    padding-right: 30px;
}

.blog-post-header .meta .item {
    padding: 5px 10px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    background-color: var(--white);
    border: 1px solid var(--c-grey-light-5);
    border-radius: var(--br-round);
}

.blog-post-header .meta .icon {
    width: 18px;
    height: 18px;
    margin-left: 5px;
}

.blog-post-header .meta .value {
    white-space: nowrap;
    font-size: var(--fs-2-5);
}

.blog-post-content {
    padding-top: 20px;
    border-top: 1px solid var(--c-grey-light-5);
}

.blog-post-content .entry-content p,
.blog-post-content .entry-content span {
    font-size: var(--fs-4);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.blog-post-content .entry-content h2,
.blog-post-content .entry-content h3,
.blog-post-content .entry-content h4,
.blog-post-content .entry-content h5,
.blog-post-content .entry-content h6 {
    font-size: var(--fs-5);
    line-height: 1.5;
    margin-bottom: 1.5rem;
    max-width: 40em;
}

.blog-post-content .entry-content img {
    padding: 15px 0;
    max-width: min(100%, 40em) !important;
    height: auto;
}

.blog-post-content .posts-seo-tags {
    padding-top: 50px;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-2-5);
}

.blog-post-content .posts-seo-tags .tag {
    text-decoration: none;
    color: initial;
    margin-right: 5px;
}

.blog-post-content .posts-seo-tags .tag::after {
    content: ",";
}

.blog-post-content .posts-seo-tags .tag:last-child:after {
    content: "";
}

.blog-post-content .related-posts {
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid var(--c-grey-light-5);
}

.blog-post-content .related-posts .post-card,
.blog-post-content .related-posts .sc-title,
.contact-page .sc-title,
.font-card,
.form-control .input-wrapper,
.profile-edit.profile-password .avatar {
    margin-bottom: 20px;
}

.blog-post-content .related-posts .thumb {
    position: relative;
    width: 120px;
    height: 90px;
    flex-shrink: 0;
}

.blog-post-content .related-posts .thumb .media-container {
    background-color: var(--c-grey-light-7);
    border-radius: var(--br-1);
    overflow: hidden;
}

.blog-post-content .related-posts .details {
    padding: 0 10px 0 0;
    display: flex;
    flex-direction: column;
}

.blog-post-content .related-posts .cat-date {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-2-5);
}

.blog-post-content .related-posts .hedline {
    padding-top: 5px;
    margin: 0;
    font-size: var(--fs-3);
    font-weight: 500;
    font-variation-settings: "wght" 500;
    color: var(--c-text-1);
    line-height: 1.5;
}

.faq-top .page-container {
    position: relative;
    background: linear-gradient(0deg, var(--white) 0, var(--c-grey-light-7));
}

.faq-top .sc-title {
    text-align: center;
    padding: 80px 0 20px;
}

.faq-top .main-title {
    font-size: var(--fs-6);
    font-variation-settings: "wght" 900;
}

.faq-top .sub-title {
    margin: 10px auto;
    max-width: 300px;
    font-size: var(--fs-3);
    color: var(--c-grey-dark-2);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    line-height: 1.5;
}

.page-search-bar .input-wrapper {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}

.page-search-bar .input-wrapper input {
    width: 100%;
    height: 54px;
    padding: 0 15px 0 70px;
    outline: 0;
    border: 1px solid var(--c-grey-light-5);
    border-radius: var(--br-2);
    font-size: var(--fs-4);
    background-color: #fff;
    transition: border-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.page-search-bar .input-wrapper input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background: url("../img/icons/trash-grey-2.svg") 50% 50% / contain no-repeat;
    opacity: 0;
    pointer-events: none;
}

.page-search-bar .input-wrapper input:focus::-webkit-search-cancel-button {
    opacity: 1;
    pointer-events: all;
}

.page-search-bar .input-wrapper input:focus {
    border: 1px solid var(--c-grey-light-3);
}

.page-search-bar .submit-search {
    position: absolute;
    width: 54px;
    height: 44px;
    left: 5px;
    top: 5px;
    border-radius: var(--br-1);
    border: none;
    background-color: var(--c-red-3);
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.faq-cats,
.tab-gifts .create-gift-card {
    padding-top: 30px;
}

.faq-cats .list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--c-grey-light-5);
    border-radius: var(--br-2);
}

.faq-cats .item {
    display: block;
    width: 50%;
    padding: 15px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: initial;
}

.faq-cats .item .icon {
    width: 42px;
    margin: 0 auto;
}

.faq-cats .item .title {
    font-weight: 300;
    font-variation-settings: "wght" 300, "dots" 1;
    font-size: var(--fs-3);
    padding-top: 10px;
    color: var(--c-text-1);
}

.faq-cats .item:first-child {
    border-bottom: 1px solid var(--c-grey-light-5);
}

.faq-content .questions-wrapper {
    padding: 20px 0 40px;
}

.faq-content .questions-wrapper .sc-title .title {
    font-size: var(--fs-4);
    font-variation-settings: "wght" 700, "dots" 1;
    margin-bottom: 20px;
    display: inline-flex;
}

.faq-content .question-wrapper {
    border: 1px solid var(--c-grey-light-4);
    border-radius: var(--br-2);
    margin-bottom: 15px;
    transition: 0.2s ease-in-out;
}

.faq-content .question-toggle {
    padding: 10px 15px;
    cursor: pointer;
    position: relative;
    display: flex;
}

.faq-content .question-toggle::after {
    content: "";
    display: inline-block;
    border-style: solid;
    position: absolute;
    height: 8px;
    width: 8px;
    left: 15px;
    top: 0;
    bottom: 0;
    margin: auto;
    border-width: 1px 1px 0 0;
    transform: rotate(135deg);
    color: var(--c-red);
    transition: transform 0.2s ease-in-out;
}

.faq-content .question-wrapper.open .question-toggle {
    border-bottom: 1px solid var(--c-grey-light-7);
}

.faq-content .question-wrapper.open .question-toggle::after {
    transform: rotate(-45deg);
}

.faq-content .question-toggle .question {
    font-size: var(--fs-3);
    font-weight: 500;
    font-variation-settings: "wght" 500;
    padding-left: 30px;
    margin-bottom: 0;
    line-height: 1.5;
    color: var(--c-grey-dark-4);
}

.faq-content .answer {
    font-size: var(--fs-3);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    width: 100%;
}

.faq-content .question-wrapper.open .answer {
    overflow-y: auto;
    max-height: 430px;
    transition: max-height 0.6s ease-out;
}

.faq-content .answer .wrapper {
    padding: 15px;
    color: var(--c-grey-dark-2);
}

.faq-content .answer .wrapper p {
    line-height: 1.8;
}

.p-faq-search .page-search-bar .input-wrapper input {
    padding-right: 40px;
}

.p-faq-search .page-search-bar .back-to-home {
    display: flex;
    position: absolute;
    right: 5px;
    top: 5px;
    height: 44px;
    padding: 0 5px;
    align-items: center;
    opacity: 0.8;
}

.p-faq-search .faq-content .search-result .no-result {
    display: flex;
    justify-content: center;
    color: var(--c-red-3);
    padding-bottom: 80px;
}

.p-license-check .faq-top .main-title {
    line-height: 1.5;
    font-size: var(--fs-5);
    max-width: 520px;
    margin: 0 auto;
}

.p-license-check .page-search-bar .submit-search {
    width: 78px;
    background-color: var(--c-blue);
    color: #fff;
}

.p-license-check .page-search-bar .input-wrapper input {
    padding: 0 15px 0 86px;
}

.p-license-check .latest-licenses {
    border-top: 1px solid var(--c-grey-light-5);
    margin-top: 100px;
    padding: 60px 0;
}

.p-license-check .latest-licenses .main-title {
    font-size: var(--fs-4);
    font-variation-settings: "wght" 700;
    margin-bottom: 20px;
}

.p-license-check .license {
    padding: 10px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: initial;
    background-color: var(--c-grey-light-8);
    border-radius: var(--br-3);
}

.p-license-check .license .font-icon,
.p-license-check .license .license-icon {
    width: 48px;
    justify-content: center;
    height: 48px;
    position: relative;
    display: flex;
}

.p-license-check .license .font-icon {
    padding: 13px;
    align-items: center;
    border-radius: var(--br-round);
}

.p-license-check .license .license-icon {
    margin-right: -20px;
    padding: 7px;
    align-items: center;
    border: 1px solid var(--c-grey-light-5);
    border-radius: var(--br-round);
    background-color: rgb(255 255 255 / 80%);
    --webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.p-license-check .license .details {
    padding-right: 10px;
}

.p-license-check-search .license {
    margin: 0 auto 15px;
    max-width: 620px;
}

.p-license-check-search .no-result {
    display: flex;
    justify-content: center;
    color: var(--c-red-3);
    padding: 40px 0;
}

.license-view {
    margin: 30px auto;
    background-color: var(--c-grey-light-7);
    border-radius: var(--br-3);
    padding: 15px;
}

.license-view .block {
    padding-bottom: 30px;
}

.license-view .license-badge {
    margin: 25px auto;
    width: 164px;
    height: 164px;
    padding: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--white);
    border-radius: var(--br-round);
}

.license-view .license-code span {
    display: block;
    height: 48px;
    width: 164px;
    line-height: 52px;
    margin: 0 auto;
    font-variation-settings: "wght" 700;
    text-align: center;
    background-color: var(--c-grey-light-5);
    border: 1px solid var(--c-grey-light-4);
    border-radius: var(--br-2);
}

.fonts-list .contnet-filters label,
.form-control label {
    display: block;
    font-variation-settings: "wght" 300, "dots" 1;
}

.license-view .title {
    text-align: center;
    padding: 20px 0;
    font-size: var(--fs-5);
    font-variation-settings: "wght" 700, "dots" 1;
}

.font-card .tag,
.license-view .top {
    font-variation-settings: "wght" 300;
}

.license-view .details-wrapper {
    padding: 10px;
    background-color: #fff;
    border-radius: var(--br-2);
    font-size: var(--fs-3);
}

.license-view .font-icon {
    width: 64px;
    height: 64px;
    padding: 16px;
    margin: 15px auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--br-round);
}

.license-view .top {
    text-align: center;
    font-weight: 300;
    color: var(--c-grey-dark-2);
}

.license-view .top .font-name a {
    color: var(--c-red-3);
    padding: 10px 0;
    display: block;
}

.license-view .bot {
    padding-top: 15px;
    margin-top: 5px;
    border-top: 1px solid var(--c-grey-light-6);
    display: flex;
    flex-wrap: wrap;
}

.fonts-list .filters-toggle,
.fonts-list .mob-filters-toggle {
    display: flex;
    padding: 12px 15px;
    background-color: var(--white);
    box-shadow: 0 6px 12px -6px hsl(240deg 2% 57% / 20%);
    z-index: 20;
}

.license-view .bot .license-holder {
    width: calc(100% - 92px);
    padding-right: 5px;
    font-weight: 500;
    font-variation-settings: "wght" 500;
    margin-bottom: 5px;
}

.license-view .bot .website-address {
    width: calc(100% - 62px);
    padding-right: 5px;
    font-variation-settings: "wght" 700;
    text-decoration: none;
    color: var(--c-text-1);
}

.fonts-list .filters-toggle {
    justify-content: center;
    align-items: center;
    border: 1px solid var(--c-grey-light-5);
    border-radius: var(--br-3);
}

.fonts-list .mob-filters-toggle {
    transform: translateX(130px);
    visibility: hidden;
    position: fixed;
    bottom: 20px;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--c-grey-light-5);
    border-radius: var(--br-3);
    transition: 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.font-card .font-wrapper,
.font-card .thumb {
    padding: 10px;
    position: relative;
    display: flex;
}

.fonts-list .mob-filters-toggle.show {
    transform: translateX(0);
    visibility: visible;
}

.fonts-list .filters-toggle .icon,
.fonts-list .mob-filters-toggle .icon {
    width: 18px;
    margin-left: 10px;
    opacity: 0.3;
}

.font-card a {
    display: block;
    text-decoration: none;
    color: var(--c-text-1);
}

.font-card .font-wrapper {
    flex-wrap: wrap;
    border-radius: var(--br-3);
    background-color: var(--c-grey-light-7);
}

.font-card .thumb {
    order: 2;
    width: 64px;
    height: 64px;
    justify-content: center;
    align-items: center;
    border-radius: var(--br-2);
}

.font-card .purchased {
    padding: 5px 10px;
    position: absolute;
    top: 10px;
    left: 10px;
    text-align: center;
    font-size: var(--fs-2);
    border-radius: var(--br-1);
    color: var(--white);
    background-color: hsl(0deg 0% 55.69%);
    z-index: 10;
}

.font-card .tag,
.form-control label {
    color: var(--c-grey-dark-2);
    font-weight: 300;
}

.font-card .details {
    order: 3;
    width: calc(100% - 64px);
    overflow: hidden;
    padding-right: 10px;
}

.font-card .price .old-price {
    text-decoration: line-through;
    color: var(--c-gray-600);
    padding-right: 5px;
    font-size: inherit;
    display: inline-block;
}


.font-card .price .value {
    font-variation-settings: "wght" 700;
    font-size: var(--fs-5);
}

.designers-list .designer .designer-name,
.p-designers-list .sc-title .title {
    font-variation-settings: "wght" 400, "dots" 1;
}

.font-card .tag {
    display: flex;
    height: 22px;
    padding: 0 10px;
    margin-left: 5px;
    margin-bottom: 50px;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: var(--fs-2);
    background-color: rgb(27 27 29 / 5%);
    border-radius: var(--br-round);
}

.font-card .oneliner {
    order: 1;
    height: 90px;
    padding: 5px 10px 15px;
    margin-bottom: 10px;
    width: 100%;
    border-bottom: 1px solid var(--c-grey-light-5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.font-card .oneliner img {
    max-width: 100%;
    max-height: 100%;
    opacity: 0.86;
}

.fonts-list .modal__overlay {
    align-items: flex-end;
}

.fonts-list .modal__container {
    width: 100%;
    border-radius: var(--br-5) var(--br-5) 0 0;
    padding: 30px 20px 20px;
    position: relative;
}

.fonts-list .contnet-filters .input-wrapper {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.fonts-list .contnet-filters .input-wrapper::after {
    content: "";
    display: inline-block;
    border-style: solid;
    position: absolute;
    height: 8px;
    width: 8px;
    left: 20px;
    border-width: 1px 1px 0 0;
    transform: rotate(135deg);
    color: var(--c-grey);
}

.fonts-list .contnet-filters label {
    margin-bottom: 5px;
    font-weight: 300;
    color: var(--c-grey);
    width: 100px;
}

.fonts-list .contnet-filters select {
    width: calc(100% - 100px);
    height: 54px;
    line-height: 52px;
    padding: 0 15px;
    border: 1px solid var(--c-grey-light-4);
    box-shadow: 0 4px 8px -4px hsl(240deg 2% 57% / 10%);
    border-radius: var(--br-2);
    position: relative;
    outline: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

option.option-heading.category-type {
    font-weight: 700 !important;
    font-variation-settings: "wght" 700, "dots" 1 !important;
}

.fonts-list .contnet-filters select:focus {
    border: 1px solid var(--c-grey-light-4);
}

.contact-page .support-faq,
.fonts-list .contnet-filters .form-buttons {
    padding-top: 10px;
}

.p-designer-view .font-list .sc-title .title,
.p-designers-list .sc-title .title,
.p-search-result .sc-title .title {
    margin: 0;
    padding: 5px 0;
    font-size: var(--fs-5);
    columns: var(--c-text-1);
}

.fonts-list .contnet-filters .submit-filters {
    height: 54px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--br-2);
    background-color: var(--c-text-1);
    color: var(--white);
}

.fonts-list .contnet-filters .reset-filters {
    height: 54px;
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--br-2);
    background-color: var(--c-grey-light-7);
    color: var(--c-text-1);
}

.fonts-list .contnet-filters .close-modal-bt {
    width: 24px;
    height: 24px;
    background: url(../img/icons/x-dark-2.svg) 50% 50% no-repeat;
    position: absolute;
    top: 10px;
    right: 14px;
    opacity: 0.2;
    display: none;
}

.designers-list .designers {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.designers-list .designer {
    width: calc(50% - 8px);
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: initial;
    border-radius: var(--br-3);
    transition: box-shadow 0.26s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.designers-list .designer .picture-wrapper {
    width: 100%;
    padding-top: 133.33%;
    position: relative;
    overflow: hidden;
}

.designers-list .designer .aspect-ratio {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.designers-list .designer .designer-name {
    text-decoration: none;
    color: var(--white);
    text-align: center;
    font-size: var(--fs-5);
}

.designers-list .designer .divider {
    height: 3px;
    width: 30px;
    background-color: var(--white);
    margin: 12px auto;
    border-radius: var(--br-round);
    opacity: 0.2;
    display: none;
}

.designers-list .designer .font-icon {
    width: 32px;
    height: 32px;
    padding: 8px;
    margin-left: -10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--br-round);
    border: 2px solid var(--c-text-1);
    transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.designer-cover-image .media-container img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-height: 300px;
}

.designer-info .profile-photo {
    width: 148px;
    height: 148px;
    margin: -60px auto 0;
    border-radius: var(--br-3);
    overflow: hidden;
    background-color: rgb(255 255 255 / 20%);
    backdrop-filter: saturate(100%) blur(8px);
    position: relative;
    padding: 10px;
}

.designer-info .other .name {
    text-align: center;
    font-size: var(--fs-6);
    margin: 10px 0;
    font-variation-settings: "wght" 900, "dots" 1;
}

.designer-info .other .occupation {
    text-align: center;
    color: var(--c-grey-light-2);
    font-variation-settings: "wght" 300;
}

.designer-info .social-links {
    padding: 20px 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.designer-info .about p {
    font-size: var(--fs-3);
    text-align: right;
    line-height: 1.8;
    margin: 0 auto;
    white-space: break-spaces;
}

.content-box,
.profile-edit {
    padding: 60px 0;
}

.content-box .box {
    max-width: 420px;
    margin: 0 auto;
    border-radius: var(--br-3);
    overflow: hidden;
}

.content-box .box .box-title {
    font-size: var(--fs-5);
    font-variation-settings: "wght" 700;
    padding-bottom: 20px;
}

.content-box .box .bot {
    padding-top: 20px;
    margin-top: 10px;
    border-top: 1px solid var(--c-grey-light-5);
}

.content-box .box .bot .link {
    font-weight: 300;
    font-variation-settings: "wght" 300;
    color: var(--c-grey-dark-4);
    font-size: var(--fs-3);
}

.form-control label {
    font-size: var(--fs-4);
    margin-bottom: 10px;
}

.form-control input[type="email"],
.form-control input[type="number"],
.form-control input[type="password"],
.form-control input[type="phone"],
.form-control input[type="search"],
.form-control input[type="text"] {
    width: 100%;
    height: 3rem;
    padding: 0 0.75rem;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    vertical-align: top;
    position: relative;
    border-radius: var(--br-2);
    border: 1px solid transparent;
    border-color: var(--c-grey-light-4);
    color: var(--c-text-1);
    background-color: var(--white);
    box-shadow: inset 0 0.0625em 0.125em rgb(10 10 10 / 5%);
    transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-appearance: none;
    -webkit-appearance: none;
}

.form-control input:focus,
.form-control select:focus,
.form-control textarea:focus {
    outline: 0;
    border-color: var(--c-grey-light-2);
    box-shadow: inset 0 0.0625em 0.125em rgb(10 10 10 / 10%);
}

.form-control .input-wrapper textarea,
.form-control select {
    background-color: var(--white);
    box-shadow: inset 0 0.0625em 0.125em rgb(10 10 10 / 5%);
    transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
    color: var(--c-text-1);
}

.form-control .input-wrapper.custom-check .switch {
    display: inline-block;
    height: 26px;
    position: relative;
    width: 42px;
    margin-bottom: 0;
    flex-shrink: 0 !important;
}

.form-control .input-wrapper.custom-check .switch .slider {
    background-color: var(--c-grey-light-3);
    border-radius: var(--br-round);
    position: absolute;
    cursor: pointer;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    transition: 0.4s;
}

.form-control .input-wrapper.custom-check .switch .slider::before {
    content: "";
    height: 20px;
    width: 20px;
    position: absolute;
    bottom: 3px;
    left: 3px;
    border-radius: var(--br-round);
    background-color: #fff;
    transition: 0.2s ease-out;
    box-shadow: 0 3px 8px rgb(0 0 0 / 15%), 0 3px 1px rgb(0 0 0 / 6%);
}

.form-control .input-wrapper.custom-check input:checked~label .slider,
.form-control .input-wrapper.form-buttons button.blue,
.sw-alert.sw-alert-info .swal2-modal::before {
    background-color: var(--c-blue-3);
}

.form-control .input-wrapper.custom-check input:checked~label .slider::before {
    transform: translateX(16px);
}

.form-control .input-wrapper.custom-check span {
    padding-right: 5px;
    color: var(--c-grey-dark-2);
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.form-control .input-wrapper.form-buttons {
    margin-top: 25px;
}

.form-control .input-wrapper.form-buttons button {
    width: 100%;
    height: 3rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    position: relative;
    font-weight: 300;
    font-variation-settings: "wght" 300, "dots" 1;
    border-radius: var(--br-2);
    border: 1px solid transparent;
    color: var(--white);
    background-color: var(--c-text-1);
    cursor: pointer;
    transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.form-control .input-wrapper.form-buttons button.red {
    background-color: var(--c-red-3);
    box-shadow: 0 2px 4px -2px var(--c-red-3);
}

.form-control .double-input .input-wrapper {
    width: 50%;
}

.form-control .double-input .input-wrapper:first-child input[type="email"],
.form-control .double-input .input-wrapper:first-child input[type="password"],
.form-control .double-input .input-wrapper:first-child input[type="phone"],
.form-control .double-input .input-wrapper:first-child input[type="search"],
.form-control .double-input .input-wrapper:first-child input[type="text"],
.form-control .double-input .input-wrapper:first-child select,
.form-control .double-input .select-wrapper:first-child select {
    border-radius: 0 var(--br-2) var(--br-2) 0;
    border-left: none;
}

.form-control .double-input .input-wrapper:nth-child(2) input[type="email"],
.form-control .double-input .input-wrapper:nth-child(2) input[type="password"],
.form-control .double-input .input-wrapper:nth-child(2) input[type="phone"],
.form-control .double-input .input-wrapper:nth-child(2) input[type="search"],
.form-control .double-input .input-wrapper:nth-child(2) input[type="text"],
.form-control .double-input .input-wrapper:nth-child(2) select,
.form-control .double-input .select-wrapper:nth-child(2) select {
    border-radius: var(--br-2) 0 0 var(--br-2);
}

#alertsContainer .sw-alert .swal2-modal:not(:last-child),
.cart-sc .items .item,
.contact-page .main-wrapper .content li,
.form-control.small .input-wrapper {
    margin-bottom: 15px;
}

.form-control.small label {
    font-size: var(--fs-3);
    margin-bottom: 7px;
}

.form-control.small input[type="email"],
.form-control.small input[type="password"],
.form-control.small input[type="phone"],
.form-control.small input[type="search"],
.form-control.small input[type="text"],
.form-control.small select {
    height: 2.6rem;
    font-size: var(--fs-3);
    padding: 0 10px;
}

.form-control.small .input-wrapper.form-buttons button {
    height: 2.6rem;
    font-size: var(--fs-3);
}

.form-control .switch-radio .switch-wrapper {
    width: 100%;
    height: 3rem;
    padding: 3px;
    display: flex;
    position: relative;
    border-radius: var(--br-2);
    border: 1px solid transparent;
    border-color: var(--c-grey-light-5);
    background-color: var(--c-grey-light-6);
}

.form-control .switch-radio .switch-wrapper label {
    width: 50%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--br-2);
    cursor: pointer;
    transition: 0.26s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.form-control .switch-radio .switch-wrapper input:checked+label {
    background-color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08), 0 3px 1px rgba(0, 0, 0, 0.03);
    color: var(--c-blue-3);
}

.form-control select {
    width: 100%;
    height: 3rem;
    padding: 0 0.75rem;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    vertical-align: top;
    position: relative;
    border-radius: var(--br-2);
    border: 1px solid transparent;
    border-color: var(--c-grey-light-4);
}

.form-control .select-wrapper select {
    -moz-appearance: none;
    -webkit-appearance: none;
}

.form-control .select-wrapper::after {
    content: "";
    display: inline-block;
    border-style: solid;
    position: absolute;
    height: 8px;
    width: 8px;
    left: 15px;
    bottom: calc(3rem - 8px);
    border-width: 1px 1px 0 0;
    transform: rotate(135deg);
    color: var(--c-grey);
}

.form-control .input-wrapper textarea {
    width: 100%;
    padding: 0.5rem;
    border-radius: var(--br-2);
    border: 1px solid transparent;
    border-color: var(--c-grey-light-4);
    -moz-appearance: none;
    -webkit-appearance: none;
    line-height: 1.5;
}

.verify-phone .phone-number {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.verify-phone .phone-number .phone {
    font-size: var(--fs-6);
    font-variation-settings: "wght" 700;
}

.social-login-btn {
    background-color: #fff;
    color: #757575;
    border: 1px solid #dbdbdb;
    font-weight: 300;
    font-variation-settings: "wght" 300, "dost" 1;
    border-radius: var(--br-2);
    padding: 10px 20px;
    cursor: pointer;
    height: 3rem;
    margin: 5px 0;
    text-decoration: none;
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
}

.modal-content-wrapper .social-login-btn {
    height: 2.6rem;
}

.social-btn-img {
    margin: 5px;
}

.social-login-btn:hover {
    background-color: #f1f1f1;
}

.verify-phone .phone-number .edit-phone {
    text-decoration: none;
    padding: 5px 8px 3px;
    border-radius: var(--br-round);
    color: var(--c-grey);
    font-size: var(--fs-1);
    background-color: var(--c-grey-light-5);
}

.verify-phone .phone-number .edit-phone:hover {
    color: var(--c-text-1);
    background-color: var(--c-grey-light-3);
}

.verify-phone .form-control .input-wrapper.verify-code input {
    text-align: center;
    font-variation-settings: "wght" 700;
    font-size: var(--fs-6);
    letter-spacing: 10px;
}

.content-box .box.verify-phone .bot .links,
.fsvnew .predefineds .section .section-title {
    justify-content: center;
}

.cart-sc .cart-p-title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.cart-sc .cart-p-title .title,
.contact-page .sc-title .title {
    font-size: var(--fs-5);
    margin: 0;
    padding: 5px 0 5px 5px;
    columns: var(--c-text-1);
    font-variation-settings: "wght" 400, "dots" 1;
}

.cart-sc .cart-p-title .counter {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--c-red-3);
    color: var(--white);
    font-size: var(--fs-3);
    border-radius: var(--br-round);
}

.cart-sc.cart-empty .main-wrapper {
    background-color: var(--c-grey-light-8);
    border-radius: var(--br-3);
    padding: 50px 20px;
    display: block;
}

.cart-sc .main-wrapper .empty-illu {
    width: 160px;
    margin: 0 auto;
}

.cart-sc .main-wrapper .empty-illu img {
    margin-right: 15px;
}

.cart-sc.cart-empty.error-page .main-wrapper .empty-illu {
    width: 280px;
}

.cart-sc .main-wrapper .empty-title {
    text-align: center;
    padding: 20px 0 5px;
    font-variation-settings: "wght" 700;
    font-size: var(--fs-5);
}

.cart-sc .main-wrapper .empty-subtitle {
    text-align: center;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    font-size: var(--fs-2-5);
    color: var(--c-grey);
}

.cart-sc .main-wrapper .links {
    display: flex;
    justify-content: center;
    gap: 38px;
    padding: 20px 0;
}

.cart-sc .main-wrapper .links .link {
    font-weight: 400;
    font-variation-settings: "wght" 400;
    color: var(--c-blue);
    font-size: var(--fs-3);
}

.cart-sc .items .item .wrapper {
    padding: 10px;
    background-color: var(--c-grey-light-7);
    border-radius: var(--br-3);
    display: flex;
    flex-shrink: 0;
}

.cart-sc .items .item .thumb {
    width: 64px;
    height: 64px;
    padding: 10px;
    border-radius: var(--br-2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.cart-sc .items .item .license-icon .badge {
    width: 60px;
    height: 60px;
    padding: 5px;
    margin: 2px 2px 0 0;
    justify-content: center;
    align-items: center;
    border-radius: var(--br-round);
    background-color: #fff;
    border: 2px solid #fff;
}

.cart-sc .items .item .license-icon .thumb,
.order-summary .item .license-icon .thumb {
    border-radius: var(--br-round);
}

.cart-sc .items .item .info {
    width: calc(100% - 64px);
    padding-right: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cart-sc .items .item .cart-link,
.order-summary .item a,
.user-top a {
    text-decoration: none;
    display: block;
    color: initial;
}

.cart-sc .items .item .title-details .title {
    font-size: var(--fs-3);
    white-space: nowrap;
    font-weight: 400;
    font-variation-settings: "wght" 400, "dots" 1;
    margin: 0;
    line-height: 1.5;
}

.cart-sc .items .item .price-remove {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.cart-sc .items .item .price-remove .remove-item {
    display: flex;
    align-items: center;
    border: none;
    outline: 0;
    background-color: #fff;
    padding: 2px 5px;
    border-radius: var(--br-1);
}

.cart-sc .items .item .price-remove .remove-item .icon {
    width: 17px;
    height: 17px;
    margin-left: 3px;
    opacity: 0.6;
}

.cart-sc .items .item .price-remove .remove-item .title {
    font-size: var(--fs-2-5);
    color: var(--c-grey);
    margin-top: 2px;
}

.afilliate-sign-up .rules .title,
.cart-sc .cart-total-sc .grand-total-mob .g-total .value,
.cart-sc .cart-total-sc .row .value,
.cart-sc .items .item .price-remove .price .value {
    font-size: var(--fs-4);
    font-variation-settings: "wght" 700;
}

.cart-sc .items .item .price-remove .price .currency {
    font-size: var(--fs-2);
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.cart-sc .main-wrapper .right-sc .divider {
    height: 1px;
    width: 100%;
    background-color: transparent;
    margin: 10px 0;
}

.cart-sc .discount-steps {
    padding: 10px 0;
    margin: 0 -15px;
}

.cart-sc .discount-steps .wrapper {
    padding: 30px;
    background-color: var(--c-grey-light-8);
}

.cart-sc .discount-steps .texts .title {
    font-variation-settings: "wght" 700;
    color: var(--c-red-3);
    font-size: var(--fs-5);
    padding-bottom: 5px;
}

.affiliate-top .wallet .balance .currency,
.cart-sc .discount-steps .texts .next-step {
    font-weight: 300;
    font-variation-settings: "wght" 300;
    font-size: var(--fs-3);
    color: var(--c-grey);
}

.cart-sc .discount-steps .texts .next-step span,
.order-summary .order-id .id {
    font-variation-settings: "wght" 700;
    color: var(--c-text-1);
}

.cart-sc .cart-total-sc .row .percentage,
.cart-sc .cart-total-sc .row .remove-this,
.cart-sc .discount-steps .step-title,
.order-summary .header {
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.cart-sc .discount-steps .steps {
    display: flex;
    padding-top: 20px;
    max-width: 320px;
    margin: 0 auto;
    justify-content: space-between;
}

.cart-sc .discount-steps .step {
    width: 18%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.cart-sc .discount-steps .step-title {
    text-align: center;
    font-size: var(--fs-3);
    color: var(--c-grey-dark-2);
    padding-bottom: 5px;
}

.cart-sc .discount-steps .step-col {
    width: 100%;
    min-height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--c-grey-light-5);
    border-radius: var(--br-2);
}

.cart-sc .discount-steps .step-value {
    font-size: var(--fs-3);
    color: var(--c-grey);
}

.cart-sc .discount-steps .step:first-child .step-col {
    height: 40px;
}

.cart-sc .discount-steps .step:nth-child(2) .step-col {
    height: 55px;
}

.cart-sc .discount-steps .step:nth-child(3) .step-col {
    height: 65px;
}

.cart-sc .discount-steps .step:nth-child(4) .step-col {
    height: 80px;
}

.cart-sc .discount-steps .step:nth-child(5) .step-col {
    height: 95px;
}

.cart-sc .discount-steps .step.active .step-title {
    font-variation-settings: "wght" 700;
    color: var(--c-red-3);
}

.cart-sc .discount-steps .step.active .step-col,
.cart-sc .discount-steps .step.active .step-col:hover {
    background-color: var(--c-red-3);
    box-shadow: 0 4px 8px -4px var(--c-red-3);
}

.cart-sc .discount-steps .step.active .step-value {
    color: var(--white);
}

.cart-sc .main-wrapper .left-sc {
    margin-top: 30px;
}

.cart-sc .cart-total-sc .wrapper {
    border: 1px solid var(--c-grey-light-5);
    border-radius: var(--br-3);
}

.cart-sc .cart-total-sc .details {
    padding: 15px 0;
    border-bottom: 1px dashed var(--c-grey-light-5);
}

.cart-sc .cart-total-sc .row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 15px;
}

.cart-sc .cart-total-sc .row .percentage {
    font-size: var(--fs-2);
    color: var(--white);
    background-color: var(--c-blue-3);
    padding: 2px 3px 1px;
    border-radius: var(--br-1);
}

.cart-sc .cart-total-sc .row .remove-this,
.cart-sc .payment-gateways label .bt {
    background-color: #fff;
    transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    cursor: pointer;
}

.cart-sc .cart-total-sc .row .remove-this {
    font-size: var(--fs-2);
    outline: 0;
    border: 1px solid var(--c-red-1);
    color: var(--c-red-2);
    padding: 2px 3px 1px;
    border-radius: var(--br-1);
}

.cart-sc .cart-total-sc .row .remove-this:hover {
    background-color: var(--c-red);
    border: 1px solid var(--c-red);
    color: #fff;
}

.cart-sc .cart-total-sc .grand-total-sc {
    padding: 20px 15px 17px;
    justify-content: center;
}

.cart-sc .cart-total-sc .g-total label {
    display: block;
    font-size: var(--fs-3);
}

.cart-sc .cart-total-sc .g-total .value {
    font-size: var(--fs-5);
    font-variation-settings: "wght" 900;
}

.pool-bedeh-pool-bedeh-bishtar {
    display: none;
    width: 100%;
    height: 3rem;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    position: relative;
    font-weight: 300;
    font-variation-settings: "wght" 300, "dots" 1;
    border-radius: var(--br-2);
    border: 1px solid transparent;
    color: var(--white);
    background-color: var(--c-red-3);
    cursor: pointer;
    transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.cart-sc .cart-total-sc .grand-total-mob {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 20;
    border-top: 1px solid var(--c-grey-light-5);
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: saturate(190%) blur(16px);
    backdrop-filter: saturate(190%) blur(16px);
}

.cart-sc .cart-total-sc .grand-total-mob .sc-wrapper {
    display: flex;
    padding: 10px;
}

.grand-total-mob .pool-bedeh-pool-bedeh-bishtar {
    width: 210px;
    height: 50px;
    display: inline-flex;
    box-shadow: 0 3px 6px -3px var(--c-red-3);
}

.temp-vpn-alert {
    padding: 10px;
    display: block;
    margin-top: 20px;
    margin-bottom: -5px;
    text-align: center;
    font-size: var(--fs-3);
    background-color: #d8e9fb;
    border: 1px solid var(--c-blue-2);
    border-radius: var(--br-2);
    color: #28323d;
}

.temp-vpn-alert-mob {
    text-align: center;
    font-size: var(--fs-3);
    display: block;
    padding: 10px;
    border-bottom: 1px dashed #d7d7d7;
}

.cart-sc .cart-total-sc .grand-total-mob .g-total {
    padding: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: calc(100% - 210px);
}

.cart-sc .cart-total-sc .grand-total-mob .g-total label {
    font-size: var(--fs-2-5);
    width: 100%;
    text-align: left;
}

.cart-sc .cart-total-sc .grand-total-mob .g-total .var {
    width: 100%;
    margin-top: 5px;
    text-align: left;
    height: 26px;
    overflow: hidden;
}

.cart-sc .cart-total-sc .grand-total-mob .g-total .currency {
    font-size: var(--fs-1);
}

.cart-sc .payment-gateways {
    margin-top: 20px;
    border-radius: var(--br-3);
    background-color: var(--c-grey-light-6);
    position: relative;
    padding: 16px 0;
}

.cart-sc .payment-gateways .options {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.cart-sc .form-coupon-wrap .tab-header,
.order-summary .header {
    justify-content: space-between;
}

.cart-sc .payment-gateways label input {
    visibility: hidden;
    position: absolute;
    z-index: -10;
}

.cart-sc .payment-gateways label .bt {
    width: 44px;
    height: 44px;
    padding: 2px;
    overflow: hidden;
    border-radius: var(--br-2);
    border: 2px solid #fff;
    box-shadow: var(--bs-grey-1);
}

.cart-sc .payment-gateways label .bt img {
    filter: grayscale(100%);
    transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.cart-sc .payment-gateways label .bt:hover img,
.cart-sc .payment-gateways label input:checked+.bt img {
    filter: grayscale(0);
}

.cart-sc .payment-gateways label input:checked+.bt {
    opacity: 1;
    border: 2px solid var(--c-blue-3);
    box-shadow: 0 2px 6px -4px var(--c-blue-3);
}

.cart-sc .form-coupon-wrap {
    border: 1px solid var(--c-grey-light-5);
    border-radius: var(--br-3);
    margin-top: 20px;
    padding: 15px;
}

.cart-sc .form-coupon-wrap .tab-header .tablink {
    font-weight: 400;
    font-variation-settings: "wght" 400;
    font-size: var(--fs-3);
    color: var(--c-grey);
    position: relative;
    margin-bottom: 2px;
    transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    cursor: pointer;
}

.cart-sc .form-coupon-wrap .tab-header .tablink::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-bottom: 0;
    margin-left: 5px;
    border-radius: var(--br-round);
    background-color: var(--c-grey-light-7);
    transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.cart-sc .form-coupon-wrap .tab-header .tablink:hover::before {
    background-color: var(--c-red-2);
}

.cart-sc .form-coupon-wrap .tab-header .tablink.active::before,
.notification.notification-warning .swal2-modal::after,
.sw-alert.sw-alert-warning .swal2-modal::before {
    background-color: var(--c-red-3);
}

.cart-sc .form-coupon-wrap .alert-sc {
    display: none;
    padding-top: 10px;
}

.cart-sc .form-coupon-wrap .alert {
    font-size: var(--fs-3);
    padding: 10px;
    border: 1px solid var(--c-grey-light-5);
    background-color: var(--c-grey-light-5);
    border-radius: var(--br-2);
    display: flex;
    align-items: center;
}

.cart-sc .form-coupon-wrap .alert .icon {
    width: 22px;
    height: 22px;
    margin-left: 5px;
    flex-shrink: 0;
    display: none;
}

.cart-sc .form-coupon-wrap .alert.green {
    background-color: rgb(76 175 80 / 30%);
    border-color: #8bc34a;
}

.cart-sc .form-coupon-wrap .alert.green .icon {
    background: url(../img/icons/emoji/party.png) 50% 50% no-repeat;
}

.cart-sc .form-coupon-wrap .alert.red {
    background-color: rgb(251 86 91 / 30%);
    border-color: #efa3a5;
}

.cart-sc .form-coupon-wrap .alert.red .icon {
    background: url(../img/icons/emoji/sad.png) 50% 50% no-repeat;
}

.cart-sc .form-coupon-wrap .alert.blue {
    background-color: rgb(33 150 243 / 30%);
    border-color: #2196f3;
}

.cart-sc .form-coupon-wrap .alert.blue .icon {
    background: url(../img/icons/emoji/left.png) 50% 50% no-repeat;
}

.cart-sc .form-coupon-wrap .tabcontent {
    display: none;
    padding-top: 15px;
}

.cart-sc .form-coupon-wrap .tabcontent input {
    width: 100%;
    height: 48px;
    padding: 0 15px 0 90px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    vertical-align: top;
    position: relative;
    border-radius: var(--br-2);
    border: none;
    color: var(--c-text-1);
    background-color: var(--c-grey-light-7);
    transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    outline: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.cart-sc .form-coupon-wrap .tabcontent .submit-form {
    width: 80px;
    left: 6px;
    height: 38px;
    top: 5px;
    position: absolute;
    border: none;
    outline: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-color: #fff;
    border-radius: var(--br-1);
    font-size: var(--fs-3);
    color: var(--c-blue-3);
    box-shadow: 0 1px 0 var(--c-grey-light-5);
}

.affiliate-top .main>.start,
.afilliate-sign-up .box,
.order-summary .box,
.tab-afilliate .afilliate-hero .wrapper,
.user-top .main {
    padding: 15px;
    background-color: var(--c-grey-light-8);
    border-radius: var(--br-3);
}

.cart-sc .form-coupon-wrap .tabcontent .remove-btn {
    width: 80px;
    left: 6px;
    height: 38px;
    top: 5px;
    position: absolute;
    border: none;
    outline: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-color: #fff;
    border-radius: var(--br-1);
    font-size: var(--fs-3);
    color: var(--c-red-3);
    box-shadow: 0 1px 0 var(--c-grey-light-5);
    transition: all 250ms ease-in-out;
}

.cart-sc .form-coupon-wrap .tabcontent .remove-btn:hover {
    background-color: var(--c-red-3);
    color: #fff;
}

.order-summary .header {
    display: flex;
    font-size: var(--fs-2-5);
    color: var(--c-grey);
}

.order-summary .main {
    text-align: center;
    padding: 40px 0;
}

.order-summary .main .icon {
    width: 86px;
    height: 86px;
    margin: 30px auto;
}

.order-summary .main .message {
    font-size: var(--fs-4);
    font-variation-settings: "wght" 900;
    margin: 0;
}

.order-summary .main .sub-text {
    font-size: var(--fs-3);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    margin: 10px 0;
    color: var(--c-grey);
}

.user-top .row .verify,
.user-top .sign-out {
    font-size: var(--fs-2-5);
    font-variation-settings: "wght" 300;
    font-weight: 300;
}

.order-summary .item {
    margin: -5px -5px 20px;
    border-radius: var(--br-2);
    border: 1px solid var(--c-grey-light-7);
}

.order-summary .item .wrapper {
    padding: 12px;
    background-color: var(--white);
    border-radius: var(--br-2);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.order-summary .item .start {
    display: flex;
    width: 100%;
}

.order-summary .item .end {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.order-summary .item .end .loading-alert-download .wrapper {
    display: flex;
    flex-direction: row;
    padding: 0;
    gap: 3px;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.order-summary .item .thumb {
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: var(--br-2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.order-summary .item .title-details {
    width: calc(100% - 48px);
    overflow: hidden;
    padding: 3px 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.order-summary .item .title-details .title {
    height: 20px;
    margin: 0;
    overflow: hidden;
    font-size: var(--fs-3);
    font-variation-settings: "wght" 700;
    line-height: 1.5;
}

.order-summary .item .title-details .details {
    height: 17px;
    font-size: var(--fs-2);
    overflow: hidden;
    color: var(--c-grey);
    line-height: 1.5;
}

.order-summary .item .font-dl-bt {
    width: 48px;
    height: 48px;
    background-color: var(--c-grey-dark-5);
    border-radius: var(--br-2);
    display: flex;
    justify-content: center;
    align-items: center;
}

.order-summary .item .font-dl-bt .icon {
    width: 20px;
    height: 20px;
}

.order-summary .item .badge {
    position: absolute;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--br-round);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.affiliate-top,
.user-dash-links,
.user-top {
    padding-top: 40px;
}

.user-top .avatar {
    position: relative;
    display: flex;
}

.user-top .profile-photo {
    width: 90px;
    height: 90px;
    padding: 5px;
    border: 2px solid var(--c-grey-light-5);
    border-radius: var(--br-round);
    overflow: hidden;
    background-color: var(--white);
}

.user-top .profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
}

.user-top .sign-out {
    position: absolute;
    width: 52px;
    height: 24px;
    margin: auto;
    left: 0;
    right: 0;
    bottom: -10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--br-round);
    color: #fff;
    background-color: var(--c-red-3);
}

.user-top .details {
    width: calc(100% - 90px);
    overflow: hidden;
    padding: 5px 10px 5px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: var(--fs-3);
}

.user-top .row {
    display: flex;
    white-space: nowrap;
    align-items: center;
}

.user-top .row .verifed {
    margin-right: 5px;
}

.user-top .row .verify {
    margin-right: 5px;
    color: var(--white);
    border: none;
    background-color: var(--c-blue-3);
    border-radius: var(--br-1);
    cursor: pointer;
}

.user-top .actions {
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
}

.user-top .profile-act {
    width: 150px;
    height: 44px;
    font-size: var(--fs-3);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    border-radius: var(--br-1);
    border: 1px solid var(--c-grey-light-5);
}

.user-tabs .tabs-header {
    margin-top: 40px;
    position: relative;
}

.tabs.user-tabs .tabs-header .tablink {
    transition: color 0.26s cubic-bezier(0.25, 0.1, 0.25, 1);
    font-variation-settings: "wght" 300, "dots" 1;
}

.tab-letter .box .form-buttons,
.user-tabs .tabs-content .tab-wrapper {
    padding-top: 20px;
}

.user-tabs .fonts-empty {
    background-color: var(--c-grey-light-8);
    border-radius: var(--br-3);
    padding: 50px 20px;
    text-align: center;
}

.user-tabs .fonts-empty .illu {
    margin: 0 auto;
    width: 160px;
}

.user-tabs .fonts-empty .text {
    padding: 10px 0;
    font-size: var(--fs-5);
    font-variation-settings: "wght" 900;
}

.user-tabs .fonts-empty .sub-text {
    font-size: var(--fs-3);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    color: var(--c-grey);
}

.user-tabs .fonts-empty .links {
    padding: 15px 0 0;
    display: flex;
    justify-content: space-between;
    max-width: 305px;
    margin: 0 auto;
}

.user-tabs .fonts-empty .link {
    font-size: var(--fs-3);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    color: var(--c-blue-3);
}

.loading-alert-download .wrapper,
.orders-list .item .more {
    color: var(--c-grey);
    font-size: var(--fs-2-5);
    font-weight: 300;
    display: flex;
}

.orders-list .item {
    padding: 10px;
    background-color: var(--c-grey-light-7);
    border-radius: var(--br-3);
    margin-bottom: 50px;
}

.orders-list .item a {
    display: block;
    text-decoration: none;
    color: initial;
}

.orders-list .item .thumb {
    width: 72px;
    height: 72px;
    margin: -30px auto 0;
    padding: 10px;
    border-radius: var(--br-2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px -2px #ffcf47;
}

.orders-list .item .info {
    padding: 15px 0;
    text-align: center;
}

.orders-list .item .more {
    padding: 10px 0;
    justify-content: center;
    gap: 20px;
    font-variation-settings: "wght" 300;
}

.orders-list .item .top .actions {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.orders-list .item .top .actions .btn {
    width: 260px;
    height: 48px;
    border-radius: var(--br-2);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    position: relative;
}

.orders-list .item .top .actions .dl-btn {
    background-color: var(--c-text-1);
    color: var(--white);
    box-shadow: 0 2px 4px -2px var(--c-text-1);
}

.loading-alert-download .wrapper {
    gap: 8px;
    align-items: center;
}

.loading-alert-download .loading-icon {
    width: 24px;
    max-width: 24px;
}

.orders-list .item .dl-btn .icon {
    position: absolute;
    opacity: 0.4;
    right: 15px;
}

.orders-list .item .up-btn {
    font-size: var(--fs-3);
    border: 1px solid var(--c-grey-light-5);
}

.orders-list .item .up-btn .title {
    margin-left: 10px;
    color: var(--c-red-3);
    font-size: var(--fs-2-5);
}

.orders-list .item .up-btn .currency {
    font-size: var(--fs-2);
    color: var(--c-grey);
}

.orders-list .item .font-licenses {
    padding-top: 20px;
    margin-top: 30px;
    border-top: 1px solid var(--c-grey-light-4);
}

.orders-list .item .font-licenses .sc-title {
    font-size: var(--fs-2-5);
    display: flex;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    justify-content: space-between;
    padding-bottom: 15px;
}

.orders-list .item .licenses-list {
    margin: 0 -25px;
    overflow: auto;
    display: flex;
}

.orders-list .item .license {
    padding: 10px;
    width: 300px;
    width: calc(100vw - 50px);
    margin-left: 15px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--br-2);
    background-color: var(--white);
    border: 1px solid var(--c-grey-light-5);
    display: flex;
    flex-wrap: wrap;
}

.orders-list .item .licenses-list:has(:nth-child(4)) .license {
    width: calc(100vw - 80px);
}

.orders-list .item .licenses-list .license:first-child {
    margin-right: 25px;
}

.orders-list .item .licenses-list .license:only-child {
    width: calc(100% - 50px);
}

.orders-list .item .license .start {
    display: flex;
    width: 100%;
    order: 1;
}

.orders-list .item .license .badge {
    width: 72px;
    height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--br-round);
    background-color: var(--c-grey-light-8);
}

.orders-list .item .license .l-info,
.orders-list .item .license-details {
    width: calc(100% - 72px);
    text-align: right;
    font-size: var(--fs-2-5);
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.orders-list .item .license .l-info {
    padding: 3px 10px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.orders-list .item .license .type {
    font-variation-settings: "wght" 700;
    margin-bottom: 7px;
}

.orders-list .item .license-details .row,
.orders-list .item .owner .row {
    margin-bottom: 7px;
}

.orders-list .item .owner .value {
    color: var(--c-blue-3);
    font-weight: 400;
    font-variation-settings: "wght" 400;
    display: inline-block;
    text-decoration: underline;
}

.orders-list .item .license-details {
    order: 3;
    padding-right: 10px;
}

.orders-list .item .license-details .row .value {
    color: var(--c-text-1);
    font-weight: 400;
    font-variation-settings: "wght" 400;
}

.orders-list .item .license .actions {
    order: 2;
    width: 72px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.orders-list .item .license .actions .btn {
    width: 72px;
    height: 24px;
    background-color: var(--c-grey-light-5);
    border-radius: var(--br-1);
    font-size: var(--fs-2);
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    outline: 0;
    cursor: pointer;
}

.orders-list .item .license-desk-act .btn {
    height: 50px;
    width: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--c-grey-light-5);
    border-radius: var(--br-2);
    background-color: var(--white);
    font-size: var(--fs-3);
    box-shadow: 0 2px 4px -2px rgb(27 27 29 / 5%);
    cursor: pointer;
}

.orders-list .item .license-desk-act .add-btn .icon {
    margin-left: 10px;
}

.standard-table .table-wrapper {
    overflow: auto;
    margin: 0 -15px;
    padding: 10px 15px 20px;
}

.standard-table table {
    border-collapse: collapse;
    width: 100%;
    border-radius: var(--br-4);
    overflow: hidden;
    outline: 1px solid var(--c-grey-light-5);
    border: 1px solid transparent;
}

.standard-table td,
.standard-table th {
    border: 1px solid var(--c-grey-light-5);
    font-size: var(--fs-3);
    text-align: center;
    padding: 8px 12px;
    white-space: nowrap;
    color: var(--c-grey-dark-4);
}

.standard-table th {
    font-weight: 500;
    font-variation-settings: "wght" 500;
    background-color: var(--c-grey-light-8);
    font-size: var(--fs-3);
    color: var(--c-grey);
}

.standard-table .currency {
    font-size: var(--fs-2);
    color: var(--c-grey);
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.standard-table.invoices-table .details {
    font-size: var(--fs-2-5);
    color: var(--c-grey);
}

.standard-table.invoices-table td.action {
    white-space: nowrap;
    width: 1%;
}

.standard-table.invoices-table .c-btn.invoice-req {
    text-decoration: underline;
    cursor: pointer;
}

.standard-table.invoices-table .c-btn.pending {
    background-color: var(--c-grey-light-6);
    padding: 3px 5px 5px;
    border-radius: var(--br-round);
    color: var(--c-grey);
}

.standard-table.invoices-table .c-btn.denied {
    background-color: var(--c-red-1);
    padding: 3px 10px 5px;
    border-radius: var(--br-round);
}

.standard-table.invoices-table .req-agine {
    text-decoration: underline;
    margin-right: 5px;
    cursor: pointer;
    display: inline-flex;
    gap: 4px;
}

.standard-table.invoices-table .c-btn.download a {
    color: var(--c-red-3);
    font-size: var(--fs-3);
}

.standard-table.gift-table .used .value {
    font-variation-settings: "wght" 700;
    color: var(--c-blue-3);
}

.standard-table.gift-table .remain .value {
    font-variation-settings: "wght" 700;
    color: var(--green);
}

.tab-afilliate .afilliate-hero .afli-sign-up-link,
.tab-gifts .create-gift-card a,
.tab-letter .box .form-buttons .submit-bt {
    background-color: var(--c-red-3);
    color: var(--white);
    box-shadow: 0 2px 4px -2px var(--c-red-3);
}

.tab-afilliate .afilliate-hero .afli-sign-up-link,
.tab-gifts .create-gift-card a {
    text-decoration: none;
    width: 100%;
    height: 3rem;
    border-radius: var(--br-2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    position: relative;
}

.tab-affiSetting .box,
.tab-letter .box {
    padding: 30px 15px;
    background-color: var(--c-grey-light-8);
    border-radius: var(--br-3);
}

.tab-letter .form-control .input-wrapper.custom-check span {
    font-size: var(--fs-3);
    padding-right: 10px;
}

.tab-affiSetting .box .container,
.tab-letter .form-control .input-wrapper.custom-check {
    margin-bottom: 30px;
}

.tab-afilliate .afilliate-hero .start {
    text-align: center;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    margin-bottom: 20px;
    font-size: var(--fs-3);
}

.standard-modal .modal__container {
    max-width: min(86%, 500px);
    max-height: 90vh;
    border-radius: var(--br-4);
    padding: 0;
}

.standard-modal .modal-header {
    padding: 20px 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.standard-modal .modal-header-title {
    font-size: var(--fs-3);
    color: var(--c-grey);
    padding-bottom: 3px;
}

.standard-modal .modal-content-wrapper {
    padding: 20px;
}

.standard-modal .modal-close-bt {
    width: 24px;
    height: 24px;
    background: url(../img/icons/x-dark-2.svg) 50% 50% no-repeat;
    opacity: 0.5;
    cursor: pointer;
}

.m-license-script .modal__container {
    max-width: min(86%, 860px);
}

.m-license-script .modal-content-wrapper {
    font-size: var(--fs-3);
    line-height: 1.6;
    color: var(--c-grey-dark-4);
}

.m-license-script .codearea {
    width: 100%;
    border: none;
    padding: 10px 0;
    background-color: var(--c-text-1);
    color: #fff;
    border-radius: var(--br-2);
    text-align: left;
}

.m-license-script .codearea::selection {
    background-color: var(--c-red-2);
}

.m-license-script .sub-text {
    font-size: var(--fs-2-5);
    color: var(--gray);
}

.m-invoice-req .modal-content-wrapper,
.m-license-edit .modal-content-wrapper {
    padding-top: 0;
}

.m-license-edit .badge {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--c-grey-light-8);
    border-radius: var(--br-round);
    padding: 15px;
}

.m-license-edit .font-license-type {
    text-align: center;
    font-size: var(--fs-3);
    font-variation-settings: "wght" 700;
    padding: 10px 0;
}

.m-license-edit .sub-text {
    font-size: var(--fs-2-5);
    color: var(--c-red-3);
}

.m-designer-contacts .modal-content-wrapper {
    width: 420px;
}

.m-designer-contacts .profile-photo {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 999px;
    overflow: hidden;
    padding: 5px;
    background-color: var(--c-grey-light-6);
}

.m-designer-contacts .profile-photo img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 999px;
}

.m-designer-contacts .name {
    text-align: center;
    font-variation-settings: "wght" 700;
    padding: 10px 0;
}

.m-designer-contacts .links {
    padding: 15px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.m-designer-contacts .links .link {
    text-decoration: none;
    color: var(--c-text-1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    border: 1px solid var(--c-grey-light-5);
    border-radius: 999px;
    font-size: var(--fs-3);
}

.m-designer-contacts .links .icon {
    margin-left: 12px;
}

.standard-modal.m-invoice-req .modal-header {
    padding-bottom: 8px;
    padding-top: 12px;
}

.m-invoice-req .l-wrapper .toggle {
    width: 50%;
    height: 48px;
    position: absolute;
    top: 0;
    background-color: var(--c-grey-light-7);
}

.m-invoice-req .first-form .l-wrapper .toggle {
    right: 0;
    border-radius: 0 var(--br-2) var(--br-2) 0;
}

.m-invoice-req .second-form .l-wrapper .toggle {
    left: 0;
    border-radius: var(--br-2) 0 0 var(--br-2);
}

.m-invoice-req .l-wrapper .switch {
    width: calc(100% - 12px);
    height: 40px;
    background-color: var(--c-grey-light-7);
    border-radius: var(--br-1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--fs-3);
    font-weight: 400;
    font-variation-settings: "wght" 400;
}

.m-invoice-req .first-form .l-wrapper .switch {
    margin: 4px 4px auto auto;
}

.m-invoice-req .second-form .l-wrapper .switch {
    margin: 4px auto auto 4px;
}

.m-invoice-req .l-wrapper .inputs-container .wrapper {
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

.m-invoice-req .l-wrapper .sub-text {
    font-size: var(--fs-2-5);
    color: var(--c-red-2);
}

.m-invoice-req .inv-radio:checked~label .toggle .switch {
    box-shadow: 0 3px 8px rgb(0 0 0 / 15%), 0 3px 1px rgb(0 0 0 / 6%);
    background-color: #fff;
    color: var(--c-blue-3);
}

.m-invoice-req .inv-radio:checked~label .inputs-container .wrapper {
    visibility: visible;
    opacity: 1;
    height: 100%;
    padding-top: 65px;
}

.profile-edit .box {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 25px;
    border-radius: var(--br-3);
    background-color: var(--c-grey-light-8);
}

.profile-edit .avatar {
    width: 96px;
    height: 96px;
    margin: 0 auto 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--br-round);
    border: 2px solid var(--c-grey-light-5);
    background-color: var(--c-white);
}

.profile-edit .avatar .media-container {
    width: 84px;
    height: 84px;
    overflow: hidden;
    border-radius: var(--br-round);
}

.profile-edit .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-edit .avatar .file-select {
    width: 84px;
    height: 28px;
    margin: 0;
    position: absolute;
    bottom: -15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--fs-2-5);
    background-color: var(--white);
    border-radius: var(--br-1);
    border: 1px solid var(--c-grey-light-5);
    cursor: pointer;
}

.create-gift-card {
    padding: 3px 0;
}

.create-gift-card .box {
    width: 100%;
    max-width: 820px;
    margin: 80px auto 0;
    padding: 25px;
    border-radius: var(--br-3);
    background-color: var(--c-grey-light-8);
}

.create-gift-card .top {
    margin-top: -80px;
    padding: 0 20px 40px;
}

.create-gift-card .card {
    position: relative;
    max-width: 460px;
    margin: 0 auto;
    display: flex;
}

.create-gift-card .gift-amount {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 30px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
}

.create-gift-card .gift-amount .value {
    font-size: 64px;
    font-variation-settings: "wght" 900;
    color: var(--white);
}

.create-gift-card .card-image {
    border-radius: var(--br-5);
    overflow: hidden;
    box-shadow: 0 40px 50px -20px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.05), 0 8px 24px -8px rgba(0, 0, 0, 0.15);
}

.create-gift-card .inputs {
    display: flex;
    justify-content: space-between;
    max-width: 460px;
    margin: 0 auto;
}

.create-gift-card .inputs .input-wrapper:first-child {
    width: calc(75% - 20px);
}

.create-gift-card .inputs .input-wrapper:nth-child(2) {
    width: 25%;
}

.create-gift-card .gift-card-desc {
    max-width: 460px;
    margin: 0 auto;
}

.create-gift-card .gift-card-desc p {
    font-weight: 300;
    font-variation-settings: "wght" 300;
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: var(--fs-3);
}

.create-gift-card .form-buttons {
    max-width: 460px;
    margin: 0 auto;
    padding: 10px 0;
}

.order-summary .gift-card-table {
    max-width: 560px;
    margin: 0 auto;
}

.order-summary .gift-card-table table td {
    background-color: var(--white);
}

.copy-btn {
    border: none;
    outline: 0;
    background-color: transparent;
    margin: 0 auto;
    cursor: pointer;
}

.afilliate-sign-up .introduction .title {
    font-size: var(--fs-5);
    text-align: center;
    font-variation-settings: "wght" 700;
}

.afilliate-sign-up .introduction .desc,
.afilliate-sign-up .rules li {
    font-size: var(--fs-3);
    padding-top: 15px;
    line-height: 1.8;
}

.afilliate-sign-up .afilliate-links .sc-title,
.tab-affiSetting .box .sc-title {
    padding: 20px 0;
    font-variation-settings: "wght" 700;
    font-size: var(--fs-3);
}

.afilliate-sign-up .afilliate-links .form-buttons label,
.promo-code .lead .title {
    font-size: var(--fs-2-5);
}

.affiliate-top .reports .cell .title,
.affiliate-top .reports .cell .value span.currency,
.affiliate-top .wallet .title {
    font-size: var(--fs-3);
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.affiliate-top .main .start .sc-title .title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}

.affiliate-top .date-filter .input-wrapper {
    width: 180px;
    margin: 10px auto;
}

.affiliate-top .date-filter .input-wrapper.select-wrapper::after {
    top: 17px;
}

.affiliate-top .reports {
    padding: 25px 0 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.affiliate-top .reports .cell {
    background-color: var(--c-grey-light-6);
    padding: 15px;
    border-radius: var(--br-2);
    width: 100%;
}

.affiliate-top .reports .cell:first-child,
.affiliate-top .reports .cell:nth-child(2) {
    width: calc(50% - 8px);
}

.affiliate-top .reports .cell .title {
    margin-bottom: 10px;
    color: var(--c-grey);
}

.affiliate-top .reports .cell .value {
    font-variation-settings: "wght" 700;
    font-size: var(--fs-7);
}

.affiliate-top .wallet {
    padding: 15px;
    border-radius: var(--br-3);
    background-color: var(--c-grey-dark-5);
    background-image: url(../img/circle-pattern.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.affiliate-top .wallet .title {
    text-align: center;
    color: var(--c-grey-light-3);
}

.affiliate-top .wallet .balance {
    text-align: center;
    padding: 30px 0 0;
    color: var(--white);
}

.affiliate-top .wallet .balance .value {
    font-size: var(--fs-9);
    font-variation-settings: "wght" 700;
}

.affi-links-table td.link {
    text-align: left;
}

.user-dash-links .wrapper {
    height: 58px;
    padding: 4px;
    margin: 0 auto;
    max-width: 340px;
    background-color: var(--c-grey-light-7);
    border-radius: var(--br-round);
    display: flex;
}

.user-dash-links .link {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--c-grey-dark-2);
    border-radius: var(--br-round);
    font-weight: 300;
    font-variation-settings: "wght" 300;
}

.user-dash-links .link.active {
    color: var(--c-blue-3);
    background-color: var(--white);
    border: solid 1px var(--c-grey-dark-4);
}

.notification .swal2-modal,
.sw-alert .swal2-modal {
    border-radius: var(--br-2) !important;
    overflow: hidden;
}

.notification .swal2-modal {
    background-color: var(--c-grey-dark-5) !important;
    box-shadow: 0 6px 16px -10px var(--c-grey-dark-5) !important;
    color: #fff;
    font-size: var(--fs-2-5);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    padding: 16px 16px 19px;
    position: relative;
}

.notification .swal2-modal::before {
    content: "";
    width: 28px;
    height: 28px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 10px;
    background-position: center;
    background-size: contain;
}

.notification .swal2-modal::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.5);
    animation: 4s ease-out both progressBar;
}

@keyframes progressBar {
    0% {
        width: 100%;
    }

    100% {
        width: 0;
    }
}

.notification .swal2-modal .swal2-html-container {
    margin: 0;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    position: relative;
}

.notification.notification-success .swal2-modal::before {
    background-image: url(../img/icons/gifs/success.gif);
}

.notification.notification-success .swal2-modal::after,
.sw-alert.sw-alert-success .swal2-modal::before {
    background-color: #08c18a;
}

.notification.notification-warning .swal2-modal::before {
    background-image: url(../img/icons/gifs/warning.gif);
}

.notification.notification-info .swal2-modal::before {
    background-image: url(../img/icons/gifs/info.gif);
}

.notification.notification-info .swal2-modal::after {
    background-color: var(--c-grey-light-3);
}

.sw-alert.swal2-container {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
    width: 100%;
    z-index: 0;
}

.sw-alert .swal2-modal {
    background-color: var(--c-grey-light-7) !important;
    box-shadow: none !important;
    color: var(--c-text-1);
    font-size: var(--fs-3);
    padding: 15px 20px 15px 30px;
    position: relative;
    width: 100%;
}

.sw-alert .swal2-modal::before {
    content: "";
    position: absolute;
    margin: auto;
    right: 8px;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: var(--br-round);
    background-color: var(--c-grey-light-4);
    height: calc(100% - 26px);
}

.sw-alert .swal2-modal .swal2-html-container {
    margin: 0;
    font-weight: 300;
    font-variation-settings: "wght" 300;
    position: relative;
    direction: rtl;
    text-align: right;
}

.sw-alert .swal2-modal .swal2-close {
    outline: 0 !important;
    width: 30px;
    height: 30px;
    margin: auto;
    top: 0;
    bottom: 0;
    position: absolute;
    left: 10px;
    line-height: 30px;
    -webkit-appearance: none;
    appearance: none;
}

.sw-alert .swal2-modal .swal2-close:focus {
    outline: 0 !important;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
}

.sw-loader .swal2-modal {
    background-color: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: saturate(170%) blur(4px);
    backdrop-filter: saturate(170%) blur(4px);
    box-shadow: none !important;
    border-radius: var(--br-4) !important;
    padding: 10px;
    overflow: hidden;
    position: relative;
    width: auto;
    height: auto;
}

.contact-page .contact-form,
.contact-page .end,
.contact-page .main-wrapper .content {
    background-color: var(--c-grey-light-8);
    border-radius: var(--br-3);
}

.sw-loader .swal2-modal .swal2-html-container {
    margin: 0;
    width: 42px;
    height: 42px;
}

.contact-page .main-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.contact-page .main-wrapper .content {
    padding: 15px;
    font-size: var(--fs-3);
    line-height: 1.6;
}

.contact-page .main-wrapper .content ul {
    padding: 0;
    list-style: none;
    margin: 0;
}

.contact-page .contact-form {
    padding: 20px 15px;
    margin-top: 30px;
}

.contact-page .form-title {
    font-size: var(--fs-4);
    margin: 0;
    padding: 0 0 20px;
    color: var(--c-grey-dark-5);
    font-variation-settings: "wght" 700;
}

.contact-page .end {
    padding: 15px;
    margin-top: 30px;
}

.p-page .blog-post-header .page-container {
    background: var(--c-grey-light-7);
    background: linear-gradient(0deg, var(--white) 0, var(--c-grey-light-7));
    padding-top: 80px;
}

.p-page .blog-post-header .head {
    min-height: auto;
    padding: 20px 15px;
}

.p-page .blog-post-content {
    border-top: none;
    padding-top: 5px;
}

.p-page .blog-post-content .main-wrapper {
    padding: 0 15px;
}

.promo-code {
    padding-top: 12px;
}

.promo-code .main-wrapper {
    border: 1px solid hsl(210deg 4.61% 86.79%);
    background-color: hsl(0deg 0% 100%);
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.promo-code .lead .sub {
    display: block;
    margin-bottom: 2px;
}

.promo-code .lead .discount-amount i {
    font-style: normal;
    font-weight: 700;
    font-variation-settings: "wght" 700, "dots" 1;
}

.promo-code .trail .code {
    width: fit-content;
    margin: 0 auto;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    border-radius: 8px;
    background-color: var(--c-grey-light-5);
}

.promo-code .trail .discount-code {
    font-size: 18px;
    font-weight: 500;
    font-variation-settings: "wght" 500;
    padding: 0 5px;
}

.promo-code .trail .copy-code {
    border: none;
    outline: 0;
    background-color: #fff;
    padding: 4px 8px;
    font-size: var(--fs-2);
    font-weight: 300;
    border-radius: 4px;
    box-shadow: 0 1px 3px -1px rgb(0 0 0 / 35%);
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.promo-code .trail .date {
    font-size: var(--fs-2-5);
    display: flex;
    gap: 6px;
    justify-content: center;
    padding-top: 10px;
}

.cart-update-alert {
    padding: 0.72rem;
    background-color: rgb(226 240 255);
    margin-bottom: 1rem;
    font-size: var(--fs-3);
    border-radius: var(--br-2);
    border: 1px solid hsl(210deg 83.03% 73.09%);
    display: block;
    width: 100%;
}

.new-login .page-content {
    background-color: var(--c-bg-light);
}

.new-login .content-box {
    padding: 64px 0 120px;
}

.new-login .page-width {
    padding: 0 18px;
}

.new-login .login-box {
    background-color: #fff;
    border: 1px solid var(--c-gray-20);
    border-radius: 24px;
    margin: 16px auto;
    max-width: var(--new-login-width);
}

.new-login .tab-header-main {
    padding: 24px;
    margin: 16px 0;
}

.new-login .tabs-header>.wrapper {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    padding: 4px;
    margin: 0;
    border-radius: 10px;
    background-color: var(--c-shade-10);
}

.new-login .tabs-header .tablink {
    width: calc(50% - 8px);
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: var(--c-text-disabled);
    transition: 0.3s;
}

.new-login .tabs-header .tablink.active {
    background-color: #fff;
    color: var(--c-text-secondary);
}

.new-login .tabs-content .top {
    padding: 0 24px 36px;
}

.inp-wrapper {
    margin-top: 16px;
    margin-bottom: 16px;
    width: 100%;
}

.inp-input {
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-box-align: center;
    align-items: center;
    display: inline-flex;
    justify-content: flex-start;
    vertical-align: middle;
    position: relative;
    outline: 0;
    overflow: hidden;
    overflow-wrap: break-word;
    cursor: auto;
    width: 100%;
    font-size: inherit;
    font-style: normal;
    font-family: inherit;
    text-decoration: none;
    font-weight: 400;
    height: 48px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-color: var(--c-shade-25);
    border-radius: 10px;
    color: var(--c-text);
    background-color: #fff;
    transition: 0.3s;
}

.inp-input:hover {
    border-color: var(--c-shade-60);
}

.inp-input:focus {
    border-color: var(--c-shade-90);
    background-color: #fff;
}

.inp-input:is(:-webkit-autofill, :autofill) {
    border-color: var(--c-shade-90);
    background-color: #fff;
}

.inp-input:read-only {
    background-color: var(--c-gray-5) !important;
}

.inp-input:read-only:hover {
    background-color: var(--c-gray-5) !important;
    border-color: var(--c-shade-25) !important;
}

.inp-input:read-only:focus {
    background-color: var(--c-gray-5) !important;
    border-color: var(--c-shade-25) !important;
}

.inp-label {
    font-size: 15px;
    color: var(--c-text-tertiary);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.inp-message {
    min-height: 28px;
    padding-top: 4px;
    font-size: 12px;
}

.new-login .login-form .inp-wrapper {
    margin-top: 6px;
    margin-bottom: 6px;
}

.new-login .login-form .inp-label {
    position: absolute;
    padding: 0 3px;
    height: 18px;
    margin: auto;
    top: 0;
    right: 12px;
    bottom: 0;
    background-color: transparent;
    transition: 0.3s;
    pointer-events: none;
    z-index: 2;
}

.new-login .login-form .inp-input:-webkit-autofill+.inp-label,
.new-login .login-form .inp-input:-webkit-autofill:focus+.inp-label,
.new-login .login-form .inp-input:-webkit-autofill:hover+.inp-label,
.new-login .login-form .inp-input:autofill+.inp-label,
.new-login .login-form .inp-input:autofill:focus+.inp-label,
.new-login .login-form .inp-input:autofill:hover+.inp-label,
.new-login .login-form .inp-input:focus+.inp-label,
.new-login .login-form .inp-input:not(:placeholder-shown)+.inp-label {
    top: -50px;
    font-size: 11px;
    color: var(--c-text-tertiary);
    font-weight: 300;
}

.new-login .login-form .inp-input:-webkit-autofill+.inp-label::before,
.new-login .login-form .inp-input:-webkit-autofill:focus+.inp-label::before,
.new-login .login-form .inp-input:-webkit-autofill:hover+.inp-label::before,
.new-login .login-form .inp-input:autofill+.inp-label::before,
.new-login .login-form .inp-input:autofill:focus+.inp-label::before,
.new-login .login-form .inp-input:autofill:hover+.inp-label::before,
.new-login .login-form .inp-input:focus+.inp-label::before,
.new-login .login-form .inp-input:not(:placeholder-shown)+.inp-label::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: #fff;
    z-index: -1;
    filter: blur(1.5px);
}

.new-login .login-btns-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.new-login .login-btns-wrapper .forgot-password-link {
    font-size: 15px;
    color: var(--c-text-secondary);
    text-decoration: none;
    padding: 0 4px;
    transition: 0.3s;
}

.new-login .login-btns-wrapper .forgot-password-link:hover {
    color: #08f;
}

.new-login .login-btns-wrapper .submit-bt {
    width: 180px;
    height: 48px;
    padding: 8px 12px;
    border: none;
    outline: 0;
    background-color: var(--c-gray-90);
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
    cursor: pointer;
}

.new-login .signup-btns-wrapper .submit-bt {
    width: 100%;
}

.new-login .login-btns-wrapper .submit-bt .text {
    transition: 0.3s;
}

.new-login .login-btns-wrapper .submit-bt .icon {
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    padding: 4px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 9px;
    transform: rotate(180deg);
    transition: 0.3s;
    background-color: hsla(0, 0%, 100%, 0);
    border-radius: 5px;
    opacity: 0;
    display: none;
}

.new-login .login-btns-wrapper .submit-bt::before {
    content: "";
    position: absolute;
    top: 0;
    right: -200%;
    width: 180%;
    height: 100%;
    transform: skewX(-20deg);
    background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.25), transparent);
}

.new-login .login-btns-wrapper .submit-bt.active {
    cursor: pointer;
    background-color: var(--c-gray-97);
}

.new-login .login-btns-wrapper .submit-bt.active .icon {
    display: flex;
    opacity: 0.8;
}

.new-login .login-btns-wrapper .submit-bt.active::before {
    animation: 1.5s shine;
}

.new-login .submit-bt[disabled] {
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.new-login .social-login-box {
    padding: 36px 24px 26px;
    border-top: 1px dashed var(--c-gray-20);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.new-login .social-login-box .social-login-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 8px;
    height: 48px;
    padding: 8px 12px;
    margin: 0;
    outline: 0;
    background-color: var(--c-shade-3);
    border: 1px solid transparent;
    border-color: var(--c-shade-20);
    color: var(--c-text-tertiary);
    font-size: 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
}

.new-login .social-login-box .social-login-btn:hover,
.otp-form-visible .request-again-link:hover {
    background-color: var(--c-shade-10);
    border-color: var(--c-shade-25);
    color: var(--c-text);
}

.new-login .login-footer {
    padding: 48px 0 24px;
}

.new-login .login-footer .message {
    max-width: 320px;
    margin: 0 auto;
    display: block;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--c-text-tertiary);
    text-align: center;
}

.new-login .login-footer .message a {
    color: var(--c-blue);
    text-decoration: underline;
    font-weight: 400;
    transition: 0.3s;
}

.new-login .signup-btns-wrapper .submit-bt.active::before {
    animation: 2.2s shine;
}

.new-login .signup-message-new {
    max-width: 280px;
    margin: 20px auto 0;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--c-text-disabled);
    text-align: center;
}

.new-login .signup-message-new .terms-link {
    color: var(--c-text-secondary);
    text-decoration: underline;
}

.new-login .inp-control.verified::after {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 12px;
    background-image: url(../img/icons/verified-blue.svg);
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
}

.new-login .inp-input.verified {
    padding-left: 42px;
}

.new-login .inp-control.password-toggle .inp-input {
    padding-left: 42px !important;
}

.new-login .inp-control .password-toggle-trigger {
    position: absolute;
    width: 32px;
    height: 32px;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 9px;
    cursor: pointer;
    border-radius: 6px;
    background-image: url(../img/icons/eye-close.svg);
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
    transition: background-color 0.3s;
}

.new-login .inp-control .password-toggle-trigger:hover {
    background-color: var(--c-gray-5);
}

.new-login .inp-control .password-toggle-trigger.visible {
    background-image: url(../img/icons/eye-open.svg);
}

.new-login .alerts-container {
    max-width: var(--new-login-width);
    margin: 0 auto;
}

.new-login .box-head {
    display: block;
    margin-bottom: 24px;
}

.new-login .box-head>.wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
}

.new-login .box-head .back-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    padding: 8px;
    margin: 0;
    border-radius: 10px;
    background-color: var(--c-shade-10);
    outline: 0;
    border: none;
    cursor: pointer;
    transition: 0.3s;
}

.new-login .box-head .back-btn img,
.otp-form-visible .request-again-link .icon {
    opacity: 0.9;
}

.new-login .box-head .back-btn:hover {
    background-color: var(--c-shade-15);
}

.new-login .box-head .icon {
    width: 46px;
    height: 46px;
    opacity: 0.8;
}

.new-login.otp-form-visible .request-again-box {
    padding: 0 24px 26px;
}

.new-login.otp-form-visible #verification-box .request-again-box {
    padding: 0;
}

.new-login.otp-form-visible .request-again-box.phone-request-again-box {
    padding: 0;
}

.new-login.otp-form-visible .request-again-box>.wrapper {
    border: 1px dashed var(--c-gray-25);
    border-radius: 12px;
    position: relative;
}

.new-login.otp-form-visible .request-again-box .title {
    font-size: 14px;
    color: var(--c-text-tertiary) !important;
    display: block;
    position: absolute;
    margin: auto;
    right: 0;
    left: 0;
    top: -14px;
    background-color: var(--c-white);
    padding: 4px;
    width: fit-content;
}

.new-login.otp-form-visible .request-again-box .count-down {
    font-weight: 500;
    color: var(--c-text);
}

.otp-form-visible .request-again-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
}

.otp-form-visible .request-again-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 8px;
    height: 48px;
    padding: 8px 12px;
    margin: 0;
    outline: 0;
    background-color: var(--c-shade-3);
    border: 1px solid transparent;
    border-color: var(--c-shade-20);
    color: var(--c-text-tertiary);
    font-size: 14px;
    border-radius: 8px;
    cursor: default;
    pointer-events: none;
    transition: 0.3s;
    text-decoration: none;
    opacity: 0.6;
}

.otp-form-visible .request-again-link.active {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
}

.new-login.otp-form-visible .otp-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 2px 24px;
}

.new-login.otp-form-visible .otp-message .message {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}

.new-login.otp-form-visible .otp-message .message .text {
    font-weight: 400;
    color: var(--c-text-tertiary);
}

.new-login.otp-form-visible .otp-message .message .receiver {
    font-weight: 700;
    color: var(--c-text);
}

.new-login.otp-form-visible .otp-message .edit-btn {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 4px 8px;
    background-color: var(--c-shade-5);
    border: 1px solid var(--c-shade-30);
    border-radius: 7px;
    cursor: pointer;
    transition: 0.3s;
}

.new-login.otp-form-visible .otp-message .edit-btn:hover {
    background-color: var(--c-shade-10);
    border-color: var(--c-shade-30);
}

.new-login.otp-form-visible .otp-message .edit-btn .text {
    font-size: 14px;
    font-weight: 400;
    color: var(--c-text-secondary);
}

.new-login.otp-form-visible .otp-message .edit-btn .icon {
    width: 17px;
    height: 17px;
    margin-bottom: 1px;
}

.new-login.otp-form-visible .otp-form {
    padding-bottom: 24px;
}

.new-login.otp-form-visible .verify-code-inputs {
    display: flex;
    gap: 16px;
    flex-direction: row-reverse;
}

.new-login.otp-form-visible .verify-code-inputs>input {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
}

.new-login.otp-form-visible .otp-form-buttons {
    margin-top: 24px;
}

.new-login .alerts-container .sw-alert .swal2-modal {
    background-color: #fff !important;
    border: 1px solid var(--c-shade-30);
    border-radius: 20px !important;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1) !important;
    padding: 20px;
}

.new-login .alerts-container .sw-alert.sw-alert-warning .swal2-modal {
    border: 1px solid #ffb5bc;
    background-color: #fff4f5 !important;
}

.lb-nav a.lb-next,
.lb-nav a.lb-prev {
    opacity: 1 !important;
    width: 32px !important;
    height: 32px !important;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: var(--br-round);
}

.new-login .sw-alert .swal2-modal .swal2-close {
    color: var(--c-gray-65);
}

.new-login .alerts-container .sw-alert.sw-alert-warning .swal2-close,
.new-login .sw-alert .swal2-modal .swal2-close:hover {
    color: var(--c-gray-85);
}

.new-login .alerts-container .sw-alert.sw-alert-warning .swal2-close:hover {
    color: var(--c-gray-95);
}

.new-login .sw-alert .swal2-modal .swal2-html-container {
    font-size: 16px;
    padding-left: 24px;
}

.new-login .sw-alert .swal2-modal .swal2-html-container a {
    color: #2196F3;
}

.new-login .login-box.reset-box .main .top {
    padding: 24px;
}

.new-login .reset-box .box-head {
    margin-bottom: -12px;
}

.new-login .top-header {
    margin-bottom: 24px;
}

.new-login .top-header .title {
    font-size: 22px;
    font-weight: 600;
    color: var(--c-text);
}

.new-login .login-box.reset-box .bot {
    padding: 24px;
    border-top: 1px dashed var(--c-gray-20);
}

.new-login .login-box.reset-box .bot .link {
    font-size: 15px;
}

.new-login .otp-login-box {
    max-width: var(--new-login-width) !important;
}

.new-login .login-box .box-title {
    margin-bottom: 24px;
}

.new-login .login-box .box-title>.title {
    font-size: 18px;
    font-weight: 600;
    color: var(--c-text);
}

.request-again-link .method-timer {
    display: block;
    font-size: 13px;
    background-color: #ffffff;
    padding-top: 3px;
    border-radius: 999px;
    border: 1px solid var(--c-shade-50);
    width: 52px;
    text-align: center;
}

.request-again-link.active .method-timer {
    display: none !important;
}

.new-login .complete-profile {}

.new-login .complete-profile>.inner {
    padding: 24px;
}

.new-login .complete-profile .box-header {
    text-align: center;
}

.new-login .complete-profile .box-header .title {}

.new-login .complete-profile .user-info {
    margin: 24px 0;
    background-color: var(--c-gray-10);
    border-radius: 12px;
    padding: 24px 12px;
}

.new-login .complete-profile .user-avatar {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 999px;
    overflow: hidden;
    padding: 8px;
    background-color: #fff;
}

.new-login .complete-profile .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
}

.new-login .complete-profile .user-name {
    text-align: center;
    margin: 16px 0;
}

.new-login .complete-profile .user-email {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 4px;
    text-align: center;
    font-size: var(--fs-3);
    color: var(--c-text-tertiary);
}

.new-login .complete-profile .user-email .verified {
    width: 16px;
    margin-bottom: 3px;
}

.new-login .complete-profile .form-group {}

.new-login .complete-profile .form-group label {}

.new-login .complete-profile .form-group input {}

.new-login.otp-form-visible .complete-profile .box-header {
    display: none;
}

.new-login.otp-form-visible .complete-profile .user-info {
    display: none;
}

.new-login.otp-form-visible .complete-profile>.inner {
    padding: 48px 24px 24px 24px;
}

.phone-change-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.phone-change-modal .modal-content {
    background: white;
    padding: 28px;
    border-radius: 24px;
    border: 1px solid var(--c-gray-20);
    width: 90%;
    max-width: 398px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: modalFadeIn 0.3s ease-out;
}

.phone-change-modal .close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--c-text-tertiary);
    width: 34px;
    height: 34px;
    line-height: 36px;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.phone-change-modal .close-modal:hover {
    color: var(--c-text-secondarys);
    background: #f0f0f0;
}

.phone-change-modal .modal-header {
    margin: 48px 4px 36px 4px;
}

.phone-change-modal .modal-header>h3 {
    margin: 0;
    color: var(--c-text);
    font-size: 20px;
    font-weight: 600;
}

.phone-change-body {}

.phone-change-modal .help-text {
    text-align: center;
    margin-top: 16px;
}

.phone-change-modal .help-text .text-item {
    font-size: 14px;
    font-weight: 600;

}

.phone-change-modal .help-text .sub-text {
    font-size: 12px;
    color: var(--c-text-tertiary);
    font-weight: 300;
}

.new-login .captcha-wrapper {}

.new-login .captcha-img-wrapper {
    margin-bottom: 10px;
    background-color: var(--c-gray-15);
    padding: 6px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.new-login .captcha-img-wrapper .captcha-img {
    margin-bottom: 0;
}

.new-login .captcha-wrapper .refresh-btn {
    width: 36px;
    height: 36px;
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 8px;
    border-radius: 8px;
}

.new-login .captcha-wrapper .refresh-btn:hover {
    background-color: #fff;
}

.new-login .captcha-wrapper .refresh-btn svg {
    max-width: 100%;
    max-height: 100%;
}

.font-inuse {}

.font-p .font-inuse-carousel {
    padding: 34px 0 34px 0px;
    border-top: 1px solid var(--c-gray-30);
    margin-top: 48px;
}

.font-p .font-inuse-carousel .page-width {

    padding: 0;
}

.font-inuse-carousel .inuse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 0 16px;
}

.font-inuse-carousel .inuse-header .lead {
    display: flex;
    align-items: center;
    gap: 6px;
}

.font-inuse-carousel .inuse-header .lead .icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.font-inuse-carousel .inuse-header .lead .icon img {
    max-width: 100%;
    max-height: 100%;
}

.font-inuse-carousel .inuse-header .title {
    font-size: 20px;
    font-variation-settings: "wght" 700, "dots" 1;
    font-weight: 700;
    color: var(--c-text);
}

.font-inuse-carousel .inuse-header .trail {}

.font-inuse-carousel .inuse-header .trail .view-more {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.font-inuse-carousel .inuse-header .trail .value {
    font-size: var(--fs-3);
    font-weight: 300;
    font-variation-settings: "wght" 300, "dots" 1;
    color: var(--c-grey);
    transition: all 0.2s ease;
}

.font-inuse-carousel .inuse-header .trail .value:hover {
    color: var(--c-text);
}

.font-inuse-carousel .inuse-header .trail .icon {
    display: none;
}

.inuse-carousel {
    overflow: hidden;
}

.inuse-carousel .swiper-wrapper {}

.inuse-carousel .swiper-slide {
    /* margin: 0 8px; */
    margin-right: 16px;
}

.inuse-carousel .inuse-item {
    width: auto;
    border: 1px solid var(--c-gray-30);
    border-radius: 16px;
    padding: 10px;
    transition: all 0.2s ease;
}

.inuse-item {}

.inuse-item>.wrapper {
    display: grid;
    width: fit-content;
}

.inuse-item .thumbnail {
    width: fit-content;
    position: relative;
    overflow: hidden;
}

.inuse-carousel .inuse-item .thumbnail {
    height: calc(100vw - 3rem);
    max-height: 380px;
    border-radius: 10px;
}

.inuse-item .thumbnail img {
    height: 100%;
    max-width: 100%;
}

.inuse-item .info {
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.font-p .inuse-item .fonts {
    display: none;
}

.inuse-item .fonts {
    background-color: var(--c-grey-light-6);
    border-radius: 10px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    overflow: hidden;
    /* display: none; */
}

.inuse-item .font {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--c-text);
    flex-shrink: 0;
}

.inuse-item .font .thumb {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
}

.inuse-item .font .thumb img {
    max-width: 100%;
    max-height: 100%;
}

.inuse-item .font .more {}

.inuse-item .font .more .title {
    font-size: var(--fs-3);
    font-variation-settings: "wght" 400;
    font-weight: 400;
    color: var(--c-text);
}

.inuse-item .details {
    padding: 0 2px;
}

.inuse-item .details>.title {
    font-size: var(--fs-4);
    font-variation-settings: "wght" 300;
    font-weight: 300;
    color: var(--c-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inuse-item .details .designers {
    display: flex;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 4px;
}

.inuse-item .details .designer {
    font-size: var(--fs-2-5);
    font-weight: 600;
    font-variation-settings: "wght" 600, "dots" 1;
    text-decoration: none;
    color: var(--c-text-secondary);
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.inuse-item .details .designer:hover {
    color: var(--c-red);
}

/* .inuse-item .details .designer:nth-child(n+1)::after {
    color: var(--c-text-secondary);
    content: ',';
    position: absolute;
    right: -6px;
} */

.inuse-modal {}

.inuse-modal .modal__overlay {
    align-items: flex-end;
    backdrop-filter: blur(8px);
}

.inuse-modal .modal_close_bt {
    position: absolute;
    top: 20px;
    right: 16px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px 8px 16px;
    background-color: #00000063;
    color: #bfbfbf;
    font-weight: 300;
    border-radius: 999px;
    transition: all 0.2s ease;
}

.inuse-modal .modal_close_bt svg {
    opacity: 0.6;
}

.inuse-modal .modal__container {
    height: calc(100vh - 80px);
    padding: 0;
    background-color: transparent;
    border-radius: 28px 28px 0 0;
    padding: 16px;
    padding-bottom: 0;
    overflow: hidden !important;
    background-color: #fff;
    position: relative;
    max-width: 100%;
}

.inuse-modal .modal-wrapper {
    padding-bottom: 42px;
    width: 100%;
    height: 100%;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    overflow-y: scroll;

}

.inuse-modal .modal-content {}

.inuse-modal .modal-section {}

.inuse-modal .cover-photo {}

.inuse-modal .cover-photo .image-wrapper {
    border-radius: 16px;
    overflow: hidden;
}

.inuse-modal .cover-photo .image-wrapper img {
    max-height: 100%;
    width: 100%;
    object-fit: cover;
}

.inuse-modal .info {
    padding: 24px 0;
}

.inuse-modal .info .details {
    padding: 12px;
    border-radius: 16px 16px 0 0;
    background-color: var(--c-grey-light-7);
}

.inuse-modal .info .details .title {
    font-size: var(--fs-4);
    font-variation-settings: "wght" 300;
    font-weight: 300;
    color: var(--c-text-tertiary);
    line-height: 1.4;
}

.inuse-modal .info .designers {
    display: flex;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 8px;
}

.inuse-modal .info .designer {
    font-size: var(--fs-3);
    font-weight: 500;
    font-variation-settings: "wght" 500, "dots" 1;
    text-decoration: none;
    color: var(--c-text-secondary);
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
}

.inuse-modal .info .details .designer:hover {
    color: var(--c-red);
}

/* .inuse-modal .info .designer:nth-child(n+1)::after {
    color: var(--c-text-secondary);
    content: ',';
    position: absolute;
    right: -4px;
} */

.inuse-modal .info .details .tags {
    display: none;
}

.inuse-modal .info .details .tag {}

.inuse-modal .fonts {
    padding: 12px;
    /* padding-top: 0; */
    border-radius: 0 0 16px 16px;
    background-color: var(--c-grey-light-7);
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: scroll;
    border-top: 1px solid var(--c-gray-30);
}

.inuse-modal .fonts .font {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--c-text);
    flex-shrink: 0;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.inuse-modal .font-thumb {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inuse-modal .font-thumb img {
    max-width: 28px;
    max-height: 28px;
}

.inuse-modal .font-details {
    padding: 0 8px 0 16px;
    min-width: 120px;
    display: flex;
    flex-direction: column;
}

.inuse-modal .font-title {
    font-size: var(--fs-3);
    font-weight: 600;
    font-variation-settings: "wght" 600, "dots" 1;
}

.inuse-modal .font-price {
    /* display: none; */
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: var(--c-text-tertiary);
}

.inuse-modal .font-price .font-value {
    font-size: var(--fs-3);
    font-weight: 400;
    font-variation-settings: "wght" 400, "dots" 2;
    -moz-font-feature-settings: "ss02";
    -webkit-font-feature-settings: "ss02";
    font-feature-settings: "ss02";
}

.inuse-modal .font-price .font-currency {
    font-size: var(--fs-2);
    font-weight: 300;
    font-variation-settings: "wght" 300, "dots" 1;
}

.inuse-modal .font-details .font-tags {
    display: none;
}

.inuse-modal .modal-section.description {
    font-size: var(--fs-3);
    font-weight: 400;
    font-variation-settings: "wght" 400;
    color: var(--c-text-secondary);
    line-height: 1.5;
}
.inuse-modal .modal-section.description img {
    max-width: 100% !important;
}
.inuse-modal .footer-close-modal {
    margin-top: 64px;
    width: 100%;
    height: 48px;
    background-color: var(--c-grey-light-7);
    border: 1px solid var(--c-gray-30);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--c-text-secondary);
    cursor: pointer;
}

.inuse-page {
    overflow: hidden;
}

.inuse-page .page-header {
    padding-top: 40px;
    padding-bottom: 24px;
    background: var(--c-grey-light-7);
    background: linear-gradient(0deg, var(--white) 0, var(--c-grey-light-7));
}

.inuse-page .page-header .page-title {
    font-weight: 700;
    font-variation-settings: "wght" 700, "dots" 1;
    font-size: var(--fs-5);
}

.inuse-page .page-header .page-description {
    font-size: var(--fs-3);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    color: var(--c-text-tertiary);
}

.inuse-page .page-header .page-description p {
    margin: 0;
}

.inuse-page .page-content {
    padding-top: 0;
    padding-bottom: 120px;
}

.inuse-page .inuse-stream {
    display: flex;
    gap: 24px;
    flex-direction: column;
    padding-bottom: 36px;
}

.inuse-page .inuse-item {
    position: relative;
}

.inuse-page .inuse-item>.wrapper {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    background-color: var(--c-grey-light-7);
    /* border: 1px solid var(--c-gray-30); */
}

.inuse-page .inuse-item .thumbnail {
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.inuse-page .inuse-item .thumbnail img {
    max-height: 100%;
    max-width: 100%;
}

.inuse-page .inuse-item .info {
    /* gap: 12px; */
}

.inuse-page .inuse-item .details>.title {
    font-size: var(--fs-3);
}

.inuse-page .inuse-item .fonts {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}

.inuse-page .inuse-item .font {
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
    gap: 0;
}

.inuse-page .inuse-item .font .thumb {
    border-radius: 0;
    width: 36px;
    height: 36px;
    padding: 10px;
}

.inuse-page .inuse-item .font .more {
    padding: 0 8px 0 10px;
}

.inuse-page .loading-more {
    display: flex;
    justify-content: center;
}

/* xxxxxx */
article.single-page {
    font-size: 16px;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes slideIn {
    from {
        top: -140px;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        top: -140px;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

@-webkit-keyframes rubberBand {

    0%,
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }
}

@keyframes rubberBand {

    0%,
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

.modal__container {
    background-color: #fff;
    padding: 30px;
    max-width: 500px;
    max-height: 100vh;
    border-radius: 4px;
    overflow-y: auto;
}

@keyframes mmfadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes mmfadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes mmslideIn {
    from {
        transform: translateY(15%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes mmslideOut {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-10%);
    }
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
    animation: 0.3s cubic-bezier(0, 0, 0.2, 1) mmfadeIn;
}

.micromodal-slide[aria-hidden="false"] .modal__container {
    animation: 0.3s cubic-bezier(0, 0, 0.2, 1) mmslideIn;
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
    animation: 0.3s cubic-bezier(0, 0, 0.2, 1) mmfadeOut;
}

.micromodal-slide[aria-hidden="true"] .modal__container {
    animation: 0.3s cubic-bezier(0, 0, 0.2, 1) mmslideOut;
}

.lb-nav a.lb-next {
    background: url(../img/icons/chevron-left-black.svg) 50% 50% no-repeat;
    background-color: #ffffff59;
    position: absolute;
    left: 10px !important;
    right: unset !important;
}

.lb-nav a.lb-prev {
    background: url(../img/icons/chevron-left-black.svg) 50% 50% no-repeat;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    background-color: #ffffff59;
    position: absolute;
    right: 10px !important;
    left: unset !important;
}

.sr-only,
hr {
    border: 0;
    height: 1px;
    padding: 0;
}

hr {
    display: block;
    border-top: 1px solid #ccc;
    margin: 1em 0;
}

.sr-only {
    clip: rect(0, 0, 0, 0);
    margin: -1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.sr-only.focusable:active,
.sr-only.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix::after,
.clearfix::before {
    content: " ";
    display: table;
}

.clearfix::after {
    clear: both;
}

@media only screen and (min-width: 320px) {
    header .icon-wrapper {
        padding: 14px 10px;
    }

    header .header-container {
        padding: 0;
    }
}

@media only screen and (min-width: 379px) {
    .i-card .thumb .icon-container {
        padding: 20px;
    }

    .i-card .oneliner {
        height: 50px;
    }

    .card .thumb {
        width: 106px;
        height: 106px;
        padding: 18px;
    }

    .card .details {
        padding: 10px;
        width: calc(100% - 106px);
    }

    .select-license-modal .op-label .option {
        padding: 10px 10px 10px 40px;
        transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .select-license-modal .license-option-wrapper {
        margin-bottom: 10px;
    }

    .select-license-modal .license-option-wrapper .licence-desc-toggle {
        left: 10px;
        top: 11px;
    }

    .select-license-modal .options {
        max-height: 375px;
    }
}

@media only screen and (min-width: 480px) {
    header .icon-wrapper {
        padding: 14px;
    }

    header .cart .cart-counter {
        right: 8px;
    }

    .i-card .oneliner {
        height: 60px;
    }

    .fp-header .specs {
        justify-content: center;
    }

    .font-card .oneliner,
    .fontpage-tabs .tabs-content .font-specs .spec {
        justify-content: flex-start;
    }

    .fontpage-tabs .tabs-content .font-specs .spec .title {
        width: 160px;
    }

    .fontpage-tabs .tabs-content .font-specs .spec .value {
        text-align: right;
    }

    .recommended-sc .recommended-fonts-carusel {
        margin: 0;
    }

    .recommended-sc .card {
        width: 360px;
        margin-left: 20px;
        margin-right: 0;
    }

    .recommended-sc .sc-title .swiper-buttons {
        display: flex;
    }

    .grand-total-mob .pool-bedeh-pool-bedeh-bishtar {
        width: 340px;
    }

    .cart-sc .cart-total-sc .grand-total-mob .g-total {
        width: calc(100% - 340px);
    }

    .user-top .profile-act {
        width: 200px;
    }

    .user-top .profile-act .icon {
        display: block;
        position: absolute;
        right: 15px;
    }

    .user-top .profile-act span {
        padding-right: 10px;
    }
}

@media only screen and (min-width: 560px) {
    .p-index .licenses .item {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
    }

    .p-index .licenses .license-badge {
        flex-shrink: 0;
        margin: 0;
        width: 148px;
        height: 148px;
    }

    .p-index .licenses .license-details {
        padding: 10px 15px 10px 0;
        width: calc(100% - 148px);
    }

    .p-index .licenses .license-details .summary {
        margin-bottom: 0;
    }

    .p-index .licenses .bottom {
        justify-content: flex-start;
    }

    .p-index .licenses .licenses-pagination {
        bottom: 10px;
    }

    .posts-stream .list-view {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .posts-stream .card-post {
        width: calc(50% - 10px);
        margin-bottom: 30px;
    }

    .order-summary .item .wrapper {
        flex-direction: row;
        gap: 4px;
        padding: 24px;
    }

    .order-summary .item .end {
        position: relative;
    }

    .order-summary .item .end .loading-alert-download {
        position: absolute;
        bottom: -24px;
        left: 0;
        width: 210px;
        background-color: transparent;
    }

    .order-summary .item .end .loading-alert-download .wrapper {
        background-color: transparent;
    }
}

@media only screen and (min-width: 768px) {

    .font-lab-sc .fl-results>.wrapper,
    .font-p-designers .designer .footer {
        border-top: 1px solid var(--c-grey-light-5);
    }

    .font-p-designers .designer .main,
    .support-faq .support {
        display: flex;
    }

    .support-faq .profile {
        border-bottom: none;
        border-left: 1px solid var(--c-grey-light-6);
    }

    .support-faq .profile:first-child {
        border-radius: 0 var(--br-2) var(--br-2) 0;
    }

    .support-faq .profile:last-child {
        border-radius: var(--br-2) 0 0 var(--br-2);
    }

    .cards-wrapper {
        gap: 20px 16px;
    }

    .cards-wrapper .card.small,
    .font-card {
        width: calc(50% - 8px);
    }

    .cards-wrapper .card.small:nth-child(9),
    .font-lab-sc .fl-results.long.open>.wrapper::before {
        display: none;
    }

    .footer .top {
        display: block;
    }

    .footer .main .box {
        padding-top: 10px;
    }

    .footer .main .contact {
        max-width: 480px;
        margin: 0 auto;
    }

    .font-lab-sc .fl-results>.wrapper {
        display: flex;
        flex-wrap: wrap;
        position: relative;
    }

    .font-lab-sc .fl-results .result {
        flex-shrink: 0;
        flex-grow: 1;
    }

    .font-lab-sc .fl-results.long .fl-view-more {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -30px;
        position: relative;
        transition: 0.3s;
    }

    .font-lab-sc .fl-results.long .fl-view-more-btn {
        display: block;
        padding: 0;
        margin: 0;
        outline: 0;
        cursor: pointer;
        width: 200px;
        height: 48px;
        color: var(--c-text-1);
        background-color: #fff;
        border-radius: var(--br-2);
        border: 1px solid var(--c-grey-light-4);
        box-shadow: var(--bs-grey-2);
        font-size: 16px;
        font-weight: 500;
        transition: 0.3s;
    }

    .font-lab-sc .fl-results.long .fl-view-more-btn:hover {
        border: 1px solid var(--c-grey-light-3);
        background-color: var(--c-grey-light-8);
        box-shadow: none;
    }

    .font-lab-sc .fl-results.long .wrapper {
        max-height: calc(164px * 3);
        overflow: hidden;
        transition: 0.3s;
    }

    .font-lab-sc .fl-results.long .wrapper::before {
        content: '';
        position: absolute;
        margin: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 164px;
        background: linear-gradient(to bottom, rgb(255 255 255 / 20%), #fff);
    }

    .font-lab-sc .fl-results.long.open .wrapper {
        max-height: 100%;
    }

    .font-lab-sc .fl-results.long.open .fl-view-more {
        opacity: 0;
        pointer-events: none;
        height: 0;
        margin-top: 0;
    }

    .font-lab-sc .fl-results.long.open .fl-view-more-btn {
        opacity: 0;
        pointer-events: none;
        height: 0;
    }

    .main-font-desc .section.before-carusel .sc-title {
        margin-bottom: 1.5rem;
        font-size: var(--fs-5);
        text-align: right;
    }

    .main-font-desc .section.after-carusel,
    .main-font-desc .section.before-carusel {
        font-size: var(--fs-4);
        line-height: 1.8;
    }

    .font-p-designers .designer {
        max-width: 720px;
        margin: 0 auto;
    }

    .font-p-designers .designer .media-container {
        width: 96px;
        height: 96px;
    }

    .font-p-designers .designer .right {
        padding: 20px 20px 20px 10px;
        flex-shrink: 0;
    }

    .font-p-designers .designer .left {
        width: calc(100% - 126px);
    }

    .font-p-designers .designer .role span {
        position: relative;
        margin: 10px auto;
        left: auto;
        right: auto;
        border-radius: var(--br-round);
    }

    .font-p-designers .designer .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 40px 15px 15px 20px;
    }

    .affiliate-top .date-filter .input-wrapper,
    .font-p-designers .designer .name,
    .license-view .font-icon {
        margin: 0;
    }

    .font-p-designers .designer .social-links {
        margin: 0;
        padding: 0;
    }

    .font-p-designers .designer .social {
        width: 28px;
        padding: 4px;
        margin: 0 5px;
    }

    .font-p-designers .designer .about {
        border-bottom: none;
    }

    .font-p-designers .designer .about .wrapper {
        padding-bottom: 0;
        color: var(--c-grey-dark-5);
        padding-top: 0;
    }

    .font-p-designers .designer .fonts {
        display: flex;
        padding: 15px;
    }

    .affiliate-top .main,
    .font-p-designers .designer .footer .wrapper {
        display: flex;
        justify-content: space-between;
    }

    .font-p-designers .designer .fonts .font-icon {
        width: 42px;
        height: 42px;
        padding: 10px;
        border-radius: var(--br-round);
        overflow: hidden;
        border: 2px solid #fff;
        margin-left: -10px;
        transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .font-p-designers .designer .fonts .font-icon img {
        max-width: 100%;
        max-height: 100%;
    }

    .font-p-designers .designer .fonts .font-icon:hover {
        transform: scale(1.1);
    }

    .font-p-designers .designer .view-more {
        color: var(--c-grey);
    }

    .font-p-designers .designer .view-more:hover {
        color: var(--red);
    }

    .posts-stream .list-view {
        gap: 15px;
    }

    .posts-stream .card-post {
        width: calc(33.3% - 10px);
        margin-bottom: 30px;
    }

    .posts-stream .card-post .headline {
        font-size: var(--fs-3);
    }

    .blog-post-header .head .hero {
        display: block;
        width: 100%;
        padding-top: 33.33%;
        position: relative;
    }

    .blog-post-header .head .hero .wrapper {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: var(--c-grey-light-3);
        overflow: hidden;
        border-radius: var(--br-1);
    }

    .blog-post-header .head .hero img {
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
    }

    .blog-post-header .page-container {
        background-size: 100% 400px;
        padding-top: 50px;
    }

    .blog-post-header .page-container::before {
        height: 400px;
        backdrop-filter: blur(16px);
    }

    .blog-post-header .head {
        border-radius: var(--br-3) var(--br-3) 0 0;
    }

    .blog-post-header .headline {
        margin: 15px 0;
    }

    .blog-post-content .related-posts .post-stream {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
    }

    .blog-post-content .related-posts .post-card {
        width: calc(50% - 15px);
    }

    .affiliate-top .main .start .sc-title .title,
    .license-view .details-wrapper {
        display: flex;
        align-items: center;
    }

    .license-view .details {
        padding-right: 15px;
    }

    .license-view .top {
        text-align: right;
        margin-bottom: 10px;
    }

    .license-view .top .dash,
    .license-view .top span {
        display: inline-block;
    }

    .license-view .bot {
        border: none;
        padding: 0;
        margin: 0;
        display: block;
    }

    .affiliate-top .main>.end,
    .license-view .top .font-name a {
        padding: 0;
    }

    .license-view .bot .for {
        font-weight: 300;
        font-variation-settings: "wght" 300;
    }

    .license-view .bot .license-holder {
        width: auto;
        padding-left: 10px;
    }

    .license-view .bot .website-address {
        width: auto;
        padding: 0;
    }

    .fonts-list .content-stream {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .font-card .oneliner {
        justify-content: center;
    }

    .designers-list .designer {
        width: calc(33.33% - 11px);
        margin-bottom: 20px;
    }

    .affiliate-top .main>.start {
        width: calc(100% - 300px);
    }

    .affiliate-top .main>.end {
        width: 280px;
    }

    .affiliate-top .main .start .sc-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .affiliate-top .main .start .sc-title .title .icon {
        margin-left: 5px;
    }

    .affiliate-top .reports {
        gap: 0;
    }

    .affiliate-top .reports .cell {
        width: 33.33% !important;
        padding: 20px;
        background-color: transparent;
        border-left: 1px solid var(--c-grey-light-5);
    }

    .affiliate-top .reports .cell:last-child {
        border: none;
    }

    .footer .footer-bar-wrapper {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
    }

    .footer .bottom-bar .lang {
        padding-bottom: 0;
    }

    .npo .license .license-inputs {
        flex-direction: row;
        gap: 16px;
    }

    .npo .license .license-inputs>* {
        flex: 1;
    }

    .inuse-page .inuse-stream {
        display: block;
        columns: 3 350px;
        column-gap: 24px;
    }

    .inuse-page .inuse-item {
        break-inside: avoid;
        margin-bottom: 36px;
    }

    .inuse-page .page-header {
        padding-top: 42px;
        padding-bottom: 36px;
    }

    .inuse-page .page-header .page-title {
        font-size: var(--fs-6);
    }


}

@media only screen and (min-width: 992px) {

    .main-nav,
    header {
        width: 100%;
    }

    header .cart .icon-wrapper:hover,
    header .desktop-user .profile-picture,
    header.sticky .search-toggle .icon-wrapper:hover {
        background-color: var(--c-grey-light-5);
    }

    .main-nav,
    .main-nav .drop-down,
    .order-summary .item .wrapper .end,
    .p-index .designers .index-designers-list,
    .purchase-options .main-container,
    .search-modal,
    header.sticky .header-container {
        position: relative;
    }

    :root {
        --header-height: 174px;
    }

    .hide-in-desktop {
        display: none !important;
    }

    .cards-wrapper .card.small:nth-child(9),
    .hide-in-mobile {
        display: initial;
    }

    body.disable-scroll {
        /* overflow: auto;
        height: initial; */
    }

    header {
        height: auto;
        margin: 0;
    }

    header .header-container {
        flex-wrap: wrap;
        max-width: 1220px;
        margin: 0 auto;
    }

    header .header-container .branding {
        order: 1;
        display: grid;
        align-items: center;
        padding-right: 16px;
        box-sizing: content-box;
        width: 228px;
    }

    header .header-container .branding a {
        width: 114px;
    }

    header .desktop-user .profile-picture img,
    header .desktop-user.login-signup .profile-picture {
        border-radius: var(--br-round);
        width: 30px;
        height: 30px;
    }

    header .header-container .start {
        order: 2;
    }

    header .header-container .end {
        order: 3;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        box-sizing: content-box;
        padding-left: 16px;
    }

    header .header-container .main-nav {
        order: 4;
    }

    header .header-container .desktop-top-bar {
        height: 100px;
        align-items: center;
        transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    header .cart .icon-wrapper,
    header .desktop-user {
        transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
        height: 46px;
    }

    header .desktop-user {
        width: 150px;
        padding: 0 8px;
        margin-right: 16px;
        display: flex;
        align-items: center;
        background-color: var(--c-grey-dark-6);
        border-radius: var(--br-2);
    }

    header .desktop-user .profile-picture {
        border-radius: var(--br-round);
        overflow: hidden;
    }

    header .desktop-user.login-signup .profile-picture {
        background-color: var(--c-grey-light-5);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 4px;
    }

    header .desktop-user.login-signup .profile-picture img {
        max-width: 100%;
        max-height: 100%;
        width: initial;
        height: initial;
    }

    header .desktop-user .user-name {
        max-width: 94px;
        flex-grow: 1;
        text-align: center;
        white-space: nowrap;
        font-size: var(--fs-3);
        font-weight: 400;
        font-variation-settings: "wght" 400, "dots" 1;
        color: var(--white);
        overflow: hidden;
    }

    header .cart .icon-wrapper {
        width: 46px;
        padding: 0;
        background-color: var(--c-grey-light-7);
        border-radius: var(--br-2);
    }

    header .cart .cart-counter {
        right: 4px;
        top: 6px;
    }

    header .cart .icon-wrapper img {
        margin: 2px 2px 0 0;
    }

    header .search-toggle .icon-wrapper {
        height: 46px;
        width: 420px;
        padding: 0 10px;
        position: relative;
        display: flex;
        justify-content: flex-end;
        background-color: var(--c-grey-light-7);
        border-radius: var(--br-2);
    }

    header .search-toggle .icon-wrapper::after {
        content: attr(data-placeholder);
        position: absolute;
        right: 10px;
        color: var(--c-grey);
        font-weight: 300;
        font-variation-settings: "wght" 300;
    }

    .search-modal .overlay {
        z-index: 150;
        height: var(--header-height);
        min-height: var(--header-height);
        bottom: auto;
        background-color: rgba(255, 255, 255, 0.5);
        -webkit-backdrop-filter: saturate(100%) blur(6px);
        backdrop-filter: saturate(100%) blur(6px);
    }

    .main-nav .menu-wrapper,
    header.sticky .search-modal .overlay {
        min-height: 74px;
        height: 74px;
    }

    .search-modal .modal-content {
        z-index: 150;
        position: absolute;
        width: 420px;
        height: auto;
        right: auto;
        margin-top: -46px;
        overflow: hidden;
        background-color: var(--white);
        border: 1px solid var(--c-grey-light-4);
        border-radius: var(--br-2);
        -webkit-animation-name: fadeIn;
        -webkit-animation-duration: 0.3s;
        animation-name: fadeIn;
        animation-duration: 0.3s;
        box-shadow: var(--bs-grey-5);
        box-shadow: rgb(0 0 0 / 5%) 0 10px 16px -6px, rgb(0 0 0 / 5%) 0 3px 6px -3px;
    }

    .search-modal .field-wrapper {
        height: 46px;
        border-radius: var(--br-2) var(--br-2) 0 0;
    }

    .search-modal .suggestions .title {
        margin: 8px 10px 0 0;
        font-weight: 300;
        font-variation-settings: "wght" 300;
        color: var(--c-grey-dark-2);
    }

    .search-modal .search-history .item:first-child {
        margin-right: 10px;
    }

    .p-index .designers .page-width,
    .search-modal .search-history {
        overflow: hidden;
    }

    .search-modal .search-field {
        font-weight: 500;
        font-variation-settings: "wght" 500;
        color: var(--c-text-1);
    }

    .search-modal .search-history .item {
        padding: 4px 10px;
        font-size: var(--fs-2);
        color: var(--c-grey-dark-4);
        border-color: var(--c-grey-light-7);
        background-color: var(--c-grey-light-7);
        border-radius: var(--br-round);
        box-shadow: none;
    }

    .search-modal .search-history .item:hover {
        color: var(--c-text-1);
        border-color: var(--c-grey-light-4);
        background-color: var(--c-grey-light-4);
    }

    .main-nav li,
    header.sticky .header-container .start,
    header.sticky .search-modal {
        position: initial;
    }

    .main-nav .menu-wrapper {
        width: 100%;
        position: relative;
        right: auto;
        left: auto;
        overflow: visible;
        display: flex;
        justify-content: center;
        background-color: none;
        background-color: #0000;
    }

    .main-nav .navbar {
        display: flex;
        margin: 0 auto;
        padding: 0;
        height: 100%;
        position: initial;
    }

    .main-nav .drop-down ul,
    .main-nav .mega-menu-wrapper {
        visibility: hidden;
        margin-left: auto;
        margin-right: auto;
        opacity: 0;
        left: 0;
    }

    .cart-sc .items .item .price-remove .remove-item .title,
    .contact-page .support-faq .form-title,
    .fonts-list .contnet-filters .close-modal-bt,
    .index-carousel .aspect-ratio::after,
    .index-f-cats .icon,
    .main-nav .main-item.has-child::after,
    .main-nav .nav-icon,
    .main-nav .nav-icon img,
    .main-nav .nav-link.back-bt,
    .main-nav .nav-link.view-all,
    .p-index .designers .index-designers-list .swiper-buttons.swiper-button-disabled,
    .purchase-options .bundles .preview-toggle,
    .purchase-options .desktop-preview .wrapper,
    .select-license-modal .content-wrapper>.header .title,
    .select-license-modal .license-option-wrapper .licence-desc-toggle,
    .support-faq .section-title,
    header.sticky .desktop-user .user-name,
    header.sticky .search-toggle .icon-wrapper::after {
        display: none;
    }

    .main-nav .nav-title {
        font-weight: 400;
        font-variation-settings: "wght" 400, "dots" 1;
        color: var(--c-text-1);
    }

    .footer .main .nav .list a,
    .i-card .cta {
        font-variation-settings: "wght" 300, "dots" 1;
    }

    .main-nav .main-item>.nav-link .nav-title,
    .orders-list .item .license-details .row:first-child {
        margin-bottom: 5px;
    }

    .main-nav .main-item>.nav-link {
        height: 100%;
        margin: 0 12px;
    }

    .main-nav .main-item>.nav-link:hover {
        color: #000;
    }

    .main-nav .main-item>.nav-link::after {
        content: "";
        position: absolute;
        right: calc(50% - 3px);
        bottom: 14px;
        height: 5px;
        width: 5px;
        background-color: #f3f3f6;
        border-radius: 999px;
        transition: 0.26s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .main-nav .main-item:hover>.nav-link::after {
        background-color: var(--c-red-3);
        width: 20px;
        right: calc(50% - 10px);
    }

    .main-nav .main-item.drop-down:hover>.nav-link::after,
    .main-nav .main-item.mega-menu:hover>.nav-link::after {
        width: 5px;
        right: calc(50% - 3px);
    }

    .main-nav .sub-nav {
        width: auto;
        right: auto;
        position: initial;
        overflow-y: initial;
        top: auto;
        bottom: auto;
        z-index: 160;
        background: #0000;
        transition: right 0.36s cubic-bezier(0.25, 0.1, 0.25, 1);
        padding-bottom: 0;
    }

    .main-nav .drop-down ul {
        position: absolute;
        right: -24px;
        width: 168px;
        padding: 5px 0 10px;
        background-color: #fff;
        border: 1px solid var(--c-grey-light-5);
        box-shadow: 0 0 0 0 rgb(0 0 0 / 20%);
        border-radius: 0 0 var(--br-4) var(--br-4);
        transition: 0.3s ease-in-out;
    }

    .main-nav .sub-nav.active {
        right: -24px;
    }

    .main-nav .drop-down .sub-nav .m-link {
        justify-content: center;
        font-size: var(--fs-3);
        padding: 12px 16px;
    }

    .main-nav .drop-down .sub-nav .m-link:hover .nav-title,
    .posts-stream .card-post .title-cap:hover .headline,
    .support-faq .faq .item:hover {
        text-decoration: underline;
    }

    .main-nav .main-item.drop-down:hover ul {
        opacity: 1;
        visibility: visible;
        box-shadow: var(--bs-grey-5);
    }

    .main-nav .mega-menu-wrapper {
        pointer-events: none;
        height: 348px;
        position: absolute;
        right: 0;
        box-sizing: content-box;
        width: 980px;
        background-color: #fff;
        border: 1px solid var(--c-grey-light-5);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
        border-radius: 0 0 var(--br-4) var(--br-4);
        transition: 0.35s ease-in-out;
        overflow: hidden;
    }

    .main-nav .main-item:hover .mega-menu-wrapper {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        box-shadow: 0 30px 20px -10px rgba(0, 0, 0, 0.2);
    }

    .main-nav .main-item.mega-menu:hover::before {
        content: "";
        position: absolute;
        width: 140px;
        height: 50px;
        bottom: 0;
        margin-right: -100px;
    }

    .main-nav .main-item:hover .mega-menu-wrapper.active {
        right: 0;
    }

    .main-nav li.has-child::after {
        content: none;
    }

    .main-nav .mega-menu-wrapper::after {
        content: "";
        position: absolute;
        top: 0;
        right: 180px;
        height: 100%;
        width: 1px;
        background-color: #ebebef;
        background: linear-gradient(180deg, #ebebef 10%, rgba(255, 255, 255, 0) 100%);
    }

    .main-nav .mega-menu-wrapper::before {
        content: "";
        position: absolute;
        top: 174px;
        right: 0;
        height: 1px;
        width: 180px;
        background-color: var(--c-grey-light-5);
        z-index: 100;
    }

    .main-nav .mega-menu-wrapper .nav-title {
        font-size: var(--fs-2-5);
        font-variation-settings: "wght" 400;
    }

    .blog-post-content,
    .cart-sc .main-wrapper .items,
    .main-nav .mega-menu-wrapper .nav-link,
    .purchase-options .bundles {
        padding: 0;
    }

    .main-nav .mega-menu-wrapper .lvl-1>.m-link {
        position: absolute;
        right: 0;
        top: 0;
        width: 180px;
        height: 174px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main-nav .mega-menu-wrapper .lvl-1:last-of-type>.m-link {
        top: 174px;
    }

    .main-nav .mega-menu-wrapper .lvl-1 .nav-title .fonts {
        display: block;
        font-size: var(--fs-5);
        font-variation-settings: "wght" 300, "dots" 1;
        margin-bottom: -6px;
    }

    .main-nav .mega-menu-wrapper .lvl-1 .nav-title .main-cat {
        display: block;
        font-size: var(--fs-7);
        font-variation-settings: "wght" 800, "dots" 1;
    }

    .main-nav .mega-menu-wrapper .lvl-1>.nav-link::after {
        content: "";
        position: absolute;
        left: 15px;
        opacity: 0;
        width: 16px;
        height: 16px;
        background: url(../img/Polygon.svg) 50% 50% no-repeat;
    }

    .designers-list .designer:hover .font-counter,
    .footer .main .footer-badges .wrapper:hover img,
    .index-f-cats .item:hover .icon img,
    .main-font-desc .section.gallery .item:hover .photo-wrapper::after,
    .main-font-desc .section.gallery .photos-carusel:hover .swiper-buttons,
    .main-nav .mega-menu-wrapper .lvl-1>.m-link.desktop-active::after,
    .p-index .designers .index-designers-list:hover .swiper-buttons {
        opacity: 1;
    }

    .main-nav .mega-menu-wrapper .lvl-1>.sub-nav {
        visibility: hidden;
        opacity: 0;
        transition: 0.2s ease-in-out;
        margin-right: 170px;
        box-sizing: border-box;
        padding: 0 10px;
        display: flex;
        height: 312px;
    }

    .main-nav .mega-menu-wrapper .lvl-1:nth-of-type(3)>.sub-nav {
        margin-top: -312px;
        margin-right: 170px;
    }

    .main-nav .mega-menu-wrapper .lvl-1>.m-link.desktop-active~.sub-nav,
    .main-nav .mega-menu-wrapper .lvl-1>.sub-nav:hover,
    .x .main-nav .mega-menu-wrapper>.lvl-2:hover>.sub-nav {
        visibility: visible;
        opacity: 1;
        z-index: 10;
    }

    .main-nav .mega-menu-wrapper .lvl-1>.m-link.desktop-active {
        background: #f9f9fb;
    }

    .footer .main .contact-info .email span,
    .footer .main .contact-info .phone-number span,
    .main-nav .mega-menu-wrapper .lvl-1>.m-link.desktop-active .nav-title,
    .main-nav .mega-menu-wrapper .lvl-2>.m-link:hover .nav-title {
        color: var(--c-red);
    }

    .main-nav .mega-menu-wrapper .lvl-2 {
        width: 140px;
        box-sizing: content-box;
        padding-bottom: 15px;
        position: relative;
    }

    .main-nav .mega-menu-wrapper .lvl-2::after {
        content: "";
        height: 100%;
        width: 1px;
        background-color: #ebebef;
        background: linear-gradient(180deg, #ebebef 10%, rgba(255, 255, 255, 0) 100%);
        position: absolute;
        border: none;
        top: 0;
        left: 0;
        right: auto;
        transform: rotate(0);
    }

    .main-nav .mega-menu-wrapper .lvl-2.large {
        width: 280px;
    }

    .main-nav .mega-menu-wrapper .lvl-2.xlarge {
        width: 380px;
    }

    .main-nav .mega-menu-wrapper .lvl-2.large>.sub-nav,
    .main-nav .mega-menu-wrapper .lvl-2.xlarge>.sub-nav {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        max-height: 310px;
    }

    .main-nav .mega-menu-wrapper .lvl-2>.m-link {
        display: block;
        padding: 5px 10px;
    }

    .main-nav .mega-menu-wrapper .lvl-2>.m-link .nav-title {
        font-size: var(--fs-3);
        font-variation-settings: "wght" 700, "dots" 1;
    }

    .main-nav .mega-menu-wrapper .lvl-3 {
        width: 140px;
        padding: 3px 8px 5px;
    }

    .main-nav .mega-menu-wrapper .lvl-3>.m-link:hover .nav-title {
        text-decoration: underline;
        color: #000;
    }

    .x .main-nav .mega-menu-wrapper .sub-item .sub-item .sub-item>.nav-link {
        padding: 0;
        width: 140px;
        margin-bottom: 3px;
        font-size: var(--fs-2-5);
    }

    .x .main-nav .mega-menu-wrapper .sub-item .sub-item .sub-item>.nav-link .nav-title {
        font-variation-settings: "wght" 400;
    }

    .x .main-nav .mega-menu-wrapper .sub-item.has-child .sub-item.has-child>.nav-link::after {
        left: -15px;
        border-color: var(--c-grey-light-5);
        border-width: 1.6px 1.6px 0 0;
        border-radius: 3px;
        background-color: #fff;
    }

    .x .main-nav .mega-menu-wrapper .sub-item .nav-title {
        color: inherit;
        margin-bottom: 2px;
    }

    .x .main-nav .mega-menu-wrapper .lvl-3 .sub-nav {
        pointer-events: none;
        flex-direction: column;
        height: auto;
        position: initial;
        width: 100%;
    }

    .x .main-nav .mega-menu-wrapper>.lvl-2:hover:hover>.sub-nav .sub-nav {
        visibility: visible;
        opacity: 1;
        pointer-events: all;
    }

    .main-nav .main-item.drop-down>.nav-link::before,
    .main-nav .main-item.mega-menu>.nav-link::before {
        content: "";
        visibility: hidden;
        opacity: 0;
        width: 35px;
        height: 11px;
        position: absolute;
        background: url(../img/bilbilak2.png) 50% 50% no-repeat;
        transition: 0.26s cubic-bezier(0.25, 0.1, 0.25, 1);
        bottom: -1px;
        right: calc(50% - 18px);
        z-index: 170;
    }

    .main-nav .main-item:hover>.nav-link::before {
        visibility: visible;
        opacity: 1;
    }

    header.sticky {
        position: fixed;
        height: 75px;
    }

    header.sticky .header-container .desktop-top-bar {
        height: 74px;
    }

    header.sticky .header-container .main-nav {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        pointer-events: none;
    }

    header.sticky .main-nav .navbar {
        pointer-events: auto;
    }

    header.sticky .desktop-user {
        width: 46px;
        margin-right: 8px;
    }

    .comments-faq-sc .pagination-container ul,
    .pagination-container .item:last-child,
    header.sticky .desktop-user .profile-picture {
        margin-left: 0;
    }

    header.sticky .search-toggle .icon-wrapper {
        width: 46px;
        position: absolute;
        left: 124px;
        top: 14px;
        background-color: var(--c-grey-light-7);
    }

    header.sticky .search-modal .modal-content {
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 15px;
    }

    .index-carousel .page-container {
        padding: 10px 0;
        border-radius: 0;
        background: var(--c-grey-light-7);
        background: linear-gradient(0deg, var(--white) 0, var(--c-grey-light-7));
    }

    .index-carousel .page-width {
        padding: 20px;
        border-radius: var(--br-6);
    }

    .index-carousel .main-carousel {
        border-radius: var(--br-4);
        overflow: hidden;
    }

    .index-carousel .slide {
        max-width: 100%;
        padding: 0;
        height: 480px;
        margin: 0 30px;
    }

    .card-large.slider .media-container,
    .index-carousel .slide.banner .media-container {
        overflow: hidden;
        display: flex;
        justify-content: center;
    }

    .card-large.slider .media-container img,
    .index-carousel .slide.banner img {
        height: 480px;
        width: 1180px;
        max-width: initial;
        max-height: inherit;
    }

    .card-large.slider,
    .contact-page .support-faq .support {
        max-width: 100%;
    }

    .card-large.slider .wrapper {
        width: calc(100% - 30px);
        left: 15px;
        bottom: 15px;
    }

    .card-large.slider .thumb {
        transition: box-shadow 0.26s cubic-bezier(0.25, 0.1, 0.25, 1);
        border-radius: var(--br-3);
    }

    .card-large.slider .wrapper:hover .thumb {
        box-shadow: 0 6px 8px -4px;
    }

    .card-large.slider .details {
        width: auto;
    }

    .card-large.slider .price .value {
        letter-spacing: initial;
    }

    .index-carousel .aspect-ratio {
        position: initial;
        display: block;
    }

    .index-carousel .index-cards-wrapper {
        position: initial;
        height: 480px;
    }

    .i-card {
        max-width: 100%;
        height: auto;
        border-radius: var(--br-4);
        box-shadow: 0 0 0 -5px var(--c-text-1);
        transition: box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .i-card .wrapper {
        border-radius: var(--br-4) !important;
        background-color: var(--c-grey-light-5);
        height: calc(440px / 3);
        justify-content: flex-start;
        align-items: center;
        padding: 18px;
    }

    .i-card .thumb {
        width: 110px;
        height: 110px;
        border-radius: var(--br-4);
        transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .i-card .details {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
        padding-top: 5px;
        width: 330px;
        transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .i-card .cta,
    .i-card .oneliner {
        transition: 0.36s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .i-card .details .title {
        display: block;
        font-weight: 400;
        font-variation-settings: "wght" 400, "dots" 1;
        font-size: var(--fs-4);
        margin-bottom: 0;
    }

    .i-card .price .value {
        letter-spacing: 0;
        font-size: var(--fs-5);
    }

    .blog-post-header .meta .value,
    .i-card .cta,
    .i-card .price .currency,
    .i-card .tags,
    .order-summary .item .license-details,
    .select-license-modal .license-desc,
    .support-faq .name-bio .bio {
        font-size: var(--fs-3);
    }

    .i-card .tags {
        display: flex;
        overflow: hidden;
        flex-wrap: wrap;
        height: 25px;
    }

    .i-card .details .tag {
        display: block;
        background-color: var(--c-grey-light-4);
        margin-left: 10px;
        margin-bottom: 10px;
        padding: 1px 12px 3px;
    }

    .i-card .oneliner {
        position: initial;
        width: calc(100% - 440px);
        height: 110px;
        align-items: center;
        justify-content: flex-end;
        padding: 8px 15px;
    }

    .i-card:hover {
        box-shadow: 0 4px 8px -5px var(--c-text-1);
    }

    .i-card:hover .thumb {
        opacity: 1;
        transform: translateX(150px);
        position: absolute;
    }

    .i-card:hover .details {
        position: absolute;
        transform: translateX(460px);
    }

    .i-card:hover .oneliner {
        position: absolute;
        right: 50%;
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
    }

    .i-card .cta {
        position: absolute;
        opacity: 0;
        display: flex;
        gap: 4px;
        padding: 6px 15px 6px 5px;
        left: -160px;
        color: var(--white);
        background-color: var(--c-red);
        font-weight: 300;
        border-radius: 999px;
    }

    .index-f-cats .counter,
    .index-f-cats .item,
    .orders-list .item .license-desk-act .btn {
        transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .font-card .font-wrapper:hover .cta,
    .i-card:hover .cta {
        opacity: 1;
        left: 30px;
    }

    .index-carousel .main-carousel-pagination {
        padding: 0;
        background-color: #0000;
        margin-left: 0;
    }

    .index-f-cats {
        padding: 1px 0 30px;
    }

    .index-f-cats .item {
        width: calc(100% / 5);
        margin: 0;
        border-radius: 0;
        border-color: var(--c-grey-light-4);
        border-right: none;
        height: 110px;
    }

    .index-f-cats .item:first-child {
        border-right: 1px solid var(--c-grey-light-4);
        border-radius: 0 var(--br-3) var(--br-3) 0;
    }

    .index-f-cats .item:last-child {
        border-radius: var(--br-3) 0 0 var(--br-3);
    }

    .index-f-cats .item:hover {
        background-color: var(--c-grey-light-8);
        z-index: 10;
    }

    .index-f-cats .title {
        color: var(--c-grey-light-2);
    }

    .index-f-cats .icon img {
        transition: opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .font-card .tag:hover,
    .index-f-cats .item:hover .counter {
        background-color: var(--c-red-3);
        color: var(--white);
    }

    .index-f-cats .item:hover .title .counter span {
        --m: var(--fs-3);
    }

    .support-faq {
        background-color: var(--c-grey-light-7);
        padding-bottom: 20px;
    }

    .support-faq .main-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
    }

    .support-faq .support {
        display: block;
        max-width: 440px;
    }

    .support-faq .profile {
        border-bottom: 1px solid var(--c-grey-light-6);
        border-left: none;
    }

    .support-faq .profile:first-child {
        border-radius: var(--br-2) var(--br-2) 0 0;
    }

    .support-faq .profile:last-child {
        border-radius: 0 0 var(--br-2) var(--br-2);
    }

    .support-faq .option.email .value {
        font-size: var(--fs-2);
    }

    .support-faq .faq {
        max-width: calc(100% - 470px);
    }

    .support-faq .faq .title {
        font-variation-settings: "wght" 700, "dots" 1;
        color: var(--c-text-1);
        margin-bottom: 20px;
    }

    .footer .main .about p,
    .support-faq .faq .item,
    .support-faq .faq .view-more {
        font-variation-settings: "wght" 300;
        font-weight: 300;
    }

    .comments-faq-sc .comment,
    .purchase-options .total-sc,
    .support-faq .faq .list {
        padding-bottom: 5px;
    }

    .support-faq .faq .item {
        display: flex;
        text-decoration: none;
        color: var(--c-text-1);
        margin-bottom: 20px;
    }

    .support-faq .faq .item::before {
        content: "";
        width: 24px;
        height: 24px;
        background: url("../img/icons/arrow-up-right-red.svg") 50% 50% no-repeat;
        margin-left: 5px;
    }

    .support-faq .faq .view-more {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 260px;
        padding: 10px 15px;
        font-size: var(--fs-3);
        text-decoration: none;
        color: var(--c-grey-light-4);
        background-color: var(--c-grey-dark-5);
        border-radius: var(--br-2);
    }

    .blog-post-header .meta .value:hover,
    .support-faq .faq .view-more:hover .value {
        color: var(--c-red-3);
    }

    .support-faq .faq .view-more .value {
        margin-bottom: 3px;
    }

    .support-faq .faq .view-more .icon img {
        opacity: 0.8;
    }

    .cards-wrapper .card.small {
        width: calc(33% - 8px);
    }

    .p-index .latest-fonts .filters .wrapper {
        justify-content: space-between;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .p-index .latest-fonts .filters .wrapper::-webkit-scrollbar {
        height: 7px;
        background-color: #eeeef2;
        transition: width 0.2s, height 0.2s;
    }

    .p-index .latest-fonts .filters .wrapper::-webkit-scrollbar-thumb {
        background: #d6d6d6;
        border-radius: 999px;
        transition: width 0.2s, height 0.2s;
    }

    .p-index .latest-fonts .filters .wrapper:hover::-webkit-scrollbar {
        height: 10px;
    }

    .section-title {
        padding-bottom: 25px;
    }

    .p-index .latest-fonts {
        padding: 80px 0;
        border-bottom: none;
    }

    .section-title .view-more {
        color: var(--c-grey-dark-2);
        font-weight: 500;
        font-variation-settings: "wght" 500, "dots" 1;
        display: flex;
        align-items: center;
    }

    .section-title .icon {
        display: block;
        padding-right: 5px;
    }

    .faq-content .answer .wrapper,
    .section-title .view-more :hover {
        color: var(--c-text-1);
    }

    .p-index .designers .index-designers-list .swiper-buttons {
        background-color: var(--c-grey-light-7);
        width: 32px;
        height: 56px;
        margin-top: calc(0px - (56px / 2));
        opacity: 0;
        transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .p-index .designers .index-designers-list .swiper-button-prev {
        left: auto;
        right: -15px;
        border-radius: 8px 0 0 8px;
    }

    .p-index .designers .index-designers-list .swiper-button-next {
        left: -15px;
        right: auto;
        border-radius: 0 8px 8px 0;
    }

    .p-index .designers .index-designers-list .swiper-button-next::after,
    .p-index .designers .index-designers-list .swiper-button-prev::after {
        opacity: 1;
        font-weight: 900;
        font-size: 16px;
        color: var(--c-grey-light-4);
        transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .p-index .designers .index-designers-list .swiper-buttons:hover::after {
        color: var(--c-grey-dark-5);
    }

    .p-index .designers .item {
        width: 220px;
        height: 293px;
    }

    .p-index .big-banner {
        background: linear-gradient(180deg, var(--white) 0, var(--c-grey-light-7));
    }

    .comments-faq-sc .comment.type-reply .media,
    .p-index .designers,
    .p-index .licenses {
        background-color: var(--c-grey-light-7);
    }

    .p-index .licenses {
        padding-bottom: 80px;
    }

    .p-index .licenses .section-container {
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        border-radius: var(--br-4);
        padding: 20px;
        position: relative;
    }

    .p-index .licenses .latest-licenses {
        width: 560px;
    }

    .p-index .latest-licenses .section-title {
        display: block;
        padding-bottom: 15px;
    }

    .p-index .latest-licenses .section-title .sub-title {
        font-size: var(--fs-3);
        color: var(--c-grey);
        font-weight: 500;
        font-variation-settings: "wght" 500;
    }

    .p-index .licenses .summary-licenses {
        width: 380px;
        margin: 0;
    }

    .p-index .license {
        margin: 0;
        padding: 15px 0;
        background-color: #0000;
        border-radius: 0;
        border-bottom: 1px solid var(--c-grey-light-6);
    }

    .p-index .license:last-child {
        border-bottom: none;
    }

    .p-index .license .thumb {
        display: flex;
        position: relative;
        width: initial;
        height: initial;
        padding: 0;
    }

    .p-index .license .thumb img {
        max-width: 100%;
        max-height: 100%;
    }

    .p-index .license .font-icon {
        width: 48px;
        height: 48px;
        padding: 10px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: var(--br-round);
        flex-shrink: 0;
    }

    .p-index .license .license-icon {
        width: 50px;
        height: 50px;
        padding: 8px;
        margin-right: -20px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid var(--c-grey-light-5);
        border-radius: var(--br-round);
        background-color: rgb(255 255 255 / 80%);
        --webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        transition: 0.26s ease-in-out;
    }

    .p-index .license:hover .thumb .license-icon {
        background-color: #fff;
        border: 1px solid var(--c-grey-light-7);
    }

    .p-index .license .details {
        width: calc(100% - 76px);
    }

    .p-index .license .details .top {
        font-size: var(--fs-3);
        height: 20px;
    }

    .p-index .licenses .item {
        display: block;
        padding: 0;
    }

    .p-index .licenses .license-badge {
        width: 164px;
        height: 164px;
        margin: 20px auto;
    }

    .p-index .licenses .license-details {
        padding: 15px 0 0;
        width: 100%;
    }

    .p-index .licenses .bottom {
        justify-content: flex-end;
    }

    .p-index .licenses .licenses-pagination {
        bottom: 15px;
        width: 200px;
        background-color: #f2f2f7;
    }

    .footer .main {
        padding-bottom: 100px;
    }

    .footer .main .box {
        background-color: var(--white);
        position: relative;
        border-radius: var(--br-5);
        z-index: 2;
        border-bottom: 1px solid #343434;
        padding-top: 0;
    }

    .footer .main .contact {
        max-width: 100%;
        display: flex;
        justify-content: space-between;
        background-color: transparent;
        border-radius: 0;
        padding: 20px;
    }

    .footer .main .contact-info {
        width: 420px;
        background-color: var(--c-grey-light-7);
    }

    .footer .main .contact .start {
        text-align: right;
        padding: 15px 20px 15px 0;
    }

    .footer .main .contact .start::before {
        margin: auto;
        left: auto;
        right: 0;
        width: 6px;
        height: 50px;
        top: 22px;
        background-color: #1b1b1d;
        box-shadow: none;
    }

    .footer .main .contact .start .title {
        color: var(--c-grey-dark-6);
        font-size: var(--fs-5);
    }

    .blog-post-content .related-posts .date,
    .blog-post-content .related-posts .sc-title,
    .footer .main .contact .start .sub-title,
    .orders-list .item .license-details .row .value,
    .posts-stream .card-post .date,
    .posts-stream .card-post .dek {
        color: var(--c-grey);
    }

    .footer .main .contact-info .item {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .footer .main .contact-info .title {
        color: var(--c-grey-dark-2);
        font-size: var(--fs-3);
        width: 100%;
    }

    .footer .main .contact-info .email,
    .footer .main .contact-info .phone-number {
        font-size: var(--fs-5);
        color: var(--c-grey-dark-4);
        font-variation-settings: "wght" 500;
        font-weight: 500;
    }

    .footer .main .contact-info .phone-number {
        letter-spacing: 1.2px;
    }

    .footer .main .contact-info .item.phone::after {
        background-color: #32323a;
    }

    .footer .main .content {
        display: flex;
        padding: 50px 0 20px;
        margin: 0;
        justify-content: space-between;
    }

    .footer .main .about {
        padding: 25px;
        width: 400px;
    }

    .footer .main .nav {
        display: block;
        padding: 25px;
        display: flex;
    }

    .font-p-designers .designer,
    .footer .main .about .logo {
        margin-right: 0;
    }

    .footer .main .about p {
        text-align: right;
        padding: 0;
        color: var(--c-grey-dark-2);
    }

    .footer .main .about .social-links {
        margin: 0;
        padding-top: 50px;
        background-color: transparent;
        padding-right: 0;
    }

    .footer .main .nav .col:first-child {
        padding-left: 60px;
    }

    .footer .main .nav .title {
        color: var(--c-text-1);
        font-size: var(--fs-3);
        padding-bottom: 20px;
        font-weight: 500;
        font-variation-settings: "wght" 500, "dots" 1;
    }

    .footer .main .nav .list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .footer .main .nav .list li {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }

    .footer .main .nav .list a {
        text-decoration: none;
        color: var(--c-grey-dark-2);
        font-size: var(--fs-3);
        font-weight: 300;
        display: block;
    }

    .footer .main .nav .list li::before {
        content: "";
        width: 5px;
        height: 5px;
        background-color: var(--c-grey-light-5);
        display: block;
        border-radius: 999px;
        margin-left: 8px;
        margin-top: 2px;
    }

    .footer .main .nav .list li:hover::before {
        background-color: var(--c-red-3);
    }

    .footer .main .nav .list li:hover a {
        color: var(--c-grey-dark-6);
    }

    .footer .main .footer-badges {
        width: 180px;
        height: 220px;
        display: block;
        overflow: hidden;
        margin: 25px;
        border-radius: var(--br-4);
        box-sizing: content-box;
        padding-bottom: 20px;
    }

    .footer .main .footer-badges .wrapper {
        width: 180px;
        height: 220px;
        background-color: var(--c-grey-light-7);
        border-radius: var(--br-4);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .footer .main .footer-badges .wrapper img {
        width: 128px;
        opacity: 0.7;
    }

    .footer .main .footer-badges .footer-pagination {
        text-align: center;
    }

    .cart-sc .discount-steps .step .step-col:hover,
    .footer .main .footer-badges .swiper-pagination-bullet {
        background-color: var(--c-grey-light-3);
    }

    .footer .main .footer-badges .swiper-pagination-bullet-active {
        background-color: var(--c-grey-light-2);
    }

    .footer .main::before {
        height: 500px;
        opacity: 1;
    }

    .footer .main::after {
        background-image: url(../img/pattern-2.svg);
        background-position: top;
        background-repeat: repeat-x;
        background-size: auto;
        height: 460px;
        opacity: 0.2;
    }

    .fp-header .meta .wrapper {
        margin-top: -30px;
        display: flex;
        flex-wrap: wrap;
    }

    .fp-header .meta .details {
        width: calc(100% - 140px);
        padding-top: 30px;
        padding-right: 20px;
    }

    .designer-info .other .name,
    .designer-info .other .occupation,
    .fp-header .f-title {
        text-align: right;
    }

    .fp-header .specs {
        padding: 13px 0 0;
        justify-content: right;
        overflow: hidden;
    }

    .blog-post-header .meta .item,
    .fp-header .spec {
        border: none;
        padding: 0;
        margin-left: 30px;
    }

    .fp-header .spec .icon {
        margin-left: 10px;
        padding: 4px;
        background-color: var(--c-grey-light-6);
        border-radius: 8px;
    }

    .fp-header .spec .icon img {
        width: 18px;
    }

    .fp-header .short-desc {
        width: 100%;
        padding: 40px 0;
    }

    .afilliate-sign-up .form-wrapper .input-wrapper,
    .blog-index-header .b-featured-posts .full-width,
    .blog-index-header .b-featured-posts .post:last-child,
    .cart-sc .discount-steps,
    .font-card .price,
    .fp-header .short-desc p,
    .orders-list .item .license-details .row,
    .orders-list .item .owner .row {
        margin: 0;
    }

    .purchase-options {
        background-color: transparent;
        margin: 0 0 50px;
    }

    .purchase-options .main-wrapper {
        background-color: var(--c-grey-light-7);
        padding: 15px;
        border-radius: var(--br-4);
        display: flex;
    }

    .purchase-options .box {
        position: relative;
        padding: 10px;
        background-color: #fff;
        width: calc(100% - 480px);
        border-radius: var(--br-3);
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        min-height: 520px;
    }

    .purchase-options .bundles .bundle-option {
        margin-bottom: 15px;
        border-radius: 0;
        border: none;
    }

    .purchase-options .bundles .option-wrapper {
        height: 80px;
        width: 100%;
        padding: 10px;
        border-radius: var(--br-2);
        background-color: var(--c-grey-light-6);
        transition: background-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .purchase-options .bundles .option-wrapper:hover {
        background-color: var(--c-grey-light-4);
    }

    .purchase-options .bundles input:checked~label {
        background-color: var(--c-text-1) !important;
        box-shadow: 0 4px 8px -4px var(--c-text-1);
    }

    .purchase-options .bundles input:checked~label::after,
    .select-license-modal .license-option-wrapper input:checked~.op-label .option::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid var(--c-text-1);
        left: -8px;
    }

    .purchase-options .bundles .info {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .purchase-options .bundles .name {
        font-size: var(--fs-5);
        font-variation-settings: "wght" 700, "dots" 1;
        color: var(--c-text-1);
    }

    .purchase-options .bundles .extra {
        display: inline-block;
        float: left;
        margin-top: 2px;
        margin-right: 5px;
    }

    .cart-sc .items .item .price-remove .price .value,
    .faq-content .questions-wrapper .sc-title .title,
    .purchase-options .bundles .price {
        font-size: var(--fs-5);
    }

    .purchase-options .bundles .checkbox {
        background-color: var(--c-grey-light-8);
        border: 1px solid var(--c-grey-light-3);
    }

    .purchase-options .desktop-preview {
        width: 480px;
        padding-right: 25px;
    }

    .font-card .desktop-link,
    .font-card .font-title,
    .fonts-list .filters-wrapper,
    .order-summary .item.license .end,
    .purchase-options .bundle-1 .desktop-preview .wrapper:first-child,
    .purchase-options .bundle-10 .desktop-preview .wrapper:nth-child(10),
    .purchase-options .bundle-2 .desktop-preview .wrapper:nth-child(2),
    .purchase-options .bundle-3 .desktop-preview .wrapper:nth-child(3),
    .purchase-options .bundle-4 .desktop-preview .wrapper:nth-child(4),
    .purchase-options .bundle-5 .desktop-preview .wrapper:nth-child(5),
    .purchase-options .bundle-6 .desktop-preview .wrapper:nth-child(6),
    .purchase-options .bundle-7 .desktop-preview .wrapper:nth-child(7),
    .purchase-options .bundle-8 .desktop-preview .wrapper:nth-child(8),
    .purchase-options .bundle-9 .desktop-preview .wrapper:nth-child(9) {
        display: block;
    }

    .purchase-options .licenses {
        margin: 20px 0 0;
        padding: 20px 0;
        border-color: var(--c-grey-light-6);
    }

    .purchase-options .licenses .license-title,
    .purchase-options .registered-license .info,
    .select-license-modal .op-label .option .flex-start {
        display: flex;
        align-items: center;
    }

    .purchase-options .licenses .owner-info {
        display: block;
        width: 210px;
        overflow: hidden;
        padding-right: 7px;
        margin-right: 7px;
        border-right: 1px solid var(--c-grey-light-5);
        font-size: var(--fs-2);
    }

    .purchase-options .licenses .owner-info .title {
        font-weight: 500;
        font-variation-settings: "wght" 500;
    }

    .purchase-options .licenses .owner-info .value {
        font-weight: 300;
        font-variation-settings: "wght" 300;
    }

    .purchase-options .licenses .wrapper {
        background-color: transparent;
        padding: 0;
    }

    .select-license-modal .l-modal-overlay {
        position: absolute;
        height: 100%;
        min-height: initial;
        max-height: 100%;
        border-radius: var(--br-4);
        z-index: 10;
        padding: 20px;
    }

    .select-license-modal .l-content {
        width: 900px;
        height: 520px;
        max-height: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .select-license-modal .content-wrapper>.header {
        position: absolute;
        top: -10px;
        left: -10px;
    }

    .select-license-modal .content-wrapper>.header .close-bt {
        padding: 5px;
        background-color: #fff;
        cursor: pointer;
        border-radius: var(--br-3);
    }

    .select-license-modal .form-wrapper {
        width: 480px;
    }

    .select-license-modal .options {
        max-height: initial;
        overflow: hidden;
        padding: 15px;
    }

    .select-license-modal .license-option-wrapper {
        position: unset;
        margin-bottom: 5px;
    }

    .select-license-modal .license-option-wrapper:last-child {
        margin-bottom: 0;
    }

    .select-license-modal .op-label .option {
        padding: 10px;
        background-color: transparent;
        border: none;
        border-radius: var(--br-1);
    }

    .select-license-modal .op-label .badge {
        display: block;
        width: 24px;
        height: 24px;
        margin-left: 10px;
    }

    .select-license-modal .license-owner {
        padding: 15px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        overflow: hidden;
    }

    .select-license-modal .license-owner .form-control-x {
        width: calc(50% - 7px);
    }

    .select-license-modal .license-owner label {
        justify-content: flex-start;
    }

    .select-license-modal .license-owner label .sub {
        margin-right: 5px;
    }

    .orders-list .item .license .actions .btn:hover,
    .p-license-check .license:hover,
    .purchase-options .registered-license .license-info,
    .select-license-modal .op-label .option:hover {
        background-color: var(--c-grey-light-6);
    }

    .blog-index-header .b-featured-posts,
    .cart-sc .items .item .wrapper,
    .faq-content .question-toggle,
    .orders-list .item,
    .select-license-modal .license-desc .content {
        padding: 15px;
    }

    .select-license-modal .license-head {
        display: flex;
        padding: 10px 15px;
        align-items: center;
        border-bottom: 1px solid var(--c-grey-light-4);
    }

    .select-license-modal .license-head .badge {
        height: 36px;
        width: 36px;
        background-color: #fff;
        border-radius: var(--br-round);
        padding: 4px;
        margin-left: 5px;
    }

    .select-license-modal .license-head .title {
        font-size: var(--fs-4);
        font-variation-settings: "wght" 700, "dots" 1;
    }

    .select-license-modal .l-content .content-wrapper .license-option-wrapper .license-desc {
        display: none;
        position: absolute;
        top: 15px;
        left: 15px;
        width: 400px;
        border-radius: var(--br-2);
        background-color: var(--c-grey-light-7);
        box-shadow: none;
        color: var(--c-text-1);
    }

    .select-license-modal .l-content .content-wrapper.license-0 .license-option-wrapper:first-child .license-desc,
    .select-license-modal .l-content .content-wrapper.license-1 .license-option-wrapper:nth-child(2) .license-desc,
    .select-license-modal .l-content .content-wrapper.license-10 .license-option-wrapper:nth-child(11) .license-desc,
    .select-license-modal .l-content .content-wrapper.license-11 .license-option-wrapper:nth-child(12) .license-desc,
    .select-license-modal .l-content .content-wrapper.license-2 .license-option-wrapper:nth-child(3) .license-desc,
    .select-license-modal .l-content .content-wrapper.license-3 .license-option-wrapper:nth-child(4) .license-desc,
    .select-license-modal .l-content .content-wrapper.license-4 .license-option-wrapper:nth-child(5) .license-desc,
    .select-license-modal .l-content .content-wrapper.license-5 .license-option-wrapper:nth-child(6) .license-desc,
    .select-license-modal .l-content .content-wrapper.license-6 .license-option-wrapper:nth-child(7) .license-desc,
    .select-license-modal .l-content .content-wrapper.license-7 .license-option-wrapper:nth-child(8) .license-desc,
    .select-license-modal .l-content .content-wrapper.license-8 .license-option-wrapper:nth-child(9) .license-desc,
    .select-license-modal .l-content .content-wrapper.license-9 .license-option-wrapper:nth-child(10) .license-desc {
        display: block;
        max-height: initial;
    }

    .select-license-modal .license-option-wrapper input:checked~.op-label~.licence-desc-toggle~.license-desc {
        background-color: var(--c-grey-light-7);
        color: var(--c-text-1);
        box-shadow: none;
    }

    .select-license-modal .license-desc .list li.active::before,
    .select-license-modal .license-desc .list li.inactive::before {
        background-size: 15px 15px;
        margin-top: 2px;
    }

    .select-license-modal .license-owner.add-padding {
        padding-bottom: 15px;
    }

    .select-license-modal .op-label .old-price {
        display: block;
        text-decoration: line-through;
        color: var(--c-red-3);
        margin-left: 10px;
        font-size: var(--fs-3);
    }

    .purchase-options .registered-license .owner-info {
        border-right: 1px solid var(--c-grey-light-4);
    }

    .purchase-options .registered-license .badge {
        width: 38px;
        height: 38px;
        padding: 5px;
    }

    .purchase-options .bundles .bundle-already-purchased {
        border: none;
        background-color: #0000;
    }

    .purchase-options .bundles .bundle-already-purchased .option-wrapper {
        background-color: var(--c-grey-light-6);
        cursor: no-drop;
    }

    .purchase-options .bundles .bundle-already-purchased .info .price {
        opacity: 0.5;
    }

    .blog-post-content .main-wrapper,
    .content-box .box,
    .designer-info .top,
    .font-lab-sc .controls,
    .font-lab-sc .font-lab-link a,
    .fonts-list .contnet-filters .category {
        display: flex;
    }

    .font-lab-sc .controls .fl-textfield {
        outline: 0;
    }

    .font-lab-sc .controls .character-counter {
        left: 175px;
        top: 18px;
    }

    .font-lab-sc .controls .fl-submit {
        width: 160px;
    }

    .font-lab-sc .fl-results .result .media-container {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        height: 164px;
    }

    .font-lab-sc .fl-results .result .media-container img {
        max-height: 260px;
    }

    .font-lab-sc .fl-results .result .font-weight {
        margin-top: -10px;
    }

    .font-lab-sc .font-lab-link .title {
        text-align: right;
        margin-bottom: 0;
    }

    .font-lab-sc .main-wrapper {
        padding: 80px 0 30px;
    }

    .main-font-desc .section.gallery .item .caption {
        font-size: var(--fs-4);
        -webkit-backdrop-filter: saturate(190%) blur(3px);
        backdrop-filter: saturate(190%) blur(3px);
    }

    .page-width.p-gallery {
        max-width: 100%;
        padding: 0;
        overflow: hidden;
    }

    .main-font-desc .section.gallery {
        padding: 32px 0;
        margin: 64px auto;
        background-color: var(--c-grey-light-7);
    }

    .main-font-desc .section.gallery .photos-carusel {
        padding: 0 20px;
    }

    .main-font-desc .section.gallery .photo-wrapper img {
        border-radius: var(--br-4);
        box-shadow: 0 0 0 1px rgb(0 0 0 / 10%);
        max-width: 920px;
        height: 460px;
    }

    .main-font-desc .section.gallery .swiper-buttons {
        width: 48px;
        height: 48px;
        -webkit-backdrop-filter: saturate(190%) blur(2px);
        backdrop-filter: saturate(190%) blur(2px);
        background-color: rgba(0, 0, 0, 0.5);
        transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
        opacity: 0;
        color: var(--c-grey-dark-5);
    }

    .swiper-button-prev:after,
    .swiper-rtl .swiper-button-next:after {
        color: #fff;
        opacity: 0.8;
    }

    .main-font-desc .section.gallery .item .photo-wrapper::after {
        content: "";
        position: absolute;
        left: 10px;
        bottom: 10px;
        width: 28px;
        height: 28px;
        background: url(../img/icons/search.svg) 50% 50%/16px no-repeat;
        backdrop-filter: invert(15%);
        border-radius: 999px;
        opacity: 0;
        transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .font-p-designers .designer .about .wrapper p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: none;
        margin-top: -30px;
    }

    .pagination-container .item {
        margin: 0 5px;
    }

    .cart-sc .main-wrapper,
    .comments-faq-sc .page-width,
    .user-top .main {
        display: flex;
        justify-content: space-between;
    }

    .comments-faq-sc .comments-sc {
        width: calc(100% - 380px);
    }

    .recommended-posts {
        width: 350px;
        margin-top: 0;
    }

    .comments-faq-sc .comment-conatiner {
        padding: 15px;
        background-color: var(--c-grey-light-7);
        border-radius: var(--br-3);
        margin-bottom: 30px;
    }

    .comments-faq-sc .comment .profile {
        padding-bottom: 10px;
    }

    .comments-faq-sc .comment .reply-bt {
        border-radius: var(--br-round);
        cursor: pointer;
        font-size: 13px;
    }

    .comments-faq-sc .comment .name {
        display: inline-block;
        margin: 0 0 0 5px;
    }

    .comments-faq-sc .comment .date {
        margin-top: -5px;
    }

    .comments-faq-sc .comment .reply-to {
        display: inline-block;
        margin-bottom: 4px;
        color: var(--c-blue-2);
        font-weight: 300;
        font-variation-settings: "wght" 300;
    }

    .comments-faq-sc .comment .media {
        background-color: var(--c-grey-light-5);
        border-radius: var(--br-2);
        padding: 6px;
        box-shadow: inset 0 1px 0 rgb(209 209 214 / 30%), inset 0 -1px 0 #fff;
    }

    .comments-faq-sc .comment .c-body {
        padding-right: 75px;
    }

    .comments-faq-sc .comment.type-reply {
        padding: 0 75px 0 0;
        background-color: transparent;
    }

    .comments-faq-sc .comment.type-reply>.wrapper {
        background-color: #fff;
        padding: 15px;
        border-radius: var(--br-2);
    }

    .comments-faq-sc .comment .reply-bt:hover {
        background-color: var(--c-text-1) !important;
        color: #fff !important;
    }

    .comments-faq-sc .new-comment .avatar {
        width: 64px;
        height: 64px;
    }

    .comments-faq-sc .new-comment textarea {
        padding: 20px;
        line-height: 1.6;
    }

    .comments-faq-sc .new-comment .send-comment-bt button {
        width: 200px;
    }

    .comments-faq-sc .new-comment .file-attachment button {
        background-color: var(--c-grey-dark-2);
    }

    .blog-index-header .hero {
        padding: 100px 0;
    }

    .blog-index-header .b-main-title .title {
        font-size: var(--fs-extra);
    }

    .blog-index-header .page-container::before {
        background-repeat: repeat-x;
        background-size: auto;
        height: 500px;
        background-image: url(../img/pattern-4.svg);
    }

    .blog-index-header .b-main-title .sub {
        font-size: var(--fs-5);
        color: var(--c-grey);
    }

    .blog-index-header .b-featured-posts .post {
        margin: 0 0 0 15px;
        width: 278px;
    }

    .blog-index-content .cats-list .category {
        margin-left: 15px;
    }

    .designers-list .designers,
    .posts-stream .list-view {
        gap: 30px;
    }

    .posts-stream .card-post {
        width: calc(25% - 22.5px);
        margin-bottom: 30px;
    }

    .posts-stream .card-post .headline {
        max-height: 45px;
    }

    .posts-stream .card-post .top {
        font-size: var(--fs-2-5);
    }

    .blog-latest .post-cover {
        width: 100%;
        overflow: hidden;
    }

    .blog-post-content .entry-content-wrap {
        padding: 20px 0 0 15px;
    }

    .blog-post-content .related-posts {
        flex-shrink: 0;
        width: 340px;
        margin: 0;
        padding: 20px 15px 15px 0;
        border-top: none;
        border-right: 1px solid var(--c-grey-light-5);
    }

    .blog-post-content .related-posts .post-card {
        width: 100%;
        margin-bottom: 30px;
    }

    .blog-post-content .related-posts .post-stream {
        display: block;
        position: -webkit-sticky;
        position: sticky;
        top: 100px;
    }

    .blog-post-content .related-posts .thumb {
        width: 100px;
        height: 75px;
    }

    .blog-post-content .related-posts .hedline {
        color: var(--c-grey-dark-2);
        max-height: 50px;
        overflow: hidden;
    }

    .blog-post-content .posts-seo-tags {
        padding: 100px 0 30px;
        font-size: var(--fs-3);
    }

    .blog-post-header .headline {
        font-size: var(--fs-7);
        font-variation-settings: "wght" 700, "dots" 1;
        margin: 20px 0;
    }

    .blog-post-header .head,
    .faq-top .sc-title {
        padding-bottom: 40px;
    }

    .blog-post-header .meta .icon {
        width: 24px;
        height: 24px;
        margin-left: 5px;
        background-color: var(--c-grey-light-7);
        padding: 4px;
        border-radius: var(--br-1);
    }

    .faq-top .main-title {
        font-size: var(--fs-7);
        margin-bottom: 15px;
    }

    .faq-cats .item .title,
    .faq-content .answer,
    .faq-top .sub-title,
    .order-summary .header,
    .order-summary .main .sub-text,
    .tab-letter .form-control .input-wrapper.custom-check span {
        font-size: var(--fs-4);
    }

    .faq-top .sub-title {
        max-width: 100%;
    }

    .cart-sc.cart-empty .main-wrapper,
    .faq-cats {
        padding-top: 80px;
    }

    .faq-cats .list {
        border: none;
        gap: 30px;
    }

    .faq-cats .item {
        width: calc(25% - 23px);
        padding: 30px 15px;
        border: 1px solid var(--c-grey-light-4) !important;
        border-radius: var(--br-2);
        transition: border-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .faq-cats .item:hover {
        border: 1px solid var(--c-red-3) !important;
    }

    .faq-content {
        padding: 80px 0;
    }

    .faq-content .question-toggle .question {
        font-size: var(--fs-4);
        font-weight: 500;
        font-variation-settings: "wght" 500;
    }

    .faq-content .answer {
        font-weight: 300;
        font-variation-settings: "wght" 300;
    }

    .p-license-check .licenses-list {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
    }

    .p-license-check .license {
        width: calc(50% - 15px);
        transition: background-color 0.26s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .font-card .font-wrapper,
    .p-license-check .license .license-icon {
        transition: 0.26s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .p-license-check .license:hover .license-icon {
        background-color: rgb(255 255 255 / 100%);
        border: 1px solid var(--white);
    }

    .p-license-check-search .license {
        width: 620px;
    }

    .font-card {
        width: 100%;
        margin-bottom: 35px;
    }

    .font-card .font-wrapper {
        padding: 25px;
        overflow: hidden;
        height: 150px;
    }

    .font-card .oneliner,
    .font-card .thumb {
        height: 100px;
        transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .font-card .font-wrapper:hover {
        background-color: var(--c-grey-dark-5);
        box-shadow: 0 4px 8px -5px var(--c-text-1);
    }

    .font-card .thumb {
        order: 1;
        width: 100px;
        padding: 15px;
    }

    .font-card .details {
        order: 2;
        width: 300px;
        padding: 2px 15px 2px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .font-card .font-title .title {
        font-weight: 400;
        font-variation-settings: "wght" 400, "dots" 1;
        font-size: var(--fs-5);
        margin: 0;
    }

    .font-card .oneliner {
        order: 3;
        width: calc(100% - 400px);
        padding: 5px 10px;
        margin: 0;
        border: none;
        justify-content: flex-end;
    }

    .font-card .cta,
    .font-card .tag {
        transition: 0.26s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .font-card .oneliner img {
        transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .font-card .tag {
        margin-left: 10px;
    }

    .font-card .font-wrapper:hover .thumb {
        transform: translateX(126px);
        position: absolute;
    }

    .font-card .font-wrapper:hover .details {
        position: absolute;
        transform: translateX(426px);
    }

    .font-card .font-wrapper:hover .oneliner {
        justify-content: center;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 50%;
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
    }

    .font-card .font-wrapper:hover .oneliner img {
        filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(319deg) brightness(102%) contrast(101%);
        opacity: 0.9;
    }

    .font-card .cta {
        opacity: 0;
        left: -200px;
        display: flex;
        align-items: center;
        position: absolute;
        top: 55px;
        padding: 8px 15px 10px 5px;
        border-radius: var(--br-round);
        margin: auto;
        z-index: 2;
        background: var(--c-grey-dark-4);
    }

    .font-card .cta .title {
        color: var(--c-grey);
        font-weight: 300;
        font-variation-settings: "wght" 300, "dots" 1;
        padding-left: 10px;
        transition: color 0.26s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .recommended-posts .post-title,
    .user-top .details .phone {
        font-variation-settings: "wght" 700;
    }

    .font-card .cta:hover {
        background-color: var(--c-red);
    }

    .font-card .cta:hover .title {
        color: var(--white);
    }

    .font-card .purchased {
        width: 90px;
        top: 92px;
        left: auto;
        right: 30px;
        transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .font-card .font-wrapper:hover .purchased {
        transform: translateX(125px);
    }

    .font-card .desktop-link {
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 0;
    }

    .door-illu .glow,
    .door-illu .glow-b {
        height: 360px;
        margin: auto;
        width: 100px;
    }

    .fonts-list .modal__overlay {
        position: initial;
        background: 0 0;
        display: initial;
        animation: none !important;
        transition: none;
    }

    .fonts-list .modal__container {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        padding: 20px 0;
        animation: none !important;
        background-color: transparent;
        border-radius: 0;
        display: flex;
        justify-content: space-between;
    }

    .recommended-posts .post-summary,
    .recommended-posts .post-title {
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: none;
    }

    .fonts-list .contnet-filters .category .input-wrapper:first-child,
    .fonts-list .contnet-filters .category .input-wrapper:nth-child(2) {
        margin-left: 20px;
    }

    .fonts-list .contnet-filters .input-wrapper {
        margin-bottom: 0;
        display: initial;
    }

    .fonts-list .contnet-filters label {
        width: auto;
        font-size: var(--fs-3);
        color: var(--c-grey-dark-2);
    }

    .fonts-list .contnet-filters select {
        width: 168px;
        height: 48px;
        line-height: 48px;
        padding: 0 15px;
    }

    .fonts-list .contnet-filters .input-wrapper::after {
        left: 15px;
        top: 45px;
    }

    .designers-list {
        padding: 30px 0;
    }

    .designers-list .designer {
        width: calc(25% - 23px);
        margin-bottom: 20px;
    }

    .designers-list .designer .details {
        padding: 0 15px 20px;
    }

    .designers-list .designer .designer-name,
    .order-summary .main .message,
    .user-tabs .fonts-empty .text {
        font-size: var(--fs-6);
    }

    .designers-list .designer .divider {
        display: block;
        transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .designers-list .designer .font-icon {
        width: 42px;
        height: 42px;
        padding: 10px;
    }

    .designers-list .designer:hover .picture-wrapper img {
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
    }

    .designers-list .designer:hover .overlay {
        opacity: 0;
    }

    .designers-list .designer:hover .second-overlay {
        background: linear-gradient(180deg, hsl(240 3% 11% / 0%) 50%, hsl(240 3% 11% / 80%) 90%);
    }

    .designers-list .designer:hover .divider {
        margin: 18px auto;
        opacity: 0.5;
    }

    .designer-info .profile-photo {
        margin: -60px 0 0;
    }

    .designer-info .about {
        padding: 20px 0 80px;
    }

    .designer-info .other {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 15px;
        width: calc(100% - 148px);
    }

    .designer-info .about p {
        text-align: right;
        font-size: var(--fs-4);
        margin: 0;
    }

    .p-login .content-box .box {
        max-width: 930px;
        border: 1px solid var(--c-grey-light-5);
    }

    .new-login .content-box .box {
        border: 1px solid var(--c-gray-20) !important;
    }

    .new-login .content-box .box .main {
        width: 100%;
        flex-shrink: initial;
        padding: 0;
    }

    .content-box .box .main {
        padding: 25px 50px;
        width: 420px;
        flex-shrink: 0;
    }

    .content-box .box .right {
        width: calc(100% - 420px);
        justify-content: center;
        align-items: center;
        display: none;
    }

    .door-illu .glow-b:after,
    .door-illu .glow:after {
        z-index: -1;
        height: 100%;
        width: 100%;
        margin: 0 auto;
        transform: scale(0.75);
        animation: 5s infinite animateGlow;
        content: "";
        top: 0;
        right: 0;
        left: 0;
    }

    .door-illu {
        position: relative;
        width: 500px;
        height: 360px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .door-illu .bot-layer,
    .door-illu .top-layer {
        position: absolute;
        margin: auto;
    }

    .door-illu .glow {
        position: absolute;
        left: 170px;
    }

    .door-illu .glow:after {
        position: absolute;
        filter: blur(40px);
        background: linear-gradient(270deg, #fa4248, #fff);
        background-size: 300% 300%;
    }

    @keyframes animateGlow {

        0%,
        100% {
            background-position: 0 50%;
        }

        50% {
            background-position: 100% 50%;
        }
    }

    .door-illu .glow-b {
        position: absolute;
        left: 170px;
        top: 0;
    }

    .door-illu .glow-b:after {
        position: absolute;
        border-radius: 0 50px 50px 0;
        filter: blur(10px);
        background: linear-gradient(270deg, #fa4248d3, #fff);
        background-size: 300% 300%;
    }

    .cart-sc .main-wrapper .empty-illu {
        width: 230px;
    }

    .cart-sc.cart-empty.error-page .main-wrapper .empty-illu {
        width: 320px;
    }

    .cart-sc .main-wrapper .right-sc {
        width: calc(100% - 370px);
    }

    .cart-sc .main-wrapper .left-sc {
        margin-top: 0;
        width: 340px;
    }

    .cart-sc .items .item .thumb {
        width: 72px;
        height: 72px;
    }

    .cart-sc .items .item .license-icon .badge {
        width: 68px;
        height: 68px;
        margin: 2px 2px 0 0;
    }

    .cart-sc .items .item .info {
        flex-direction: row;
    }

    .cart-sc .items .item .title-details {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 5px 0;
        overflow: hidden;
    }

    .cart-sc .items .item .title-details .title {
        font-size: var(--fs-4);
        font-weight: 500;
        font-variation-settings: "wght" 500, "dots" 1;
    }

    .cart-sc .items .item .title-details .details {
        display: block;
        font-size: var(--fs-3);
        color: var(--c-grey);
        font-weight: 300;
        font-variation-settings: "wght" 300;
        height: 21px;
        overflow: hidden;
        white-space: nowrap;
    }

    .cart-sc .items .item .price-remove {
        flex-wrap: wrap;
        width: 150px;
        flex-shrink: 0;
    }

    .cart-sc .items .item .price-remove .remove-item {
        width: 38px;
        height: 30px;
        padding: 0;
        cursor: pointer;
        justify-content: center;
    }

    .cart-sc .items .item .price-remove .remove-item:hover .icon,
    .user-top .profile-act:hover .icon {
        animation: 0.8s rubberBand;
    }

    .cart-sc .items .item .price-remove .remove-item .icon {
        width: 19px;
        height: 19px;
        margin: 0;
    }

    .cart-sc .items .item .price-remove .price {
        width: 100%;
        text-align: left;
        margin-top: 18px;
        line-height: 0;
    }

    .cart-sc .main-wrapper .right-sc .divider {
        background-color: var(--c-grey-light-5);
        margin-top: 30px;
        margin-bottom: 20px;
    }

    .cart-sc .discount-steps .wrapper {
        padding: 30px;
        border-radius: var(--br-3);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .cart-sc .discount-steps .steps {
        margin: 0;
        width: 320px;
        flex-shrink: 0;
    }

    .cart-sc .discount-steps .texts .title {
        font-variation-settings: "wght" 900;
    }

    .cart-sc .discount-steps .texts .next-step {
        color: var(--c-grey-dark-2);
        font-size: var(--fs-4);
    }

    .pool-bedeh-pool-bedeh-bishtar {
        display: inline-flex;
        margin-top: 20px;
        height: 3.2em;
        box-shadow: 0 6px 16px -8px rgba(250, 68, 75, 0.5);
    }

    .cart-sc .discount-steps .step .step-col {
        transition: background-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .order-summary .box {
        padding: 25px;
    }

    .p-checkout-fail .order-summary .box {
        padding-bottom: 95px;
    }

    .order-summary .main .icon {
        width: 120px;
        height: auto;
    }

    .order-summary .order-items {
        padding-top: 20px;
    }

    .order-summary .item {
        margin: 0 0 15px;
        border-radius: var(--br-3);
    }

    .order-summary .item .wrapper {
        padding: 24px;
        align-items: center;
        border-radius: var(--br-3);
    }

    .order-summary .item .wrapper .end {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .order-summary .item .wrapper .end .loading-alert-download {
        bottom: -29px;
    }

    .order-summary .item .start {
        max-width: 700px;
        overflow: hidden;
    }

    .order-summary .item .badge,
    .order-summary .item .thumb {
        width: 68px;
        height: 68px;
    }

    .order-summary .item .title-details {
        width: calc(100% - 68px);
        padding: 5px 15px;
    }

    .order-summary .item .title-details .title {
        height: auto;
        font-size: var(--fs-4);
    }

    .order-summary .item .title-details .details {
        height: auto;
        font-size: var(--fs-3);
        font-weight: 300;
        font-variation-settings: "wght" 300;
    }

    .order-summary .item .font-dl-bt {
        width: 120px;
    }

    .order-summary .item .font-dl-bt .icon {
        margin-right: 20px;
        opacity: 0.4;
        display: none;
    }

    .order-summary .item .font-dl-bt span {
        display: inline-block;
        color: var(--white);
        font-weight: 300;
        font-size: var(--fs-3);
        font-variation-settings: "wght" 300;
    }

    .order-summary .item .license-details .row {
        width: 160px;
        display: flex;
        justify-content: space-between;
        margin: 8px 0;
    }

    .order-summary .item .license-details .title {
        color: var(--c-grey);
        font-weight: 300;
        font-variation-settings: "wght" 300;
    }

    .user-top .actions {
        flex-direction: column;
        justify-content: space-between;
        padding: 0;
    }

    .user-top .profile-photo {
        width: 100px;
        height: 100px;
    }

    .user-top .sign-out {
        bottom: -5px;
    }

    .user-top .details {
        font-size: var(--fs-4);
        color: var(--c-grey-dark-4);
    }

    .user-top .profile-act {
        transition: border-color 0.26s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .tabs.user-tabs .tabs-header .tablink {
        padding: 15px 25px;
    }

    .user-tabs .fonts-empty {
        padding: 60px 20px;
    }

    .user-tabs .fonts-empty .illu {
        width: 250px;
    }

    .orders-list .item .font-details {
        display: flex;
        width: calc(100% - 160px);
        align-items: center;
    }

    .orders-list .item .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        padding-bottom: 15px;
    }

    .orders-list .item .top::after {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 -15px;
        content: "";
        border-bottom: 1px dashed var(--c-grey-light-5);
        width: calc(100% + 30px);
    }

    .orders-list .item .thumb {
        margin: 0;
        width: 64px;
        height: 64px;
    }

    .orders-list .item .info {
        padding: 3px 15px 3px 0;
        width: calc(100% - 72px);
        text-align: right;
    }

    .orders-list .item .font-title {
        font-size: var(--fs-4);
        padding-bottom: 10px;
        font-variation-settings: "wght" 400, "dots" 1;
    }

    .orders-list .item .more {
        justify-content: flex-start;
        padding: 0;
        font-size: var(--fs-3);
    }

    .orders-list .item .more .designer {
        color: var(--c-blue-3);
        cursor: pointer;
    }

    .orders-list .item .top .actions,
    .promo-code,
    .promo-code .trail .date {
        padding-top: 0;
    }

    .orders-list .item .top .actions .dl-btn {
        width: 140px;
    }

    .orders-list .item .dl-btn .icon {
        position: initial;
        margin-left: 10px;
        transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .orders-list .item .top .actions .dl-btn:hover img {
        animation: 0.8s rubberBand;
        opacity: 0.8;
    }

    .orders-list .item .font-licenses {
        padding-top: 15px;
        margin-top: 0;
        border: none;
    }

    .orders-list .item .licenses-list {
        margin: 0 0 15px;
        display: block;
        padding: 15px;
        border-radius: var(--br-3);
        background-color: var(--c-grey-light-5);
        box-shadow: inset 0 -1px 0 0 #fff, inset 0 1px 0 0 rgb(0 0 0 / 2%);
    }

    .orders-list .item .license {
        margin: 0 0 15px !important;
        width: 100%;
        display: flex;
        border: none;
    }

    .orders-list .item .license:last-child {
        margin-bottom: 0 !important;
    }

    .orders-list .item .license .start {
        width: calc(100% - 405px);
        align-items: center;
    }

    .orders-list .item .license .badge {
        width: 48px;
        height: 48px;
    }

    .orders-list .item .license .l-info {
        width: calc(100% - 48px);
        padding: 0 10px 0 0;
        font-size: var(--fs-3);
    }

    .orders-list .item .owner {
        display: flex;
        gap: 10px;
    }

    .orders-list .item .license .type {
        font-size: var(--fs-3);
        font-weight: 500;
        font-variation-settings: "wght" 500;
        margin-bottom: 3px;
    }

    .orders-list .item .license-details {
        order: 2;
        width: 200px;
        padding: 5px 0 0 15px;
        text-align: left;
        font-size: var(--fs-2-5);
    }

    .orders-list .item .license .actions {
        order: 3;
        width: 205px;
        flex-direction: row;
        gap: 15px;
        justify-content: flex-end;
        margin: 0;
    }

    .orders-list .item .license .actions .btn {
        height: 48px;
        font-size: var(--fs-3);
        color: var(--c-grey-dark-2);
        background-color: var(--c-grey-light-7);
    }

    .orders-list .item .license .actions .btn.edit {
        width: 130px;
    }

    .orders-list .item .license .actions .btn.website-script {
        width: 60px;
    }

    .orders-list .item .license .website-script .icon {
        opacity: 0.7;
    }

    .orders-list .item .license-desk-act {
        display: flex;
        gap: 15px;
        justify-content: flex-start;
    }

    .orders-list .item .license-desk-act .btn:hover {
        border: 1px solid hsl(240deg 10% 89%);
        box-shadow: 0 4px 8px -3px rgb(27 27 29 / 10%);
    }

    .standard-table td.td-fit {
        white-space: nowrap;
        width: 1%;
        text-align: center;
    }

    .tab-gifts .create-gift-card {
        display: flex;
        justify-content: center;
    }

    .afilliate-sign-up .form-wrapper .input-wrapper:nth-child(2),
    .tab-affiSetting .box .input-wrapper.form-buttons button,
    .tab-afilliate .afilliate-hero .afli-sign-up-link,
    .tab-gifts .create-gift-card a,
    .tab-letter .box .form-buttons .submit-bt {
        width: 300px;
    }

    .afilliate-sign-up .box,
    .tab-letter .box {
        padding: 30px;
    }

    .tab-afilliate .afilliate-hero .wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .tab-afilliate .afilliate-hero .start {
        font-size: var(--fs-4);
        margin: 0;
    }

    .m-license-script .codearea {
        padding: 10px;
        height: 145px;
    }

    .select-license-modal.user-dash-l-modal .l-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 200;
        border-radius: 0;
        padding: 0;
    }

    .create-gift-card .gift-amount .value {
        font-size: 84px;
    }

    .afilliate-sign-up .wrapper {
        background-color: #fff;
        padding: 35px 25px;
        border-radius: var(--br-2);
        margin-bottom: 30px;
    }

    .afilliate-sign-up .introduction .desc {
        text-align: center;
        margin: 0 auto;
        font-size: var(--fs-3);
    }

    .afilliate-sign-up .form-wrapper {
        display: flex;
        justify-content: space-between;
        padding: 0;
    }

    .afilliate-sign-up .afilliate-links {
        max-width: 560px;
        margin: 0 auto;
    }

    .tab-affiSetting .box {
        padding: 10px 30px 30px;
    }

    .tab-affiSetting .box .container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .orders-list .item .licenses-list .license:only-child,
    .tab-affiSetting .box .sc-title {
        width: 100%;
    }

    .tab-affiSetting .box .container .input-wrapper {
        width: 32%;
    }

    .purchase-options .licenses .remove-license {
        top: -10px;
        right: 10px;
    }

    .purchase-options .licenses .remove-license:hover {
        background-color: var(--c-grey-dark-5);
        border: 1px solid var(--c-grey-dark-5);
        color: var(--red);
    }

    .contact-page .main-wrapper {
        padding: 30px;
        background-color: var(--c-grey-light-8);
        border-radius: var(--br-4);
        justify-content: space-between;
        align-items: flex-start;
    }

    .contact-page .main-wrapper .start {
        width: 50%;
    }

    .contact-page .main-wrapper .end {
        width: calc(50% - 80px);
        margin: 0;
        padding: 0;
        background-color: transparent;
    }

    .contact-page .main-wrapper .content {
        padding: 0;
        background-color: transparent;
        border-radius: 0;
    }

    .contact-page .contact-form {
        padding: 25px 0 0;
        background-color: transparent;
        border-radius: 0;
        border-top: 1px solid var(--c-grey-light-5);
    }

    .contact-page .support-faq {
        padding: 0;
        background-color: transparent;
        margin: 0;
    }

    .p-page .blog-post-header .head {
        padding: 30px 30px 5px;
    }

    .p-page .blog-post-content .main-wrapper {
        padding: 0 30px;
    }

    .orders-list .item .licenses-list .license:first-child {
        margin-right: auto;
    }

    .orders-list .item .licenses-list .license:last-child {
        margin-left: auto;
    }

    .p-checkout-success .promo-code {
        padding-top: 30px;
        padding-bottom: 80px;
    }

    .promo-code .main-wrapper {
        flex-direction: row;
        justify-content: space-between;
        text-align: right;
        align-items: center;
        border-radius: 12px;
        padding: 10px;
        background-color: rgb(200 230 201 / 35%);
        border-color: rgb(165 214 167 / 75%);
    }

    .promo-code .lead .title {
        display: flex;
        font-size: var(--fs-3);
        gap: 3px;
    }

    .promo-code .trail {
        display: flex;
        flex-direction: row-reverse;
        gap: 10px;
        align-items: center;
    }

    .promo-code .trail .code {
        background-color: rgb(165 214 167 / 50%);
    }

    .orders-list .item .top .actions {
        padding-bottom: 16px;
    }

    .loading-alert-download {
        position: absolute;
        left: 0;
        bottom: 4px;
    }

    .fsvnew .options .slider-title {
        font-size: 16px;
        padding-top: 4px;
    }

    .recommended-posts .post-stream {
        border: 1px solid var(--c-grey-light-4);
        border-radius: var(--br-3);
        overflow: hidden;
    }

    .recommended-posts .post-card {
        padding: 16px;
        margin-bottom: 0;
        margin-top: 0;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid var(--c-grey-light-4);
        transition: 250ms cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .recommended-posts .post-card:hover {
        background-color: var(--c-grey-light-8);
    }

    .recommended-posts .post-image {
        width: 96px;
        height: 96px;
    }

    .recommended-posts .post-title {
        margin-bottom: 4px;
        font-weight: 700;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        font-size: var(--fs-2-5);
    }

    .recommended-posts .post-summary {
        display: block;
        font-size: var(--fs-2-5);
        color: var(--c-text-tertiary);
        display: -webkit-box;
        -webkit-line-clamp: 1;
    }

    .p-designer-view .breadcrumb-container,
    .p-contact .breadcrumb-container {
        display: block;
    }

    .npo {
        background-color: transparent;
        --bundle-height: 78px;
    }

    .npo .main-wrapper {
        background-color: var(--c-grey-light-7);
        border-radius: 24px;
        overflow: hidden;
        display: flex;
        padding: 12px;
        gap: 12px;
    }

    .npo .options {
        padding: 12px;
        background-color: #fff;
        border-radius: 16px;
        flex-grow: 1;
    }

    .npo .bundle {
        border-radius: 10px;
        overflow: visible;
    }

    .npo .bundle::after {}

    .npo .bundles-wrapper>label input:checked~.bundle::after {
        content: "";
        position: absolute;
        width: 15px;
        height: 24px;
        margin: auto;
        top: 0;
        bottom: 0;
        left: -12px;
        background-image: url(../img/icons/bundle-desktop-preview-triangle.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 1;
        transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .npo .bundle .bundle-info {
        padding-bottom: 0;
    }

    .npo .bundle .bundle-info .title {
        font-size: 20px;
    }

    .npo .bundle .price {
        position: relative;
        padding: 0 8px 0 16px;
        margin: 0;
        top: auto;
        right: auto !important;
    }

    .npo .bundle .purchased-badge {
        position: absolute;
        left: 15px;
        bottom: 5px;
        z-index: 2;
    }

    

    .npo .bundle .current-price .amount {
        font-size: 20px;
    }

    .npo .side-preview {
        width: 420px;
        display: block;
        flex-shrink: 0;
    }

    .npo .bundle-preview-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
    }

    .npo .bundle-preview-image.active {
        display: block;
    }

    .npo .bundle .preview-toggle {
        display: none;
        pointer-events: none;
    }

    .npo .bundle .mobile-preview {
        display: none;
    }

    .npo .bundles-wrapper>label.purchased .price:has(.purchased-badge) {
        position: relative;
        right: auto;
    }

    .npo .bundles-wrapper>label.purchased .price:has(.purchased-badge) .old-price,
    .npo .bundles-wrapper>label.purchased .price:has(.purchased-badge) .current-price {
        display: block;
        padding-bottom: 32px;
    }

    .npo .licenses {
        border: 2px dashed var(--c-gray-30);
        padding: 16px;
        border-radius: 16px;
    }

    .npo .licenses .header {
        margin-bottom: 16px;
    }

    .npo .licenses-wrapper {
        gap: 6px;
    }

    .npo .license .info {
        align-items: center;
    }

    .npo .license .info .title {
        flex-direction: row;
        align-items: baseline;
        gap: 5px;
    }

    .npo .license .info .title>* {}

    .npo .license .info .title .badge {
        padding: 3px 8px 2px 8px;
        border-radius: 6px;
        background: hsl(0 0% 93% / 1);
    }

    .npo .license .info .title .text {
        font-size: 16px;
    }

    .npo .license-option.active::after {
        top: 24px;
        height: calc(100%);
    }

    .npo .licenses .header .title {
        font-weight: 400;
        color: var(--c-gray-60);
    }

    .npo .license .details>.inner {
        background-color: hsl(0deg 0% 95%);
        padding: 12px;
        border-radius: 8px;
    }

    .npo .license-option.active.main-active .inner::before {
        border-color: transparent transparent hsl(0deg 0% 95%) transparent;

    }

    .npo .license .license-description {
        padding: 0;

        margin-bottom: 15px;
    }

    .npo .license .license-inputs {
        padding: 0;
        border-top: none;
    }

    .npo .section.total {
        display: flex;
        justify-content: space-between;
        border-top: none;
        padding-top: 0;
        margin-top: 28px;
    }

    .npo .section.total .total-wrapper {
        margin-bottom: 0;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: -3px;
    }

    .npo .section.total .add-to-cart {
        padding-top: 0;
    }

    .npo .section.total .total-wrapper .title {
        color: var(--c-gray-60);
        font-weight: 300;
        font-variation-settings: "wght" 300;
    }

    .npo .section.total .total-wrapper .value {
        flex-direction: row-reverse;
    }

    .npo .section.total .total-wrapper .discount {
        opacity: 0;
    }

    .npo .section.total .total-wrapper .total .amount {
        font-size: 28px;
    }

    .npo .section.total .add-to-cart {
        padding-top: 0;
        width: 342px;
        align-items: end;
    }

    .npo .section.total .add-to-cart-btn {
        margin: 0;
        border-radius: 10px;
        transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .npo .section.total .add-to-cart-btn:hover {
        background-color: hsl(358deg 75% 50%);
    }

    .npo .license-input-wrapper input {
        border-radius: 5px;
    }

    .font-p .font-inuse-carousel {
        border-top: none;
    }

    .font-p .font-inuse-carousel .page-width {
        padding: 0 15px;
    }

    .font-p .font-inuse-carousel .inuse-wrapper {
        border-radius: 24px;
        background-color: var(--c-grey-light-7);
        padding: 16px 0;
    }

    .inuse-carousel .inuse-header {
        margin-bottom: 0;
        margin: 24px auto;
    }

    .font-inuse-carousel .inuse-header .trail .icon {
        display: block;
    }

    .inuse-carousel .inuse-item {
        background-color: #fff;
        border-color: transparent;
        cursor: pointer;
    }

    .inuse-carousel .inuse-item:hover {
        border-color: var(--c-gray-30);
    }

    .inuse-carousel .inuse-item .thumbnail {
        height: 460px;
        max-height: 460px;
    }

    .inuse-carousel .inuse-item .fonts {
        background-color: transparent;
        padding: 8px 0;
    }

    .inuse-item .info {
        padding-top: 20px;
    }

    .inuse-item .details>.title {
        font-size: var(--fs-3);
    }

    .inuse-item .details .designer {
        font-size: var(--fs-2);
    }

    .inuse-modal .modal_close_bt {
        background-color: #fff;
        top: 42px;
        border-radius: 12px 12px 0 0;
        right: 48px;
        padding: 0 12px;
        height: 38px;
        transition: all 0.25s ease;
    }

    .inuse-modal .modal_close_bt span {
        color: #3a3a3a;
        transition: all 0.25s ease;
    }

    .inuse-modal .modal_close_bt svg {
        opacity: 0.7;
        transition: all 0.25s ease;
    }

    .inuse-modal .modal_close_bt svg path {
        stroke: #000;
    }

    .inuse-modal .modal_close_bt:hover span {
        color: #000;
    }

    .inuse-modal .modal_close_bt:hover svg {
        opacity: 1;
    }

    .inuse-modal .modal-section.footer {
        display: none;
    }

    .inuse-modal .modal__container {
        width: 100%;
        border-radius: 0;
        padding: 24px 2px;
        padding-bottom: 0;
    }

    .inuse-modal .modal-wrapper {
        border-radius: 0;
        position: relative;
        direction: ltr;
    }

    .inuse-modal .modal-content {
        max-width: 1080px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 24px;
        direction: rtl;
    }

    .inuse-modal .modal-section.info {
        padding: 0;
        height: 100%;
    }

    .inuse-modal .modal-section.info .modal-section-inner {
        position: sticky;
        top: 0;
        height: fit-content;
    }

    .inuse-modal .modal-section.description {
        grid-column: 1 / 3;
    }

    .inuse-modal .cover-photo .image-wrapper {
        border-radius: 12px;
    }

    .inuse-modal .info .details {
        background-color: transparent;
        border: 1px solid var(--c-gray-30);
        border-radius: 12px;
    }

    .inuse-modal .info .details .title {
        font-weight: 400;
        font-variation-settings: "wght" 400;
        color: var(--c-text);
    }

    .inuse-modal .info .designer {
        font-weight: 700;
        font-variation-settings: "wght" 700;
        color: var(--c-text);
        transition: all 0.2s ease;
        margin-top: 8px;
    }

    .inuse-modal .info .details .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        font-size: var(--fs-2-5);
        font-weight: 300;
        font-variation-settings: "wght" 300;
        color: var(--c-text-tertiary);
        margin-top: 16px;
    }

    .inuse-modal .info .details .tags .tag {
        padding: 4px 8px;
        border: 1px solid var(--c-gray-20);
        border-radius: 999px;
    }

    .inuse-modal .info .fonts {
        margin-top: 24px;
        background-color: transparent;
        overflow: initial;
        overflow-x: initial;
        border-top: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .inuse-modal .fonts .font {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        width: 100%;
        background-color: var(--c-grey-light-7);
        border-radius: 12px;
        overflow: hidden;
    }

    .inuse-modal .font-thumb {
        width: 96px;
        height: 96px;
    }

    .inuse-modal .font-thumb img {
        max-width: 52px;
        max-height: 52px;
    }

    .inuse-modal .font-details {
        padding: 0;
    }

    .inuse-modal .font-title {
        font-size: var(--fs-4);
        font-weight: 400;
        font-variation-settings: "wght" 400, "dots" 1;
        margin: 0;
    }

    .inuse-modal .font-price {
        margin-bottom: 4px;
    }

    .inuse-modal .font-price .font-value {
        font-weight: 700;
        font-variation-settings: "wght" 700;
        font-size: var(--fs-4);
    }

    .inuse-modal .font-price .font-currency {
        font-size: var(--fs-2);
    }

    .inuse-modal .font-details .font-tags {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 22px;
    }

    .inuse-modal .font-tag {
        flex-shrink: 0;
        font-size: var(--fs-2);
        color: var(--c-grey-dark-2);
        background-color: var(--white);
        flex-shrink: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 22px;
        padding: 0 8px;
        border-radius: 999px;
        line-height: 22px;
    }

    .inuse-modal .modal-section.description {
        /* margin-top: 24px; */
        padding-bottom: 64px;
        /* background-color: var(--c-grey-light-7); */
    }
    .inuse-modal .grid-container {
        width: 100%;
        grid-column: 1 / 3;
    }
    
    .inuse-modal .grid-item {

    }
    .inuse-modal .grid-item .photo-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .inuse-modal .grid-item .photo-wrapper img {
        max-width: 100%;
        max-height: 860px;
    }
        
    .inuse-modal .grid-container:has(> :nth-child(2)) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .inuse-modal .grid-container:has(> :nth-child(2)) .grit-item {
        width: calc(50%-12px);
    }

    .inuse-modal .description p {
        max-width: 100%;
    }

    .p-inuse .inuse-item .thumbnail img {
        max-width: 100%;
        max-height: 100%;
    }

    .inuse-page .page-header {
        padding-top: 64px;
        padding-bottom: 36px;
    }

    .inuse-page .page-header .page-title {
        font-size: var(--fs-6);
    }

    .inuse-page .inuse-item>.wrapper {
        padding: 0;
        background-color: transparent;
    }

    .inuse-page .inuse-item .thumbnail {
        border-radius: 12px;
        position: relative;
        cursor: pointer;
    }

    .inuse-page .inuse-item .thumbnail::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.1);
    }

    .inuse-page .inuse-item .info {
        padding-top: 6px;
        gap: 10px;
    }

    .inuse-page .inuse-item .font {
        background-color: var(--c-grey-light-7);
    }

    .inuse-page .inuse-item .font:hover {
        background-color: var(--c-grey-light-5);
    }

    .inuse-page .inuse-item {
        margin-bottom: 48px;
    }

    .inuse-page .inuse-stream {
        padding-bottom: 48px;
    }
}

/* qqqq */
@media only screen and (min-width: 1200px) {
    .main-nav .mega-menu-wrapper {
        width: 1180px;
    }

    .main-nav .menu-banners {
        display: none;
        position: absolute;
        bottom: 10px;
        left: 10px;
    }

    .main-nav .font-lab-banner {
        position: relative;
        display: block;
        height: 296px;
        width: 280px;
    }

    .main-nav .font-lab-banner .wrapper {
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
        height: 190px;
        background: linear-gradient(0deg, #f9f9fb 30%, rgba(255, 255, 255, 0) 100%);
        border-radius: var(--br-3);
    }

    .main-nav .font-lab-banner .title {
        position: absolute;
        font-size: 26px;
        font-variation-settings: "wght" 800, "dots" 1;
        top: 105px;
        right: 0;
        left: 0;
        margin: 0 auto;
        text-align: center;
        width: 200px;
        transition: color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .main-nav .font-lab-banner .caption,
    .main-nav .font-lab-banner .view {
        transition: color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
        position: absolute;
    }

    .main-nav .font-lab-banner .caption {
        font-size: 13px;
        font-weight: 300;
        font-variation-settings: "wght" 500;
        top: 140px;
        right: 0;
        left: 0;
        margin: 0 auto;
        width: 200px;
        text-align: center;
        z-index: 10;
        color: hsl(240deg 4% 27%);
    }

    .main-nav .font-lab-banner .view {
        left: -5px;
        bottom: 15px;
        width: 80px;
        font-variation-settings: "wght" 400;
        font-size: 14px;
        display: none;
    }

    .main-nav .font-lab-banner .view::after {
        content: "";
        position: absolute;
        height: 6px;
        width: 6px;
        top: 6px;
        left: 20px;
        transform: rotate(-135deg);
        border-style: solid;
        border-color: var(--c-red-3);
        border-width: 2px 2px 0 0;
        transition: 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .main-nav .font-lab-banner img {
        position: absolute;
        right: 10px;
        top: -115px;
    }

    .main-nav .font-lab-banner:hover .wrapper {
        background: linear-gradient(0deg, #ececf0 25%, rgba(255, 255, 255, 0) 100%);
    }

    .main-nav .font-lab-banner:hover .title {
        color: var(--c-red);
    }

    .index-carousel .page-container {
        padding: 30px 0;
    }

    .index-carousel .page-width {
        background: var(--c-grey-light-7);
        background: linear-gradient(0deg, #fff0 0, var(--white));
    }

    .index-f-cats .icon {
        display: initial;
        z-index: -1;
    }

    .p-index .licenses .summary-licenses {
        width: 420px;
    }

    .p-index .license {
        padding: 18px 0;
    }

    .blog-latest .post {
        width: 280px;
        margin-left: 23px;
    }

    .blog-latest .post-cover {
        width: 280px;
        height: 210px;
    }

    .footer .brands-carousel {
        padding: 20px 0 15px;
    }

    .purchase-options .box,
    .purchase-options .main-wrapper {
        padding: 20px;
    }

    .purchase-options .bundles .bundle-option {
        margin-bottom: 20px;
    }

    .npo .main-wrapper {
        padding: 16px;
    }

    .npo .options {
        padding: 16px;
    }

    .npo .side-preview {
        width: 460px;
    }
}

/* zzzzz */
@media only screen and (max-height: 600px) {
    .main-nav .nav-footer {
        display: none;
    }
}

.firefox header {
    background-color: #fff;
}

@media print {

    blockquote,
    img,
    pre,
    tr {
        page-break-inside: avoid;
    }

    *,
    ::after,
    ::before {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }

    abbr[title]::after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }

    blockquote,
    pre {
        border: 1px solid #999;
    }

    thead {
        display: table-header-group;
    }

    h2,
    h3,
    p {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

#lang option {
    color: #000;
}