:root {
    /* Design colors */
    --fuchsia-900: #6F1877;
    --fuchsia-800: #821890;
    --fuchsia-700: #9F1AB1;
    --fuchsia-600: #BA24D5;
    --fuchsia-500: #D444F1;
    --fuchsia-400: #E478FA;
    --fuchsia-300: #EEAAFD;
    --fuchsia-200: #F6D0FE;
    --fuchsia-100: #FBE8FF;
    --fuchsia-50: #FDF4FF;
    --fuchsia-25: #FEFAFF;

    /* Secondary colors */
    --yellow-400: #FAC515;
    --yellow-700: #A15C07;
    --orange: #F38744;
    --moss: #86CB3C;
    --blue: #53B1FD;
    --blue-dark: #528BFF;
    --violet: #9B8AFB;
    --white: #FFFFFF;
    --neutral-800: #193765;
    --neutral-600: #6F7F96;
    --facebook-color: #0D88F0;
    --linkedin-color: #0078c7;
    --ai-color: #00A67E;
    /* Basic colors */
    --gray-900: #101828;
    --gray-800: #1D2939;
    --gray-700: #344054;
    --gray-600: #475467;
    --gray-500: #667085;
    --gray-400: #98A2B3;
    --gray-300: #D0D5DD;
    --gray-200: #EAECF0;
    --gray-100: #F2F4F7;
    --gray-50: #F9FAFB;
    --gray-25: #FCFCFD;

    /* Font family */
    --primary-font-family: 'Inter', sans-serif;

    /* Font size - Heading */
    --fs-h1: 60px;
    --fs-h2: 48px;
    --fs-h3: 36px;
    --fs-h4: 30px;
    --fs-h5: 24px;
    --fs-h6: 18px;

    /* Line height - Heading */
    --lh-h1: 72px;
    --lh-h2: 60px;
    --lh-h3: 44px;
    --lh-h4: 38px;
    --lh-h5: 32px;
    --lh-h6: 28px;

    /* Font size - Basic */
    --fs-b1: 14px;
    --fs-b2: 16px;
    --fs-b3: 18px;
    --fs-b4: 20px;
    --fs-b5: 24px;

    /* Line height - Basic */
    --lh-b1: 20px;
    --lh-b2: 24px;
    --lh-b3: 28px;
    --lh-b4: 30px;
    --lh-b5: 32px;

    /* Font weight */
    --fw-bold: 700;
    --fw-semi-bold: 600;
    --fw-medium: 500;
    --fw-regular: 400;

    /* Border radius */
    --br-2: 2px;
    --br-4: 4px;
    --br-6: 6px;
    --br-8: 8px;
    --br-12: 12px;
    --br-16: 16px;
    --br-20: 20px;

    /* Box shadow */
    --box-shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
    --box-shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    --box-shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    --box-shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
}

/* ==============================
        Basics
============================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--primary-font-family);
    font-size: var(--fs-b2);
    font-weight: var(--fw-regular);
    line-height: var(--lh-b2);
    color: var(--gray-900);
    background-color: #f9f9f9;
    padding-top: 80px;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--fw-semi-bold);
    letter-spacing: -0.02em;
}

h1, .heading-1 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
}

h2, .heading-2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
}

h3, .heading-3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
}

h4, .heading-4 {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
}

h5, .heading-5 {
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
}

h6, .heading-6 {
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

img {
    user-select: none;
}

input {
    outline: none;
}

section {
    padding: 96px 0;
}

.overflow-hidden {
    overflow: hidden;
}

.container {
    padding:  0 20px;
}

/* Selection */

::selection {
    background: var(--fuchsia-200);
    color: var(--gray-900);
}

/* Scrollbar */

.nice-scrollbar-primary::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.nice-scrollbar-primary::-webkit-scrollbar-button {
    width: 0;
    height: 0;
}

.nice-scrollbar-primary::-webkit-scrollbar-thumb {
    background: var(--fuchsia-900);
    border-radius: var(--br-6);
}

.nice-scrollbar-primary::-webkit-scrollbar-track {
    background: #f9f9f9;
    border-radius: var(--br-6);
}

.nice-scrollbar-primary::-webkit-scrollbar-corner {
    background: transparent;
}

html, .nice-scrollbar-primary {
    scrollbar-color: var(--fuchsia-900) #f9f9f9;
    scrollbar-width: thin;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(52, 64, 84, 0.7);
    backdrop-filter: blur(8px);
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    z-index: 9999999;
    opacity: 0;
    visibility: hidden;
    transition: all 250ms ease-in-out;
    display: none;
}

.modal.show {
    display: block;
}

.modal.fade-in {
    visibility: visible;
    opacity: 1;
}

.modal-dialog {
    position: relative;
    display: flex;
    align-items: center;
    height: calc(100% - 48px);
    width: calc(100% - 24px);
    pointer-events: none;
    max-width: 580px;
    margin: 24px auto;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 100%;
    padding: 12px;
    pointer-events: auto;
    background-color: var(--fuchsia-900);
    box-shadow: var(--box-shadow-xl);
    border-radius: 20px;
    /*overflow: hidden;*/
    transform: translateY(-100px);
    transition: transform 250ms ease-in-out;
}

.modal.fade-in .modal-content {
    transform: translateY(0);
}

.modal-header, .modal-body, .modal-footer {
    padding: 12px;
}

.modal-header {
    position: relative;
    display: flex;
    flex-direction: column;
    color: var(--white);
    text-align: center;
}

.modal-header .btn-close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    outline: none;
    cursor: pointer;
}

.modal-header .btn-close-modal svg {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.modal-header .btn-close-modal svg path {
    stroke: var(--white);
}

.modal-body {
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#promotion-modal .modal-dialog {
    max-width: 740px;
}

#promotion-modal .modal-content {
    background: var(--white);
    position: relative;
}

#promotion-modal .modal-header .btn-close-modal svg path {
    stroke: var(--gray-500);
}

#promotion-modal .modal-body {
    text-align: center;
    padding: 38px 68px 38px;
}

#promotion-modal .modal-footer {
    gap: 12px;
    justify-content: center;
    padding-bottom: 38px;
}

#promotion-modal .modal-footer .btn-close-modal {
    border: 1px solid var(--fuchsia-50);
    color: var(--fuchsia-900);
}

#promotion-modal .modal-footer .btn-close-modal:hover {
    border-color: var(--fuchsia-50);
    background-color: var(--fuchsia-50);
}

#promotion-modal .modal-body .image {
    background: url("../images/promotion/promotion-bg.webp") no-repeat center/cover;
}

#promotion-modal .modal-body img {
    max-width: 428px;
    object-fit: contain;
}

#promotion-modal .modal-body span {
    color: var(--gray-900);
    font-size: var(--fs-b5);
    line-height: var(--lh-b5);
    font-weight: var(--fw-semi-bold);
    margin-top: 40px;
}

#promotion-modal .modal-body p {
    color: var(--gray-600);
    text-align: center;
    font-size: var(--fs-b3);
    font-weight: var(--fw-medium);
    line-height: var(--lh-b3);
}

@keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(251, 232, 255, 0.75);
        box-shadow: 0 0 0 0 rgba(251, 232, 255, 0.75);
    }

    80% {
        -webkit-box-shadow: 0 0 0 20px rgba(255, 134, 134, 0);
        box-shadow: 0 0 0 20px rgba(255, 134, 134, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 134, 134, 0);
        box-shadow: 0 0 0 0 rgba(255, 134, 134, 0);
    }
}

#discount-modal .modal-dialog {
    max-width: 700px;
}

#discount-modal .modal-dialog > div {
    position: relative;
}

#discount-modal .snow {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 30px);
}

#discount-modal .modal-content {
    position: relative;
    background-color: #151A35;
    gap: 26px;
    background-image: url("../images/new-year-modal-bg.png");
    background-position: bottom right   ;
    background-repeat: repeat no-repeat;
    background-size: auto 100%;
    overflow: hidden;
}

#discount-modal .modal-content .tree {
    position: absolute;
    width: 196px;
    bottom: -26px;
    left: -70px;
}

#discount-modal .modal-content .tree:last-of-type {
    width: 150px;
    left: auto;
    right: -10px;
}

#discount-modal .modal-header {
    align-items: center;
    gap: 16px;
}

#discount-modal .modal-header p {
    text-transform: uppercase;
    font-size: 22px;
}

#discount-modal .modal-header .discount-percent {
    height: 80px;
    object-fit: contain;
    margin-bottom: 8px;
    margin-top: 20px;
}

#discount-modal .modal-body {
    align-items: center;
    padding: 32px 12px;
}

#discount-modal .countdown {
    justify-content: center;
    margin-top: 0;
}

#discount-modal .countdown > span {
    color: #fff;
    font-size: 24px;
}

#discount-modal .countdown .countdown-item {
    width: 100px;
    height: 100px;
}

#discount-modal .countdown .countdown-item .count {
    font-size: 36px;
    line-height: 1;
}

#discount-modal .countdown .countdown-item .label {
    margin-top: 8px;
    font-size: var(--fs-b2);
    line-height: var(--lh-b2);
    color: var(--gray-500);
}

#discount-modal .modal-footer {
    justify-content: center;
}

#discount-modal .modal-footer .btn-general {
    background-color: #D80027;
    border: none;
    color: #fff;
    padding: 8px 16px;
    width: 270px;
    text-transform: uppercase;
    margin-bottom: 60px;
}

.new-feature-banner {
    background: var(--fuchsia-900);
    padding: 12px 0;
    display: none;
    border-bottom: 3px solid var(--orange)
}

.new-feature-banner.show {
    display: block;
}

.new-feature-content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
}

.new-feature-content .new-feature-title {
    font-size: var(--fs-b5);
    line-height: var(--lh-b5);
    font-weight: var(--fw-semi-bold);
    flex-shrink: 0;
}

.new-feature-content .new-feature-content {
    margin: 0 24px;
}

.btn-close-new-feature-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    outline: none;
    cursor: pointer;
    margin-left: 24px;
}

.btn-close-new-feature-banner svg {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.btn-close-new-feature-banner svg path {
    stroke: var(--white);
}

.btn-general {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--primary-font-family);
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    font-weight: var(--fw-medium);
    color: var(--gray-900);
    background-color: var(--white);
    padding: 12px 20px;
    border: 1px solid var(--gray-300);
    height: 48px;
    flex-shrink: 0;
    min-width: 122px;
    cursor: pointer;
    border-radius: var(--br-8);
    transition: all 250ms ease-in-out;
}

.btn-general > *:not(:last-child) {
    margin-right: 8px;
}

.btn-general svg {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.btn-general svg path {
    stroke: var(--gray-700);
}

.btn-general .avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
}

.btn-general .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-general:hover {
    color: var(--gray-800);
    border-color: var(--gray-300);
    background-color: var(--gray-50);
}

.btn-general.primary {
    background-color: var(--fuchsia-800);
    color: var(--white);
    border-color: var(--fuchsia-800);
}

.btn-general.primary svg path {
    stroke: var(--white);
}

.btn-general.primary.btn-general:hover {
    background-color: var(--fuchsia-900);
    border-color: var(--fuchsia-900);
}

.btn-general.secondary {
    color: var(--fuchsia-900);
    border-color: var(--fuchsia-900);
}

.btn-general.secondary svg path {
    stroke: var(--fuchsia-900);
}

.btn-general.tertiary {
    color: var(--gray-500);
    border-color: var(--fuchsia-25);
    background-color: var(--fuchsia-25);
}

.btn-general.tertiary:hover {
    color: var(--fuchsia-900);
}

.btn-general.facebook {
    color: var(--facebook-color);
    background-color: var(--white);
    border-color: var(--facebook-color);
}

.btn-general.facebook svg path {
    stroke: var(--facebook-color);
}

.btn-general.linkedin {
    color: var(--linkedin-color);
    background-color: var(--white);
    border-color: var(--linkedin-color);
}

.btn-general.linkedin svg path {
    stroke: var(--linkedin-color);
}

.btn-general.ai {
    color: var(--ai-color);
    background-color: var(--white);
    border-color: var(--ai-color);
}

.btn-general.ai svg path {
    stroke: var(--ai-color);
}

.btn-general.pricing {
    color: var(--fuchsia-900);
    border-color: var(--fuchsia-50);
    background: var(--fuchsia-50);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

.btn-general.pricing svg path {
    stroke: var(--white);
}

.btn-general.pricing.btn-general:hover {
    background-color: var(--fuchsia-100);
    border-color: var(--fuchsia-100);
}

.btn-general.pricing.btn-general:focus {
    background-color: var(--fuchsia-100);
    border-color: var(--fuchsia-100);
}

.btn-general.small {
    height: 44px;
    padding: 10px 18px;
}

.btn-general.medium {
    height: 48px;
    padding: 12px 20px;
}

.btn-general.large {
    height: 60px;
    min-width: 146px;
    padding: 16px 28px;
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
}

.btn-general.large > *:not(:last-child) {
    margin-right: 12px;
}

.btn-general.large .avatar {
    width: 40px;
    height: 40px;
}

.btn-text {
    display: flex;
    padding: 0;
    background: none;
    border: none;
    align-items: center;
    font-family: var(--primary-font-family);
    font-size: var(--fs-b2);
    line-height: var(--lh-b2);
    font-weight: var(--fw-medium);
    color: var(--gray-900);
    transition: color 250ms ease-in-out;
    cursor: pointer;
}

.btn-text svg {
    margin-left: 8px;
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: all 250ms ease-in-out;
}

.btn-text svg path {
    stroke: var(--gray-900);
}

.btn-text.primary {
    color: var(--fuchsia-900);
}

.btn-text.primary svg path {
    stroke: var(--fuchsia-900);
}

.btn-text.primary:link, .btn-text.primary:visited, .btn-text.primary:active {
    color: var(--fuchsia-900);
}

.btn-text.primary:hover {
    color: var(--fuchsia-800);
}

.btn-text.primary:hover svg path {
    stroke: var(--fuchsia-800);
}

.btn-text.secondary {
    color: var(--white);
}

.btn-text.secondary svg path {
    stroke: var(--white);
}

.btn-text.secondary:hover, .btn-text.secondary:link, .btn-text.secondary:visited, .btn-text.secondary:active {
    color: var(--white);
}

.btn-text.secondary:hover svg path {
    stroke: var(--white);
}

.btn-on-shopify {
    margin-top: 48px;
    width: 234px;
    height: auto;
}

.section-header, .section-header > div {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.section-header p {
    margin-top: 20px;
    color: var(--gray-500);
    font-size: var(--fs-b4);
    line-height: var(--lh-b4);
    max-width: 850px;
    z-index: 1;
}

.section-header h1, .section-header h2, .section-header h3, .section-header h4 {
    max-width: 850px;
}

.section-header span, .section-header > div {
    position: relative;
    z-index: 1;
    font-weight: var(--fw-medium);
}

.section-header span .header-pattern {
    position: absolute;
    height: 16px;
    top: 100%;
    left: 50%;
    max-width: 150%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.section-header .sub-heading {
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-b2);
    line-height: var(--lh-b2);
    margin-bottom: 12px;
}

.section-header .section-label {
    display: block;
    font-weight: var(--fw-semi-bold);
    color: var(--fuchsia-900);
    margin-bottom: 16px;
}

.content {
    padding: 0 32px;
}


.yellow {
    color: var(--yellow-700);
}

.blue {
    color: var(--blue);
}

.green {
    color: var(--moss);
}

.purple {
    color: var(--fuchsia-400);
}

.orange {
    color: var(--orange);
}

.white {
    color: var(--white);
}

.blue-dark {
    color: var(--blue-dark);
}

.section-header.white p {
    color: var(--white);
}

.section-header.center, .section-header.center > div {
    text-align: center;
    align-items: center;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    display: flex;
    flex-direction: column;
    height: auto;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cookie-bar {
    position: fixed;
    bottom: -70px;
    left: 0;
    width: 100%;
    z-index: 999999;
    background: var(--gray-25);
    border-top: 1px solid var(--gray-300);
    box-shadow: var(--box-shadow-lg);
    padding: 12px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 250ms ease-in-out;
}

.cookie-bar.show {
    bottom: 0;
    visibility: visible;
    opacity: 1;
}

.cookie-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cookie-bar-text {
    display: flex;
    align-items: center;
    margin-right: 12px;
}

.cookie-bar-text > img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    margin-right: 16px;
}

.cookie-bar-text > p {
    color: var(--gray-500);
}

.cookie-bar-buttons {
    display: flex;
    align-items: center;
}

.cookie-bar-buttons > *:not(:last-child) {
    margin-right: 8px;
}

.cookie-bar-buttons .btn-close {
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.cookie-bar-buttons .btn-close > svg path {
    stroke: var(--gray-500);
}

.grecaptcha-badge {
    opacity: 0;
    visibility: hidden;
}

.toaster-wrapper {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    overflow: hidden;
    padding: 16px;
    z-index: 9999999;
}

.toaster {
    display: flex;
    align-items: center;
    width: 350px;
    background: var(--white);
    padding: 8px 12px;
    border: 1px solid var(--gray-100);
    box-shadow: var(--box-shadow-lg);
    border-radius: var(--br-8);
    transition: all 400ms ease-in-out;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
}

.toaster:not(:last-child) {
    margin-bottom: 12px;
}

.toaster.show {
    opacity: 1;
    visibility: visible;
    top: 16px;
    transform: translateX(0);
}

.toaster .toaster-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--fuchsia-50);
    margin-right: 14px;
}

.toaster .toaster-icon img, .toaster .toaster-icon svg {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.toaster .toaster-icon svg path {
    stroke: var(--fuchsia-100);
}

.toaster.success .toaster-icon {
    background-color: #D1FADF;
}

.toaster.success .toaster-icon svg path {
    stroke: #039855;
}

.toaster.error .toaster-icon {
    background-color: #FEE4E2;
}

.toaster.error .toaster-icon svg path {
    stroke: #D92D20;
}

.toaster.warning .toaster-icon {
    background-color: #FEF0C7;
}

.toaster.warning .toaster-icon svg path {
    stroke: #DC6803;
}

.toaster .toaster-text {
    flex-grow: 1;
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    color: var(--gray-900);
}

.btn-toaster-close {
    width: 20px;
    height: 20px;
    margin-left: 14px;
    object-fit: contain;
    cursor: pointer;
}

/* ==============================
        Discount
============================== */

body.show-discount .discount-banner {
    display: block;
}

.discount-banner {
    display: none;
    position: relative;
    width: 100%;
}

.discount-banner.hide-button .btn {
    display: none;
}

.discount-banner .snow {
    position: absolute;
    bottom: -30px;
    right: calc(50% + 30px);
    height: 40px;
}

.discount-banner .snow:last-of-type {
    left: calc(50% + 30px);
    right: auto;
}

.discount-banner .tree {
    position: absolute;
    bottom: -14px;
    left: -22px;
    height: 100px;
}

.discount-banner .tree:last-of-type {
    left: auto;
    right: -22px;
    height: 86px;
}

.discount-banner > div {
    background-image: url("../images/new-year-banner-bg.png");
    background-position: bottom;
    background-repeat: repeat no-repeat;
    background-size: 1300px auto;
    overflow: hidden;
    position: relative;
}

.discount-banner .discount-content {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 76px;
    padding: 20px 0;
    gap: 18px;
}

.discount-banner .discount-content p {
    font-size: 24px;
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    color: #fff;
}

.discount-banner .discount-content p > span {
    display: inline-block;
    background-color: #D80027;
    border-radius: 10px;
    padding: 6px 16px;
    color: #fff;
    font-size: var(--fs-b4);
    line-height: var(--lh-b4);
    letter-spacing: -1.202px;
    margin-left: 10px;
    border: none;
}

.discount-banner .discount-content .btn {
    background-color: #FFD400;
    color: #09133B;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: var(--fw-semi-bold);
    cursor: pointer;
    white-space: nowrap;
    font-size: 14px;
    flex-shrink: 0;
}

.discount-banner .countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #fff;
    white-space: nowrap;
    font-size: 26px;
    flex-grow: 0;
    min-width: 390px;
}

.discount-banner .countdown span {
    border-radius: 10px;
    padding: 8px 10px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.8px;
    font-weight: 800;
    font-size: 16px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    min-width: 96px;
    text-align: center;
}


.discount-banner .discount-content .divider {
    height: 24px;
    width: 2px;
    background-color: white;
    padding: 0;
    opacity: 0.5;
}

.countdown {
    display: flex;
    align-items: center;
    flex-grow: 1;
    gap: 16px;
}

.countdown .countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    padding: 12px;
    background-color: var(--white);
    border-radius: var(--br-8);
}

.countdown .countdown-item .count {
    font-size: var(--fs-b4);
    line-height: var(--lh-b4);
    font-weight: var(--fw-semi-bold);
}

.countdown .countdown-item .label {
    font-size: var(--fs-b1);
    line-height: 1;
    font-weight: var(--fw-medium);
    margin-top: 4px;
    text-transform: uppercase;
}

/* Ghost search */

.gh-search-icon svg {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.gh-search-icon svg path {
    fill: var(--gray-500);
}

/* ==============================
        Header
============================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #f9f9f9;
    z-index: 9;
    transition: all 250ms ease-in-out;
    border-bottom: 1px solid transparent;
}

.header.fixed {
    box-shadow: var(--box-shadow-lg);
}

.header-content {
    padding: 18px 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.header-logo {
    display: flex;
    margin-right: 40px;
}

.header-logo img {
    width: 113px;
    height: auto;
}

.header-menu > ul {
    display: flex;
    align-items: center;
}

.header-menu > ul > li {
    position: relative;
    display: flex;
}

.header-menu > ul > li > span {
    display: flex;
    align-items: center;
}

.header-menu > ul > li:not(:last-child) {
    margin-right: 32px;
}

.header-menu > ul > li > span > svg {
    margin-left: 8px;
    transition: transform 250ms ease-in-out;
}

.header-menu > ul > li, .header-menu > ul > li a {
    color: var(--gray-500);
    font-weight: var(--fw-medium);
    font-size: var(--fs-b2);
    line-height: var(--lh-b2);
    transition: background-color 250ms ease-in-out;
}

.header-menu > ul > li.active > span, .header-menu > ul > li > span > a:hover {
    color: var(--fuchsia-900);
}

.header-menu > ul > li.active > span > svg {
    transform: rotate(180deg);
}

.header-menu > ul > li.active > span > svg path {
    stroke: var(--fuchsia-900);
}

.header-menu > ul > li.active .dropdown {
    top: 100%;
    opacity: 1;
    visibility: visible;
}

.dropdown {
    position: absolute;
    left: 0;
    top: calc(100% + 36px);
    padding-top: 12px;
    opacity: 0;
    visibility: hidden;
    transition: all 400ms ease-in-out;
    z-index: 9;
}

.dropdown .dropdown-content {
    display: flex;
    width: 520px;
    padding: 24px 20px;
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    box-shadow: var(--box-shadow-lg);
    border-radius: var(--br-8);
}

.dropdown.single .dropdown-content {
    padding: 20px;
    width: 336px;
}

.dropdown .dropdown-content .dropdown-column {
    width: 50%;
}

.dropdown.single .dropdown-content .dropdown-column {
    width: 100%;
}

.dropdown .dropdown-content .dropdown-column:not(:last-child) {
    margin-right: 24px;
}

.dropdown .dropdown-content .dropdown-column > span {
    display: block;
    color: var(--fuchsia-900);
    font-weight: var(--fw-medium);
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    margin-bottom: 12px;
}

.dropdown .dropdown-content .dropdown-column ul {
    display: flex;
    flex-direction: column;
}

.dropdown .dropdown-content .dropdown-column ul li:not(:last-child) {
    margin-bottom: 8px;
}

.dropdown .dropdown-content .dropdown-column ul li a {
    padding: 12px;
    display: flex;
    align-items: center;
    flex-grow: 1;
    color: var(--gray-900);
    font-size: var(--fs-b2);
    line-height: var(--lh-b2);
    font-weight: var(--fw-medium);
    border-radius: var(--br-8);
}

.dropdown .dropdown-content .dropdown-column ul li a:hover {
    background-color: var(--fuchsia-50);
}

.dropdown .dropdown-content .dropdown-column ul li a svg,
.dropdown .dropdown-content .dropdown-column ul li a img {
    margin-right: 16px;
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.dropdown .dropdown-content .dropdown-column ul li a.free-tools-icon svg {
    width: 28px;
    height: 28px;
}

.dropdown .dropdown-content .dropdown-column ul li a div.label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    text-align: center;
    color: var(--white);
    background-color: var(--fuchsia-900);
    border-radius: var(--br-16);
    margin-left: 16px;
    font-size: var(--fs-b1);
    line-height: 1;
    font-weight: var(--fw-medium);
}

.dropdown .dropdown-content .dropdown-column ul li a div.label.soon {
    background-color: var(--yellow-400);

}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.header-right-btns > *:not(:first-child) {
    margin-left: 12px;
}

.mobile-header-right-btns > * {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 8px;
    cursor: pointer;
}

.mobile-header-right-btns button svg, .mobile-header-right-btns a svg {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.mobile-header-right-btns svg path {
    stroke: var(--gray-700);
}

.mobile-header-right-btns .user {
    position: relative;
}

.mobile-header-right-btns .user .user-dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 100%;
    left: 50%;
    width: 140px;
    background: var(--white);
    border-radius: var(--br-8);
    box-shadow: var(--box-shadow-lg);
    transform: translateX(-50%);
    padding: 8px;
    z-index: 9;
    margin-top: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 250ms ease-in-out;
}

.mobile-header-right-btns .user.active .user-dropdown {
    opacity: 1;
    visibility: visible;
    margin-top: 8px;
}

.mobile-header-right-btns .user .user-dropdown:after {
    position: absolute;
    content: "";
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: var(--white);
    z-index: -1;
    border-radius: var(--br-2);
}

.mobile-header-right-btns .user .user-dropdown > *:not(:last-child) {
    margin-bottom: 6px;
}

.mobile-header-right-btns .user .user-dropdown a {
    padding: 6px;
    width: 100%;
    text-align: center;
    border-radius: var(--br-6);
}

.mobile-header-right-btns .user .user-dropdown a.login {
    background-color: var(--fuchsia-25);
    color: var(--gray-500);
}

.mobile-header-right-btns .user .user-dropdown a.signup {
    background-color: var(--fuchsia-900);
    color: var(--white);
}

.menu-toggle svg.close {
    display: none;
}

.menu-toggle.active svg.close {
    display: block;
}

.menu-toggle.active svg.bars {
    display: none;
}

.header-right > *:not(:first-child) {
    margin-left: 12px;
}

.header-right .btn-general {
    min-width: auto;
}

/* .header-search {
    position: relative;
}

.header-search input {
    height: 44px;
    width: 232px;
    border: 1px solid var(--gray-300);
    background-color: transparent;
    border-radius: var(--br-8);
    padding: 12px 14px 12px 42px;
    color: var(--gray-900);
    font-size: var(--fs-b2);
    line-height: var(--lh-b2);
}

.header-search input::placeholder {
    color: var(--gray-500);
}

.header-search svg {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
} */

/* ==============================
        Home - Welcome
============================== */
.welcome {
    padding: 60px 0 50px;
    overflow: hidden;
}

.welcome-text {
    position: relative;
    z-index: 2;
    margin-top: 70px;
}

.welcome-text h1 {
    margin-bottom: 10px;
}

.welcome-text p {
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
    color: var(--gray-500);
}

.welcome-text .welcome-btns {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.welcome-text .welcome-btns .btn-general:not(:last-child) {
    margin-right: 12px;
}

.welcome-note {
    display: flex;
    gap: 12px;
    color: var(--gray-500);
    font-style: italic;
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    margin-top: 12px;
}

.welcome-note span {
    color: var(--moss);
    margin-right: 2px;
}

.welcome-image {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.welcome-image .image-holder {
    position: relative;
    border-radius: 10px;
}

.welcome-image img.main {
    position: relative;
    width: 100%;
    max-width: 680px;
    height: auto;
    z-index: 2;
    display: block;
    border-radius: 10px;
}

.welcome-image img.pattern {
    position: absolute;
    z-index: 1;
}

.welcome-image img.pattern.left-top {
    left: 16px;
    top: -30px;
    width: 116px;
}

.welcome-image img.pattern.left-bottom {
    left: 0;
    bottom: -24px;
}

.welcome-image img.pattern.right-top {
    top: -20px;
    right: -90px;
    width: 255px;
}

.welcome-image img.pattern.right-bottom {
    bottom: -40px;
    right: -64px;
}

.welcome-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}


/* ===========================
        Home - Stats
============================== */

.home-stats {
    background-color: #fff;
}

.home-stats .icon {
    border-radius: 50%;
    border: 8px solid #F9F9F9;
    background: #F3F3F3;
    padding: 0.5em;
    width: 66px;
    height: 66px;
}

.home-stats .text  {
    color: var(--fuchsia-900);
    text-align: center;
    font-size: var(--fs-b4);
    font-weight: var(--fw-semi-bold);
    line-height: var(--lh-b4);
    letter-spacing: -0.4px;
    max-width: 252px;
    margin-top: 1.25em;
}

.home-stats img {
    width: 34px;
    height: 34px;
}

/* ====================================
        Home - Maximize potential
======================================= */

.maximize-potential .section-header {
    max-width: 760px;
    margin: auto;
    text-align: center;
}

.maximize-potential h3 {
    width: 100%;
    color: var(--gray-900);
    text-align: center;
    letter-spacing: -0.72px;
}

.modules {
    gap: 1em;
    margin-top: 3em;
}

.module {
    max-width: 226px;
    background-color: #fff;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 1.625em;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 54px 54px 0 rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    text-align: center;
}

.module .icon {
    border-radius: 50%;
    border: 8px solid #F9F5FF;
    background: #F4EBFF;
    width: 48px;
    height: 48px;
    padding: 4px;
}

.module .text {
    color: var(--fuchsia-900);
    font-size: var(--fs-b2);
    font-weight: var(--fw-semi-bold);
    line-height: var(--lh-b2);
    text-align: center;
    letter-spacing: -0.4px;
    height: 60px;
    display: flex;
    align-items: center;
}

.module .description {
    color: var(--gray-500);
}

/* ==============================
        Home - Partners
============================== */

.partners-content {
    padding: 48px 32px;
    background-color: var(--fuchsia-900);
    border-radius: var(--br-16);
}

.partners-content > span {
    display: block;
    color: var(--fuchsia-200);
    margin-bottom: 24px;
    font-size: var(--fs-b5);
    line-height: var(--lh-b5);
    font-weight: var(--fw-medium);
    text-align: center;
}

.partners-content .partners-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.partners-content .partners-wrapper > div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px;
}

.partners-content .partners-wrapper > div img {
    width: 100%;
    max-width: 278px;
    height: 48px;
    object-fit: contain;
}

/* ==============================
        Home - Metrics
============================== */

.metrics {
    background-image: url('../patterns/metrics/hand-drawn-accents.svg'), url('../patterns/metrics/hand-drawn-accents-2.svg');
    background-repeat: no-repeat;
    background-size: 72px auto, 40px auto;
    background-position: top 68px left 42px, bottom 56px right 74px;
}

.metrics-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.metrics-item .counter {
    color: var(--fuchsia-900);
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-weight: var(--fw-semi-bold);
    margin-bottom: 12px;
}

.metrics-item .counter + span {
    font-weight: var(--fw-medium);
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
}

/* ==============================
        Home - Testimonials
============================== */

.testimonials .section-header > * {
    text-align: center;
    margin: auto;
}

.testimonials .section-header p {
    margin-top: 1em;
}

.testimonials-content {
    margin-top: 32px;
}

.testimonialsSwiper {
    position: relative;
}

.testimonialsSwiper .swiper-wrapper {
    padding-bottom: 70px;
}

.testimonialsSwiper .swiper-pagination {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 45px;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
}

.testimonialsSwiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: var(--gray-500);
    margin: 0 16px 0 0 !important;
}

.testimonialsSwiper .swiper-pagination-bullet-active {
    background-color: var(--fuchsia-900);
}

.testimonial-item {
    display: flex;
    padding: 32px 54px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 24px 24px -15px rgba(0, 0, 0, 0.05);
}

.testimonial-item-text h5 {
    font-weight: var(--fw-medium);
}

.testimonial-item-text img {
    width: 60px;
    margin-bottom: 24px;
}

.testimonialsSwiper .author {
    margin-top: 54px;
    display: flex;
    flex-direction: column;
    padding-left: 30px;
}

.testimonialsSwiper .author .name {
    position: relative;
    color: var(--neutral-800);
    font-weight: var(--fw-medium);
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
    margin-bottom: 8px;
}

.testimonialsSwiper .author .name::before {
    position: absolute;
    content: '';
    width: 19px;
    height: 2px;
    top: 50%;
    left: -30px;
    background-color: var(--orange);
    border-radius: 2px;
    transform: translateY(-50%);
}

.testimonialsSwiper .author .position {
    color: var(--neutral-600);
    font-weight: var(--fw-medium);
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
}

.testimonial-item-img {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.testimonial-item-img img {
    max-width: 350px;
    width: 100%;
    height: auto;
}

/* ==============================
        Home - How it works
============================== */

.how-it-works .section-header > div {
    width: -moz-fit-content;
    width: fit-content;
}

.how-it-works .section-header img {
    position: absolute;
    top: -84px;
    right: -130px;
}

.how-it-works-content {
    margin: 68px 0 24px;
    display: flex;
    justify-content: space-between;
}

.step {
    display: flex;
    flex-direction: column;
}

.step .step-number {
    display: flex;
    margin-bottom: 24px;
}

.step .step-number div {
    width: 50px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--fs-b5);
    line-height: var(--lh-b5);
    font-weight: var(--fw-semi-bold);
    color: var(--fuchsia-900);
    background-image: url('../patterns/how-it-works/hand-drawn-accents.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 18px;
}

.step .step-number span {
    font-weight: var(--fw-medium);
    font-size: var(--fs-b4);
    line-height: var(--lh-b4);
    max-width: 176px;
}

.step-content {
    position: relative;
    display: flex;
    width: fit-content;
}

.step-content img.main {
    max-width: 100%;
    height: auto;
    box-shadow: var(--box-shadow-xl);
    border-radius: var(--br-12);
}

.step-content img.step-arrow {
    position: absolute;
    z-index: 2;
}

.step-content.step-1 img.step-arrow {
    bottom: 20px;
    left: calc(100% - 14px);
    transform: rotate(-10deg);
}

.step-content.step-2 img.step-arrow {
    bottom: 16px;
    left: calc(100% - 8px);
}

.step-content.step-3 img.media {
    position: absolute;
    width: 84px;
    height: 84px;
    left: 58px;
    bottom: 2px;
}

/* ==============================
        Home - For who
============================== */

.for-who-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 72px;
    padding-right: 20px;
}

.for-who-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.for-who-text h2 {
    margin-bottom: 24px;
}

.for-who-text p {
    font-size: var(--fs-b4);
    line-height: var(--lh-b4);
    margin-bottom: 40px;
    color: var(--gray-500);
}

.for-who-right {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-left: 20px;
}

.for-who-right img {
    width: 100%;
    height: auto;
    max-width: 410px;
}

.for-who-tabs.tabs {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-bottom: 40px;
}

.for-who-tabs.tabs::before {
    position: absolute;
    content: '';
    top: 0;
    width: 100%;
    height: 2px;
    background-color: var(--gray-300);
    z-index: -1;
}

.for-who-tabs.tabs button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--gray-500);
    font-weight: var(--fw-medium);
    font-family: var(--primary-font-family);
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
    padding: 20px 4px 0;
    cursor: pointer;
    transition: color 250ms ease-in-out;
    z-index: 1;
}

.for-who-tabs.tabs button:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: transparent;
    z-index: 1;
    transition: all 250ms ease-in-out;
}

.for-who-tabs.tabs button:not(:last-child) {
    margin-right: 32px;
}

.for-who-tabs.tabs button svg {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 16px;
}

.for-who-tabs.tabs button svg path {
    stroke: var(--gray-500);
    transition: stroke 250ms ease-in-out;
}

.for-who-tabs.tabs button.active, .tabs button:hover {
    color: var(--fuchsia-900);
}

.for-who-tabs.tabs button.active:before, .tabs button:hover:before {
    background-color: var(--fuchsia-900);
    width: 100%;

}

.for-who-tabs.tabs button.active svg path, .tabs button:hover svg path {
    stroke: var(--fuchsia-900);
}

.tab {
    display: none;
    flex-direction: column;
}

.tab.active {
    display: flex;
}

/* ==============================
        Home - Platform
============================== */
.platform-item {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    color: var(--gray-900);
    border-radius: var(--br-16);
    transition: all 250ms ease-in-out;
    padding: 24px 16px;
}

.platform-item:hover {
    background: var(--white);
    box-shadow: var(--box-shadow-md);
}

.platforms-content {
    margin-top: 56px;
}

.platform-item-header {
    height: 56px;
    margin-bottom: 12px;
}

.platform-item-header-content {
    display: flex;
    align-items: center;
    font-size: var(--fs-b4);
    line-height: var(--lh-b3);
    font-weight: var(--fw-medium);
}

.platform-item-header img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 20px;
}

.platform-item-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    color: var(--gray-500);
}

.platform-item-body p {
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
    color: var(--gray-500);
}

.platform-item-body span {
    display: flex;
    align-items: center;
    margin-top: 12px;
    color: var(--orange);
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    font-weight: var(--fw-medium);
}

.platform-item-body span img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 8px;
}

/* ==============================
        Home - What is new
============================== */

.whats-new .section-header > div {
    width: 100%;
    padding-right: 98px;
}

.whats-new .section-header img {
    position: absolute;
    top: -32px;
    right: 0;
}

.whats-new-content {
    margin-top: 64px;
}

.whats-new-item {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 24px;
    background: var(--white);
    box-shadow: var(--box-shadow-xl);
    border-radius: var(--br-12);
}

a.whats-new-item:hover span {
    color: var(--fuchsia-700);
}

.whats-new-item img {
    width: 100%;
    height: auto;
    margin-bottom: 32px;
    background: var(--fuchsia-25);
}

.whats-new-item span {
    color: var(--fuchsia-900);
    font-weight: var(--fw-medium);
    font-size: var(--fs-b5);
    line-height: var(--lh-b5);
    margin-bottom: 8px;
    transition: all 250ms ease-in-out;
}

.whats-new-item p {
    color: var(--gray-500);
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
}

/* ==============================
        Home - Features
============================== */

.features .section-header > div {
    width: 100%;
    text-align: center;
}

.features .section-header > div img {
    position: absolute;
    top: -66px;
    right: 0;
}

.feature-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-right: 40px;
}

.feature-text-header {
    position: relative;
    margin-bottom: 16px;
}

.feature-text-header span {
    display: block;
    font-weight: var(--fw-semi-bold);
    margin-bottom: 16px;
}

.feature-text-header img {
    position: absolute;
    z-index: -1;
}

.feature-text-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.feature-text-body p {
    color: var(--gray-500);
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
    margin-bottom: 32px;
}

.feature-image {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 54px 54px 0 rgba(0, 0, 0, 0.05);
}

.feature-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 54px 54px 0 rgba(0, 0, 0, 0.05);
}

.features-content {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-top: 96px;
}

.features-content .row:nth-child(2n),
.features-content .features-content-row:nth-child(2n) .row {
    flex-direction: row-reverse;
}

.features-content .row:nth-child(2n) .feature-text,
.features-content .features-content-row:nth-child(2n) .row .feature-text {
    padding-right: 0;
    padding-left: 40px;
}

.features-content .row:nth-child(4n-3) .feature-text-header span,
.features-content .features-content-row:nth-child(4n-3) .row .feature-text-header span {
    color: var(--blue);
}

.features-content .row:nth-child(4n-3) .feature-text-header img,
.features-content .features-content-row:nth-child(4n-3) .row .feature-text-header img {
    bottom: calc(100% + 40px);
    left: 40px;
}

.features-content .row:nth-child(4n-2) .feature-text-header span,
.features-content .features-content-row:nth-child(4n-2) .row .feature-text-header span {
    color: var(--orange);
}

.features-content .row:nth-child(4n-2) .feature-text-header img,
.features-content .features-content-row:nth-child(4n-2) .row .feature-text-header img {
    top: -58px;
    right: 58px;
}

.features-content .row:nth-child(4n-1) .feature-text-header span,
.features-content .features-content-row:nth-child(4n-1) .row .feature-text-header span {
    color: var(--moss);
}

.features-content .row:nth-child(4n-1) .feature-text-header img,
.features-content .features-content-row:nth-child(4n-1) .row .feature-text-header img {
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
}

.features-content .row:nth-child(4n) .feature-text-header span,
.features-content .features-content-row:nth-child(4n) .row .feature-text-header span {
    color: var(--fuchsia-400);
}

.features-content .row:nth-child(4n) .feature-text-header img,
.features-content .features-content-row:nth-child(4n) .row .feature-text-header img {
    top: -52px;
    right: 88px;
}

/* ==============================
        Home - Developers
============================== */
.developers-content {
    background-color: #344054;
    padding: 50px;
    border-radius: 10px;
}

.developers-text {
    padding-right: 20px;
}

.developers-text .section-header span {
    max-width: 110%;
}

.developers-text .btn-general {
    width: fit-content;
    margin-top: 48px;
}

.developers-text .developers-features {
    margin-top: 48px;
}

.developers-features-item {
    display: flex;
    flex-direction: column;
    color: var(--white);
}

.developers-features-item > img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 20px;
}

.developers-features-item > span {
    font-weight: var(--fw-medium);
    font-size: var(--fs-b4);
    line-height: var(--lh-b4);
    margin-bottom: 8px;
}

.developers-features-item > p {
    flex-grow: 1;
}

.developers-features-item .btn-text {
    margin-top: 20px;
}

.developers-image img {
    width: 100%;
    height: auto;
    border: 3px solid var(--gray-300);
    border-radius: var(--br-12);
}

/* ==============================
        Home - Developers
============================== */
.above-scheduling {
    background-color: var(--white);
}

.above-scheduling-content {
    margin-top: 64px;
}

.above-scheduling-item {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.above-scheduling-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 20px;
}

.above-scheduling-item p {
    font-weight: var(--fw-medium);
    font-size: var(--fs-b4);
    line-height: var(--lh-b4);
}

/* ==============================
        Home - Support
============================== */

.support-text-body {
    margin-top: 40px;
    color: var(--gray-500);
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
}

.support-text-body .btn-general {
    width: fit-content;
    margin-top: 40px;
}

.support-text-body a:not(.btn-general) {
    color: var(--fuchsia-900);
    font-weight: var(--fw-medium);
}

.support-text, .support-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.support-text {
    padding-right: 20px;
}

.support-image {
    align-items: center;
    padding-left: 20px;
}

#home-page .support-image img {
    max-width: 576px;
}

#linkedin .support-image img {
    max-width: 500px;
}

#facebook .support-image img {
    max-width: 500px;
}

.support-image img {
    max-width: 400px;
    width: 100%;
    height: auto;
}

.sub-support {
    padding-bottom: 0;
}

.sub-support-item {
    display: flex;
    flex-direction: column;
}

.sub-support-item > img,
.sub-support-item > svg {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 20px;
}

.sub-support-item > span {
    font-weight: var(--fw-medium);
    font-size: var(--fs-b4);
    line-height: var(--lh-b4);
    color: var(--gray-900);
    margin-bottom: 8px;
}

.sub-support-item > p {
    color: var(--gray-500);
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
}

/* ==============================
        Home - Why planly
============================== */
.why-planly-content {
    margin-top: 96px;
}

/* ==============================
        Home - Support
============================== */

.blogs .container.swiper-container {
    max-width: 1400px;
}

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

.blogsSwiper {
    padding: 64px 0;
}

.blogsSwiper .swiper-slide {
    max-width: 384px;
}

.blog-item {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: var(--white);
    color: var(--gray-900);
    border-radius: var(--br-12);
    box-shadow: var(--box-shadow-xl);
    overflow: hidden;
}

.blog-item-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 240px;
}

#free-tools-page .blog-item-header {
    height: auto;
}

.blog-item-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-item-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 32px 24px 24px;
}

#free-tools-page .blog-item-body {
    flex-grow: 0;
}

.blog-item-body .blog-label {
    display: block;
    margin-bottom: 12px;
}

.blog-item-body .blog-label a {
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    font-weight: var(--fw-semi-bold);
    color: var(--fuchsia-900);
}

.blogsSwiper .swiper-slide:nth-child(3n-2) .blog-item-body .blog-label a {
    color: var(--moss);
}

.blogsSwiper .swiper-slide:nth-child(3n-1) .blog-item-body .blog-label a {
    color: var(--blue);
}

.blogsSwiper .swiper-slide:nth-child(3n) .blog-item-body .blog-label a {
    color: var(--violet);
}

.blog-item-body .blog-title {
    margin-bottom: 12px;
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    color: var(--gray-900);
    transition: color 250ms ease-in-out;
}

.blog-item-body .blog-title:hover {
    color: var(--fuchsia-900);
}

.blog-item-body .blog-desc {
    color: var(--gray-500);
    font-size: 16px;
    line-height: 24px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.featured-blog-item .blog-item-body .blog-desc {
    -webkit-line-clamp: 4;
}

.blog-item-body > a {
    flex-grow: 1;
}

.blog-item-body .blog-author {
    display: flex;
    margin-top: 32px;
}

.blog-item-body .blog-author .author-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 12px;
    flex-shrink: 0;
}

.blog-item-body .blog-author .author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-item-body .blog-author .author-name {
    display: block;
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    font-weight: var(--fw-medium);
}

.blog-author .author-name a {
    color: var(--fuchsia-900);
}

.blog-item-body .blog-author .date {
    display: block;
    color: var(--gray-500);
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
}

.blog-item-body .btn-text {
    width: 100%;
    justify-content: space-between;
    margin-top: 32px;
}

/* ==============================
        Home - Free start
============================== */
.free-start .container > div {
    background-color: var(--fuchsia-900);
    background-image: url('../patterns/free-plan/hand-drawn-accents.svg'), url('../patterns/free-plan/hand-drawn-pen-scribble.svg'), url('../patterns/free-plan/hand-drawn-accents-2.svg');
    background-repeat: no-repeat;
    background-position: left 38px bottom 80px, top 0 right 160px, bottom 58px right 390px;
    padding: 72px 50px;
    border-radius: 20px;
}

.free-start-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

.free-start.secondary .section-header {
    flex-direction: column;
    align-items: flex-start;
    font-size: var(--fs-h1);
    line-height: 1.2;
    font-weight: var(--fw-semi-bold);
    text-transform: uppercase;
}

.free-start.secondary .free-start-content {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
    font-size: var(--fs-b4);
    line-height: var(--lh-b4);
}


.free-start.secondary .free-start-content .btn-general {
    margin-top: 32px;
}

.free-start.tertiary {
    padding: 64px 0;
    background-position: left 38px top 0, top 0 right 0, bottom -30px right 100px;
}

.free-start.tertiary .free-start-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 32px 64px;
    margin: 0;
}

.free-start.tertiary .section-header {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    font-weight: var(--fw-semi-bold);
}

.free-start-users {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
    font-weight: var(--fw-medium);
    color: var(--white);
    margin-top: 24px;
    max-width: 300px;
}

/* ==============================
        Home - Free start
============================== */

.faq-content {
    margin: 64px auto 0;
}

.faq-item {
    padding-bottom: 32px;
}

.faq-item:not(:last-child) {
    margin-bottom: 24px;
    border-bottom: 1px solid var(--gray-200);
}

.faq-item-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    cursor: pointer;
    user-select: none;
}

.faq-item-header > span {
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
    font-weight: var(--fw-medium);
}

.faq-item-header .btn-collapse {
    width: 24px;
    height: 24px;
    margin-left: 24px;
    flex-shrink: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.faq-item-header .btn-collapse img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.faq-item .faq-item-header .btn-collapse img.minus {
    display: none;
}

.faq-item.active .faq-item-header .btn-collapse img.plus {
    display: none;
}

.faq-item.active .faq-item-header .btn-collapse img.minus {
    display: block;
}

.faq-item-body {
    display: none;
    color: var(--gray-500);
}

.faq-item-body a {
    color: var(--fuchsia-900);
    font-weight: var(--fw-medium);
}

.faq-item-body strong, .faq-item-body b {
    color: var(--gray-700)
}

/* ==============================
        Home - Free start
============================== */

.footer-content {
    padding: 64px 0 48px;
}

.footer-item.logo {
    padding-right: 18px;
}

.footer-item.logo > a {
    display: block;
    width: 112px;
    margin-bottom: 32px;
}

.footer-item.logo > a img {
    width: 100%;
    height: auto;
}

.footer-item.logo > p {
    margin-bottom: 24px;
}

.footer-item.logo > ul {
    display: flex;
    align-items: center;
    gap: 13px;
    max-width: 188px;
    flex-wrap: wrap-reverse;
}

.footer-item.logo > ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-item.logo > ul li a img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.footer-item.list {
    display: flex;
    flex-direction: column;
    padding-left: 12px;
}

.footer-item.list > span {
    font-size: var(--fs-b1);
    line-height: var(--fs-b1);
    font-weight: var(--fw-semi-bold);
    margin-bottom: 16px;
}

.footer-item.list > ul {
    display: flex;
    flex-direction: column;
}

.footer-item.list > ul li:not(:last-child) {
    margin-bottom: 12px;
}

.footer-item.list > ul li a {
    color: var(--gray-500);
    font-weight: var(--fw-medium);
    transition: color 250ms ease-in-out;
}

.footer-item.list > ul li a .label {
    padding: 2px 8px;
    border: 1.5px solid var(--gray-600);
    color: var(--gray-600);
    font-weight: var(--fw-medium);
    font-size: 12px;
    line-height: 18px;
    border-radius: var(--br-16);
    margin-left: 8px;
}


.footer-item.list > ul li a:hover {
    color: var(--fuchsia-900);
}

.trustpilot-footer {
    padding-top: 25px;
    display: flex;
    justify-content: flex-start;
}

.trustpilot-widget {
    background-color: #fff;
    border: 1px solid #00b67a;
    border-radius: 2px;
    padding: 8px 6px;
    display: inline-block;
}

.trustpilot-widget a {
    display: inline-flex;
    gap: 4px;
    font-size: var(--fs-b1);
    font-weight: var(--fw-medium);
    color: #191919;
}

.trustpilot-widget img {
    width: 80px;
    height: 20px;
}

.mobile-apps {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    margin-top: 25px;
}

.mobile-apps > div {
    display: flex;
    gap: 10px;
}

.mobile-apps a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    background-color: #000;
    color: #fff;
    border-radius: 8px;
}

.mobile-apps .store-icon {
    width: 20px;
    height: 20px;
}

.mobile-apps span {
    display: flex;
    gap: 4px;
    font-weight: var(--fw-medium);
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    color: var(--white);
}

.copyright {
    padding: 16px 0;
    text-align: center;
    color: var(--gray-500);
}

/* ==============================
        Pricing
============================== */

section.pricing-content-top {
    padding: 70px 0 60px;
}

.pricing-content-top .container {
    display: flex;
    gap: 60px;
}

.pricing-content-top .section-head {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.pricing-content-top .head-pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.pricing-content-top .social-icons {
    display: flex;
    flex-wrap: wrap;
}

.pricing-content-top .social-icons span {
    padding: 5px;
}

.pricing-content-top .social-icons img {
    display: flex;
    width: 19px;
    height: 19px;
}

.pricing-content-top .section-head h1 {
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    font-weight: var(--fw-bold);
    letter-spacing: -0.48px;
    text-transform: uppercase;
}

.pricing-content-top .section-head p {
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    font-weight: var(--fw-regular);
    color: var(--gray-500);
    margin-top: 10px;
}

.pricing-content-top .custom-pricing {
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0 14px 84px -4px rgba(16, 24, 40, 0.05);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 400px;
    /*margin-top: 10px;*/
}

.pricing-content-top .custom-pricing .text p {
    font-size: var(--fs-b1);
    font-weight: var(--fw-bold);
    line-height: var(--lh-b5);
    color: var(--fuchsia-900);
    margin-top: 0;
}

.pricing-content-top .custom-pricing .text h5 {
    font-size: 28px;
    font-weight: var(--fw-semi-bold);
    line-height: 42px;
    letter-spacing: -0.7px;
    color: #151A35;
    text-transform: initial;
}

.pricing-content-top .custom-pricing span {
    font-size: 12px;
    font-weight: var(--fw-regular);
    line-height: var(--lh-b1);
    color: var(--gray-500);
}

.pricing-content-top .custom-pricing .features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pricing-content-top .custom-pricing .features-item {
    display: flex;
}

.pricing-content-top .custom-pricing .features-item > img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-right: 12px;
    flex-shrink: 0;
}

.pricing-content-top .custom-pricing .features-item span {
    font-size: 12px;
    color: var(--gray-500);
    line-height: var(--lh-b1);
}

.pricing-content-top .custom-pricing .btn-general {
    background-color: var(--fuchsia-900);
    color: var(--white);
}

.pricing-content-top .custom-pricing .btn-general:hover {
    background-color: var(--fuchsia-800);
    border-color: var(--fuchsia-800);
}

.pricing-content-top .custom-pricing.mobile {
    display: none;
}

.pricing-cycle {
    margin: 20px 0 0;
}

.pricing-cycle span {
    font-size: 12px;
    font-weight: var(--fw-medium);
    line-height: 18px;
    letter-spacing: -0.24px;
    color: var(--gray-900);
}

.pricing-tabs {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    padding: 6px;
    border: 1px solid var(--gray-200);
    border-radius: var(--br-8);
    margin-top: 8px;
}

.pricing-tabs button {
    padding: 10px 14px;
    border-color: transparent;
    flex-grow: 1;
}

.pricing-tabs button:not(:last-child) {
    margin-right: 8px;
}

.pricing-tabs button.active {
    background-color: var(--fuchsia-900);
    color: var(--white);
}

.pricing-tabs button:hover:not(.active) {
    background-color: var(--fuchsia-50);
    border-color: var(--fuchsia-50);
}

.pricing-tabs button.active:hover {
    background-color: var(--fuchsia-800);
}

.pricing-content-top {
    display: flex;
    gap: 30px;
}

.pricing-content-top .section-body {
    width: calc(100% - 360px);
}

.pricing-deals {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 6px;
    padding: 10px 18px 10px 16px;
    background: #F5F5F5;
    mix-blend-mode: multiply;
    border-radius: 60px;
    font-weight: var(--fw-semi-bold);
    font-size: 12px;
    line-height: 18px;
    color: var(--fuchsia-900);
    visibility: hidden;
    margin-bottom: 10px;
}

.pricing-deals.active {
    visibility: visible;
}

.pricing-deals img {
    width: 38px;
    height: 38px;
}

.pricing-cards {
    position: relative;
    width: 100%;
    height: 100%
}

.pricingCardsSwiper {
    /*padding: 0 0 20px;*/
}

.pricingCardsSwiper .swiper-slide {
    max-width: 280px;
}

.pricing-card {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 10px;
    padding-bottom: 30px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    box-shadow: var(--box-shadow-xs);
    border-radius: var(--br-16);
}

.pricing-card.popular {
    background: #151A35;
}

.pricing-card .card-trial-label {
    position: absolute;
    top: -6px;
    right: -12px;
}

.pricing-content-bottom {
    padding-top: 0!important;
}

.pricing-card .card-label,
.pricing-details-card .card-label{
    position: absolute;
    top: 10px;
    right: 10px;
    max-width: 80%;
    text-align: center;
    height: 36px;
    background: #F90;
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    font-weight: var(--fw-medium);
    color: var(--white);
    padding: 8px 16px;
    border-radius: var(--br-8);
    overflow: hidden;
}

.pricing-details-card .card-label {
    margin-top: 36px;
    right: 26px;
}

.pricing-card .card-label span {
    position: relative;
    white-space: nowrap;
}

.pricing-card .card-label span img {
    position: absolute;
    top: 10px;
    right: 2px;
}

.pricing-details-card .card-label span img {
    position: absolute;
    top: 10px;
    right: 5px;
    width: 60px;
}

.pricing-card .card-header {
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
}

.pricing-card .card-header .card-name {
    color: var(--fuchsia-900);
    font-size: var(--fs-b5);
    line-height: var(--lh-b5);
    font-weight: var(--fw-bold);
    margin-bottom: 2px;
}

.pricing-card .card-header .card-desc {
    color: var(--gray-500);
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    min-height: 40px;
    max-width: 160px;
}

.pricing-card .card-header .card-limits {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pricing-card .card-header .card-limits span {
    color: var(--gray-900);
    font-weight: var(--fw-medium);
}

.pricing-card .card-header .card-price {
    position: relative;
    display: flex;
    align-items: flex-end;
    align-self: flex-start;
}


.pricing-card .card-header .card-price s {
    color: #FD6C84;
}

.pricing-card .card-trial-desc {
    min-height: 24px;
    margin-top: -11px;
    font-size: var(--fs-b1);
    font-weight: var(--fw-semi-bold);
    line-height: var(--lh-b2);
    color: var(--gray-900);
}

.pricing-card.popular .card-trial-desc {
    color: #FFF;
}

.pricing-card .card-trial-desc s {
    color: #FD6C84;
}

.card-header .card-price .discount {
    position: absolute;
    right: 0;
    top: 4px;
    font-weight: var(--fw-medium);
    color: var(--gray-500);
}

.pricing-card .card-header .card-price .discount {
    font-size: var(--fs-b5);
    line-height: var(--lh-b5);
}

.pricing-details .card-header .card-price .discount {
    font-size: var(--fs-b4);
    line-height: var(--lh-b4);
}

.pricing-card .card-header .card-price span:first-of-type {
    color: var(--gray-900);
    font-weight: var(--fw-semi-bold);
    font-size: 36px;
    line-height: 72px;
    letter-spacing: -0.72px;
}

.pricing-card .card-header .card-price span:last-of-type {
    color: var(--gray-500);
    font-weight: var(--fw-medium);
    margin: 0 0 15px 4px;
    font-size: 16px;
    line-height: 24px;
}

.pricing-card .card-header .btn-general {
    padding: 12px;
    margin-top: 6px;
    font-size: var(--fs-b2);
    line-height: var(--lh-b2);
    font-weight: var(--fw-semi-bold);
}

.pricing-card.popular .card-header .btn-general {
    background-color: #FD9801;
    border-color: #FD9801;
    color: #fff;
}

.pricing-card.popular .card-header .btn-general:hover {
    background-color: #FFAA0A;
    border-color: #FFAA0A;
}

.pricing-card.popular .card-header .btn-general:focus {
    background-color: #F88E00;
    border-color: #F88E00;
}

.pricing-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0 32px 24px;
    justify-content: flex-start;
}

.pricing-card .card-body > span {
    font-weight: var(--fw-semi-bold);
    margin-bottom: 20px;
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    min-height: 40px;
}

.pricing-card .card-body > p {
    font-weight: var(--fw-regular);
    color: var(--gray-500);
}

.pricing-card .card-body .btn-text {
    align-self: center;
}

.pricing-card .card-body .card-features {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.pricing-card .card-body .card-features-item {
    display: flex;
    align-items: center;
}


.pricing-card .card-body .card-features-item .label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    text-align: center;
    color: var(--white);
    background-color: var(--fuchsia-900);
    border-radius: var(--br-16);
    font-size: var(--fs-b1);
    line-height: 1;
    font-weight: var(--fw-medium);
}

.pricing-card .card-body .card-features-item:not(:last-child) {
    margin-bottom: 16px;
}

.pricing-card .card-body .card-features-item > img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-right: 12px;
    flex-shrink: 0;
}

.pricing-card .card-body .card-features-item span.with-label {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pricing-card .card-body .card-features-item span:not(.label) {
    color: var(--gray-500);
    font-size: 12px;
    line-height: var(--lh-b1);
}


.pricingCardsSwiper .swiper-slide:nth-child(2) .pricing-card {
    /*transform: scale(1.1);*/
}

.pricing-card.popular .card-name,
.pricing-card.popular .card-desc,
.pricing-card.popular .card-body > span,
.pricing-card.popular .card-features-item span:not(.label),
.pricing-card.popular .card-header .card-price span:first-of-type,
.pricing-card.popular .card-header .card-price span:last-of-type {
    color: #fff;
}

.pricing-card.popular .card-features-item span:not(.label) {
    font-weight: var(--fw-bold);
}

.free-plan-link {
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
    font-weight: var(--fw-medium);
}

.free-plan-link a {
    margin-left: 8px;
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
    font-weight: var(--fw-medium);
    text-decoration: underline;
}

.pricing-details {
    display: flex;
    width: 100%;
}

.pricing-details-sidebar {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    width: 322px;
    position: relative;
}

.sidebar-header {
    position: sticky;
    top: 77px;
    height: 234px;
    color: var(--gray-900);
    font-size: 28px;
    font-weight: var(--fw-semi-bold);
    line-height: 38px;
    padding: 50px 20px 20px;
    background-color: #f9f9f9;
    margin-bottom: 12px;
    z-index: 1;
}

.sidebar-list {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-shadow: 0 8px 8px -4px rgba(0, 0, 0, 0.05);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.sidebar-list-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.sidebar-list:not(:last-child) {
    margin-bottom: 20px;
}

.sidebar-list .sidebar-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
    font-weight: var(--fw-semi-bold);
    color: var(--fuchsia-900);
    padding: 12px 24px;
    height: 64px;
    cursor: pointer;
    user-select: none;
}

.sidebar-list .sidebar-list-header.collapsed svg {
    transform: rotate(0deg);
}

.sidebar-list .sidebar-list-header svg {
    transform: rotate(180deg);
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    transition: all 250ms ease-in-out;
}

.sidebar-list .sidebar-list-header svg path {
    stroke: var(--fuchsia-900);
}

.sidebar-list .sidebar-list-item {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    color: var(--gray-900);
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    font-weight: var(--fw-medium);
    height: 64px;
    border-top: 1px solid var(--gray-200);
}

.sidebar-list .sidebar-list-item .label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    text-align: center;
    color: var(--white);
    background-color: var(--fuchsia-900);
    border-radius: var(--br-16);
    margin-left: 16px;
    font-size: var(--fs-b1);
    line-height: 1;
    font-weight: var(--fw-medium);
}

.tooltip-wrapper {
    position: relative;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    flex-shrink: 0;
    cursor: pointer;
}

.tooltip-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tooltip {
    position: absolute;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: calc(100% + 16px);
    width: 240px;
    min-height: 50px;
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    padding: 12px 16px;
    background-color: var(--gray-500);
    color: var(--white);
    border-radius: var(--br-8);
    z-index: 9;
    transform: translateY(-50%);
    box-shadow: var(--box-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: all 250ms ease-in-out;
}

.tooltip.bottom.left {
    top: calc(100% + 16px);
    right: -20px;
    left: auto;
    transform: none;
}

.tooltip a {
    text-decoration: underline;
    color: var(--white);
}

.tooltip:before {
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    background-color: var(--gray-500);
    top: 50%;
    left: -8px;
    border-radius: var(--br-2);
    transform: translateY(-50%) rotate(45deg);
    z-index: 9;
    transition: all 250ms ease-in-out;
}

.tooltip.bottom:before {
    top: -8px;
    left: auto;
    right: 20px;
    transform: rotate(45deg);
}

.tooltip-wrapper:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

.swiper {
    overflow: clip;
}

.pricingDetailsSwiper {
    width: calc(100% - 322px);
}

.pricingDetailsSwiper .swiper-slide {
    /*max-width: 242px;*/
    max-width: 308px;
}

.pricing-details-card {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    overflow: clip;
}

.pricing-details-card .card-header {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: #f9f9f9;
    padding: 50px 20px 20px;
    position: sticky;
    top: 77px;
    z-index: 1;
}

.pricing-details-card .card-header .card-name {
    display: block;
    padding: 0 24px 16px;
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-b4);
    line-height: var(--lh-b4);
    border-bottom: 1px solid var(--gray-200);
    height: 46px;
}

.pricing-details-card .card-header > div:last-of-type {
    padding: 12px 24px 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.pricing-details-card .card-trial-desc {
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    color: var(--gray-700);
    display: flex;
    flex-grow: 1;
}

.pricing-details-card .card-header > div:last-of-type .card-desc {
    color: var(--gray-500);
    font-size: var(--fs-b1);
    font-weight: var(--fw-semi-bold);
    line-height: var(--lh-b1);
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
}

.pricing-details-card .card-header > div .card-price {
    position: relative;
    display: flex;
    align-items: flex-end;
    align-self: flex-start;
}

.pricing-details-card .card-header > div .card-price span:first-of-type {
    color: var(--gray-900);
    font-weight: var(--fw-semi-bold);
    font-size: 36px;
    line-height: 60px;
}

.pricing-details-card .card-header > div .card-price span:last-of-type {
    color: var(--gray-500);
    font-weight: var(--fw-medium);
    margin: 0 0 12px 4px;
    font-size: 16px;
    line-height: 24px;
}

.pricing-details-card .card-header > div .btn-general {
    margin-top: 24px;
    padding: 12px;
    width: 100%;
}

.pricing-details-card .card-body {
    margin-top: 12px;
}

.pricing-details-card .card-body .details-list {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: #FFF;
    box-shadow: 0 8px 8px -4px rgba(0, 0, 0, 0.05);
}

.pricing-details-card .card-body .details-list.rounded {
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

.pricing-details-card .card-body .details-list:not(:last-child) {
    margin-bottom: 20px;
}

.pricing-details-card .card-body .details-list .details-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
    font-weight: var(--fw-medium);
    color: var(--fuchsia-900);
    padding: 12px 24px;
    height: 64px;
    cursor: pointer;
}

.pricing-details-card .card-body .details-list .details-list-header.collapsed svg {
    transform: rotate(0deg);
}

.pricing-details-card .card-body .details-list .details-list-header svg {
    transform: rotate(180deg);
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: all 250ms ease-in-out;
}

.pricing-details-card .card-body .details-list .details-list-header svg path {
    stroke: var(--fuchsia-900);
}

.pricing-details-card .card-body .details-list .details-list-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.details-list .details-list-item {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    color: var(--gray-500);
    height: 64px;
    border-top: 1px solid var(--gray-200);
}

.details-list:last-of-type .details-list-item:last-of-type {
    border-bottom: 1px solid var(--gray-200);
}

.details-list .details-list-item .icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1;
}

.details-list .details-list-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.pricingDetailsSwiper .swiper-slide .btn-general {
    padding: 12px;
}

.details-list .details-list-item > span:first-child {
    color: var(--gray-900);
    font-weight: var(--fw-medium);
    margin-right: 12px;
}

.pricing-details-card .card-footer {
    background-color: #f9f9f9;
    padding: 40px 24px 32px;
    box-shadow: 0 8px 8px -4px rgba(0, 0, 0, 0.05);
}

.pricingCardsSwiper .swiper-pagination {
    bottom: 0;
}

.pricingCardsSwiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: var(--gray-300);
    margin: 0 8px !important;
}

.reviewsSwiper .swiper-pagination-bullet-active,
.pricingCardsSwiper .swiper-pagination-bullet-active {
    background-color: var(--fuchsia-900);
}

/*   TrustPilot reviews   */

.trustpilot-reviews {
    padding: 48px 0;
}

.trustpilot-reviews .container {
    display: flex;
    gap: 100px;
}

.trustpilot-reviews .trustpilot-logo {
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
}

.trustpilot-logo a {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.trustpilot-logo span {
    font-size: 20px;
    font-weight: var(--fw-semi-bold);
    line-height: var(--lh-b4);
    color: #151A31;
}

.trustpilot-reviews .reviewsSwiper {
    min-height: 200px;
    width: calc(100% - 236px);
    display: flex;
    align-items: center;
}

.trustpilot-reviews .reviewsSwiper .swiper-slide {
    margin: 0 auto;
}

.trustpilot-reviews .review-item a {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.trustpilot-reviews .review-item img {
    max-width: 102px;
    height: auto;
}

.trustpilot-reviews .reviewsSwiper .swiper-slide:nth-child(4) {
    display: none
}

.trustpilot-reviews .review-item.trustpilot-logo img {
    max-width: 100%;
}

.trustpilot-reviews .review-item p {
    font-size: var(--fs-b2);
    font-weight: var(--fw-medium);
    line-height: 22px;
    text-align: center;
    color: #151A31;
}

/*    Pricing - As Featured on   */

.as-featured-on {
    padding: 48px 0 96px;
}

.as-featured-on h3 {
    margin: auto;
}

.as-featured-on .platforms {
    gap: 30px;
    padding-top: 50px;
    display: flex;
    justify-content: space-between;

}

.as-featured-on img {
    height: 45px;
}

section.need-help {
    background-color: white;
}

section.need-help .section-body {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

#pricing-page .schedule-free {
    background-color: transparent;
}

#pricing-page .schedule-free .container > div {
    background-color: #2684FF;
    padding-top: 72px;
    padding-bottom: 72px;
    border-radius: 20px;
}

#pricing-page .schedule-free .btn-general {
    background: #A9F04D;
    color: #2684FF;
}

#pricing-page .schedule-free .btn-general svg path {
    stroke: #2684FF;
}

/* ==============================
        Blogs
============================== */
#free-tools-page .blogs,
#blogs-page .blogs {
    padding-top: 48px;
}

.featured-blogs {
    padding-top: 48px;
}

.featured-blogs .section-header {
    margin-bottom: 16px;
}

.featured-blogs .section-header h3 {

    font-size: var(--fs-b5);
    line-height: var(--lh-b5);
}

.featured-blogs .blog-item .blog-item-header {
    height: 436px;
}

.featured-blogs .blog-item .blog-item-body {
    padding-top: 40px;
    flex-direction: row;
    justify-content: space-between;
}

.featured-blogs .blog-item .blog-item-body > div:first-child {
    max-width: 480px;
    margin-right: 16px;
}

.featured-blogs .blog-item .blog-item-body > div:last-child {
    flex-shrink: 0;
    margin: 0;
}

.glossary-nav {
    position: sticky;
    top: 0;
    background: var(--white);
    margin-top: 48px;
    z-index: 99;
}

.glossary-nav nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 0;
}

.glossary-nav nav a {
    padding: 8px;
    font-size: var(--fs-b4);
    line-height: var(--lh-b4);
    font-weight: var(--fw-semi-bold);
    color: var(--fuchsia-800);
    text-transform: uppercase;
    transition: all 250ms ease-in-out;
    border-bottom: 3px solid transparent;
}

.glossary-nav nav a:hover {
    color: var(--fuchsia-900);
}

.glossary-nav nav a.active {
    border-color: var(--fuchsia-900);
}

.glossary-nav nav a[disabled] {
    pointer-events: none;
    color: var(--gray-500)
}

.glossary-header {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: var(--fw-semi-bold);
    color: var(--gray-900);
    text-transform: uppercase;
    padding-top: 84px;
}

.glossary-item {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 16px;
    background-color: var(--white);
    box-shadow: var(--box-shadow-xl);
    border-radius: var(--br-12);
}

.glossary-label {
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    font-weight: var(--fw-semi-bold);
    margin-bottom: 6px;
}

.glossary-label a {
    color: var(--blue)
}

.glossary-item > a {
    color: var(--gray-900);
    transition: all 250ms ease-in-out;
    margin-bottom: 6px;
}

.glossary-item > a:hover .glossary-title {
    color: var(--fuchsia-900);
}

.glossary-title {
    font-size: var(--fs-b4);
    line-height: var(--lh-b4);
    font-weight: var(--fw-semi-bold);
}

.glossary-desc {
    font-size: var(--fs-b2);
    line-height: var(--lh-b2);
    color: var(--gray-600);
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.popular-blog-item {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 16px;
    background-color: var(--white);
    box-shadow: var(--box-shadow-xl);
    border-radius: var(--br-12);
}

.popular-blog-item:not(:last-child) {
    margin-bottom: 16px;
}

.popular-blog-item > span a {
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    font-weight: var(--fw-semi-bold);
    margin-bottom: 8px;
    color: var(--fuchsia-900);
}

.popular-blog-item:nth-child(3n-2) > span a {
    color: var(--moss);
}

.popular-blog-item:nth-child(3n-1) > span a {
    color: var(--blue);
}

.popular-blog-item:nth-child(3n) .blog > span a {
    color: var(--violet);
}

.popular-blog-item h4 {
    font-size: var(--fs-b2);
    line-height: var(--lh-b2);
    font-weight: var(--fw-semi-bold);
    margin-bottom: 8px;
    color: var(--gray-900);
    transition: color 250ms ease-out;
}

.popular-blog-item h4:hover {
    color: var(--fuchsia-900);
}

.popular-blog-item p {
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    color: var(--gray-500);
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.all-blogs {
    padding-top: 40px;
}

.all-blogs .row > * {
    padding-right: calc(var(--bs-gutter-x) * .67);
    padding-left: calc(var(--bs-gutter-x) * .67);
}

.all-blogs .col-lg-4:nth-child(3n-2) .blog-label a {
    color: var(--moss);
}

.all-blogs .col-lg-4:nth-child(3n-1) .blog-label a {
    color: var(--blue);
}

.all-blogs .col-lg-4:nth-child(3n) .blog-label a {
    color: var(--violet);
}

.all-blogs-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 48px;
}

/* ==============================
        Help center
============================== */
.help-center-header {
    padding: 0;
}

.help-center-header .section-header {
    background-color: var(--fuchsia-900);
}

.help-center-header .section-header .container {
    padding-top: 96px;
    padding-bottom: 96px;
    background-image: url('../patterns/help-center/sollama.svg'), url('../patterns/help-center/saglama.svg');
    background-position: left center, right center;
    /* background-size: contain; */
    background-repeat: no-repeat;
}

.section-search {
    display: flex;
    align-items: center;
    max-width: 702px;
    width: 100%;
    background: var(--white);
    border: 1px solid var(--gray-300);
    box-shadow: var(--box-shadow-xs);
    border-radius: var(--br-8);
    padding: 0 14px;
    margin-top: 40px;
}

.section-search img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.section-search input {
    border: none;
    flex-grow: 1;
    height: 46px;
    font-size: var(--fs-b2);
    line-height: var(--lh-b2);
    color: var(--gray-500);
    margin-left: 8px;
}

.help-center-item {
    display: flex;
    flex-direction: column;
}

.help-item .help-item-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--fuchsia-300);
}

.help-item .help-item-header > h3 {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    font-size: var(--fs-b5);
    line-height: var(--lh-b5);
}

.help-item .help-item-header > h3 span {
    font-size: var(--fs-b3);
    line-height: var(--lh-b5);
    font-weight: var(--fw-regular);
    color: var(--gray-500);
    margin-left: 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

.help-item .help-item-header > span {
    margin-left: 8px;
    margin-top: 3px;
}

.help-item .help-item-header > span svg {
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: all 250ms ease-in-out;
}

.help-item .help-item-header > span svg path {
    stroke: var(--gray-500);
}

.help-item .help-item-header.active > span svg {
    transform: rotate(180deg);
}

.help-item-body {
    display: flex;
    flex-direction: column;
    padding-top: 32px;
}

.help-item-body .btn-text span.view-less {
    display: none;
}

.help-item-body .btn-text.active span.view-less {
    display: block;
}

.help-item-body .btn-text.active span.view-all {
    display: none;
}

.help-item-body .btn-text.active svg {
    transform: rotate(180deg);
}

.help-item-list {
    display: flex;
    flex-direction: column;
}

.help-item-list.all {
    display: none;
}

.help-item-list a {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
    font-weight: var(--fw-medium);
    color: var(--gray-700);
    transition: all 250ms ease-in-out;
}

.help-item-list:not(:last-child), .help-item-list a:not(:last-child) {
    margin-bottom: 32px;
}

.help-item-list a svg {
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-top: 2px;
    flex-shrink: 0;
}

.help-item-list a svg path {
    stroke: var(--gray-400);
    transition: all 250ms ease-in-out;
}

.help-item-list a:hover {
    color: var(--fuchsia-900);
}

.help-item-list a:hover svg path {
    stroke: var(--fuchsia-900);
}

.help-center-content .row.gy-5 {
    --bs-gutter-y: 4rem;
}

.help-center-content .row .col-lg-6:nth-child(2n) .help-item {
    padding-left: 20px;
}

.help-center-content .row .col-lg-6:nth-child(2n+1) .help-item {
    padding-right: 20px;
}

.table {
    height: 600px;
}

.table-col {
    border: 1px solid var(--gray-300);
}

.table-col {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.table-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    border: 1px solid var(--gray-300);
    flex-basis: 100px;
}

/* ==============================
        Help center single
============================== */
.sidebar {
    display: flex;
    flex-direction: column;
    padding-right: 32px;
    border-right: 1px solid var(--gray-200);
}

.sidebar .sidebar-item {
    display: flex;
    flex-direction: column;
}

.sidebar .sidebar-item:not(:last-child) {
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--gray-200);
}

.sidebar .sidebar-item .sidebar-item-header {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    font-weight: var(--fw-semi-bold);
    color: var(--fuchsia-900);
    cursor: pointer;
}

.sidebar .sidebar-item .sidebar-item-header svg {
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: all 250ms ease-in-out;
}

.sidebar .sidebar-item.active .sidebar-item-header svg {
    transform: rotate(180deg);
}

.sidebar .sidebar-item .sidebar-item-header svg path {
    stroke: var(--fuchsia-900);
}

.sidebar .sidebar-item .sidebar-item-list {
    display: none;
    flex-direction: column;
    padding-top: 20px;
}

.sidebar .sidebar-item.active .sidebar-item-list {
    display: flex;
}

.sidebar .sidebar-item .sidebar-item-list li:not(:last-child) {
    margin-bottom: 8px;
}

.sidebar .sidebar-item .sidebar-item-list li a {
    display: block;
    padding: 10px 14px;
    color: var(--gray-500);
    font-size: var(--fs-b2);
    line-height: var(--lh-b2);
    font-weight: var(--fw-medium);
    border-radius: var(--br-6);
    transition: all 250ms ease-in-out;
}

.sidebar .sidebar-item .sidebar-item-list li:hover a {
    background-color: var(--fuchsia-50);
    color: var(--fuchsia-900);
}

.help-center-single .sidebar-wrapper {
    position: sticky;
    top: 112px;
}

.help-center-single-header {
    margin-bottom: 48px;
}

.help-center-single-header > div {
    display: flex;
    justify-content: space-between;
}

.help-center-single-header > div span {
    font-size: var(--fs-b2);
    line-height: var(--lh-b2);
    font-weight: var(--fw-semi-bold);
    color: var(--fuchsia-900);
    margin-bottom: 12px;
}

.help-center-single-header h1 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
}

.help-center-single-header p {
    margin-top: 32px;
    color: var(--gray-500);
    font-size: var(--fs-b4);
    line-height: var(--lh-b4);
}

/* ==============================
        Blog single
============================== */

.blog-single-header {
    padding: 48px 0;
}

.blog-single-header .section-header .section-label {
    color: var(--blue);
}

.blog-single-header .section-header > h1 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
}

.blog-single {
    background-color: var(--white);
}

.blog-single-banner img {
    display: block;
    width: 100%;
    height: auto;
}

.blog-single-sidebar {
    position: sticky;
    top: 112px;
    display: flex;
    flex-direction: column;
}

.blog-single-sidebar .sidebar {
    padding-right: 0;
    border-right: none;
}

.blog-single-sidebar > div:not(:last-child) {
    margin-bottom: 20px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--gray-200);
}

.blog-single-sidebar .tables-of-content > span {
    display: block;
    font-weight: var(--fw-semi-bold);
    color: var(--fuchsia-900);
    margin-bottom: 16px;
}

.blog-single-sidebar .tables-of-content > ul li:not(:last-child) {
    margin-bottom: 12px;
}

.blog-single-sidebar .tables-of-content > ul li a {
    font-weight: var(--fw-medium);
    color: var(--gray-500);
    transition: color 250ms ease-in-out;
}

.blog-single-sidebar .tables-of-content > ul li a:hover {
    color: var(--gray-700);
}

.table-of-contents p {
    color: var(--gray-900);
    padding-bottom: 20px;
    font-weight: var(--fw-bold);
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
}

.toc-content > .toc-list {
    position: relative;
    overflow-y: hidden;
}

.toc-content .toc-list-item {
    padding-bottom: 5px;
}

.toc-content .toc-link {
    color: var(--gray-500);
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
}

.toc-content .is-active-link {
    color: var(--gray-900);
    font-weight: var(--fw-medium);
}

.blog-single-sidebar .blog-author {
    display: flex;
}

.blog-single-sidebar .blog-author .author-image {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    margin-right: 12px;
    border-radius: 50%;
    overflow: hidden;
}

.blog-single-sidebar .blog-author .author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-single-sidebar .blog-author .author-info {
    display: flex;
    flex-direction: column;
}

.blog-single-sidebar .blog-author .author-info .author-name {
    color: var(--gray-900);
    font-weight: var(--fw-medium);
}

.blog-single-sidebar .blog-author .author-info .blog-date {
    color: var(--gray-500);
}

.sidebar-banner {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    cursor: pointer;
}

.sidebar-banner img {
    width: 100%;
}

.blog-single-sidebar .social-links ul {
    display: flex;
    align-items: center;
}

.blog-single-sidebar .social-links ul li:not(:last-child) {
    margin-right: 12px;
}

.blog-single-sidebar .social-links ul li a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--gray-300);
    box-shadow: var(--box-shadow-xs);
    border-radius: var(--br-8);
    transition: all 250ms ease-in-out;
}

.blog-single-sidebar .social-links ul li a svg {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.blog-single-sidebar .social-links ul li a svg path {
    fill: var(--gray-400);
    transition: all 250ms ease-in-out;
}

.blog-single-sidebar .social-links ul li a:hover svg path {
    fill: var(--gray-700);
}

.subscribe-content {
    padding: 64px;
    background-color: var(--fuchsia-900);
    background-image: url('../patterns/blog-single/hand-drawn-accents.svg'), url('../patterns/blog-single/hand-drawn-accents-1.svg');
    background-repeat: no-repeat;
    background-position: top 0 left 56px, bottom 10px right 154px;
    border-radius: var(--br-16);
}

.subscribe-text {
    color: white;
}

.subscribe-text > span {
    display: block;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    font-weight: var(--fw-semi-bold);
    margin-bottom: 16px;
}

.subscribe-text > p {
    color: var(--fs-b4);
    line-height: var(--lh-b4);
}


.subscribe-form .input-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.subscribe-form .input-group input {
    flex-grow: 1;
    padding: 12px 14px;
    height: 48px;
    font-size: var(--fs-b2);
    line-height: var(--lh-b2);
    color: var(--gray-700);
    background: var(--white);
    border: 1px solid var(--white);
    margin-right: 16px;
    box-shadow: var(--box-shadow-xs);
    border-radius: var(--br-8);
}

.subscribe-form .input-group input::placeholder {
    color: var(--gray-500);
}

.subscribe-form .input-group .btn-general {
    border-color: var(--white);
}

.subscribe-form p {
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    margin-top: 6px;
    color: var(--fuchsia-200);
}

.subscribe-form p a {
    text-decoration: underline;
    color: var(--fuchsia-200);
}

.content-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--fuchsia-900);
    background-image: url('../patterns/blog-single/hand-drawn-accents-2.svg'), url('../patterns/blog-single/hand-drawn-pen-scribble.svg'), url('../patterns/blog-single/hand-drawn-accents-3.svg');
    background-repeat: no-repeat;
    background-position: top 12px left 18px, top 0 right 0, bottom 32px right 88px;
    color: var(--white);
    padding: 64px 32px;
    border-radius: var(--br-12);
}

.content-banner .banner-title {
    display: block;
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    margin-bottom: 20px;
}

.content-banner .banner-desc {
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
}

.content-banner .btn-general {
    margin-top: 32px;
}

/* ==============================
        Author profile
============================== */
#author-profile-page .blogs .author-image, #author-profile-page .blogs .author-name {
    display: none;
}

.profile-content {
    display: flex;
    align-items: center;
    background-color: var(--fuchsia-50);
    padding: 64px 48px;
    border-radius: var(--br-12);
}

.profile-content > div:last-child {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.profile-content .author-image {
    flex-shrink: 0;
    width: 280px;
    height: 280px;
    border-radius: var(--br-12);
    box-shadow: var(--box-shadow-lg);
    overflow: hidden;

}

.profile-content .author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-content .author-info {
    padding: 0 32px;
    flex-grow: 1;
}

.profile-content .author-info > span {
    display: block;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: var(--fw-semi-bold);
    color: var(--gray-900);
}

.profile-content .author-info > p {
    font-size: var(--fs-b4);
    line-height: var(--lh-b4);
    color: var(--gray-500);
    margin-top: 20px;
}

.profile-content .author-blogs-count {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-weight: var(--fw-semi-bold);
    color: var(--fuchsia-900);
    background-color: var(--white);
    padding: 12px;
    border-radius: var(--br-12);
    box-shadow: var(--box-shadow-lg);
    word-break: break-all;
    overflow: hidden;
}

.profile-content .author-blogs-count span {
    font-size: var(--fs-b2);
    line-height: var(--lh-b2);
}

/* --------------------------------------------------------------------------
   9.Post — Content
   -------------------------------------------------------------------------- */
.post-content {
    --header-height-logo: 50px;
    --footer-height-logo: 35px;
    --max-width-wrap: 1500px;
    --margin-items: 24px;
    --border-radius: 4px;
    --border-radius-small: 2px;
    --border-radius-big: 8px;
    --font-family-primary: 'Alata', sans-serif;
    --font-weight-primary-regular: 400;
    --font-family-secondary: 'Mulish', sans-serif;
    --font-weight-secondary-regular: 400;
    --font-weight-secondary-bolder: 700;
    --ghost-accent-color: #6f1877;
    --color-font-one: #1a2a30;
    --color-font-two: #454545;
    --color-font-three: #1a2a30;
    --color-body: #fff;
    --color-one: #f1f1f2;
    --color-two: #fff;
    --color-three: #f1f1f2;
    --color-four: #1a2a30;
    --color-five: #f1f1f2;
    --color-six: #dfdfe1;
    --color-white: #fff;
    --color-notification: #aaef52;
    --color-notification-false: #F74856;
    --overlay-search: rgba(0, 0, 0, .7);
    --overlay-button: rgba(0, 0, 0, .06);

    margin: 0 auto 15vh;
    padding-right: 15px;
    padding-left: 15px;
    color: var(--color-font-two);
    font-family: var(--font-family-secondary);
    font-size: 19px;
    font-weight: var(--font-weight-secondary-regular);
    line-height: 1.5;
    word-wrap: break-word;
    word-break: break-word;
}

/* Typography
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6,
.post-content input,
.post-content blockquote {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-primary-regular);
    line-height: 1.3;
    color: var(--color-font-one);
}

.post-content li {
    list-style-type: initial;
}

/* Links
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content a {
    text-decoration: none;
    color: var(--color-font-one);
}

/* Koenig card
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content .kg-card {
    width: 100%;
}

/* Margin elements
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content p,
.post-content iframe,
.post-content ol,
.post-content ul,
.post-content table,
.post-content p img {
    margin-top: 0;
    margin-bottom: 40px;
}

.post-content hr {
    margin-top: 60px;
    margin-bottom: 80px;
}

.post-content blockquote {
    margin-top: 75px;
    margin-bottom: 75px;
}

.post-content .kg-card {
    margin-top: 50px;
    margin-bottom: 70px;
}

.post-content pre,
.post-content .kg-card.kg-code-card {
    margin-top: 40px;
    margin-bottom: 40px;
}

.post-content p,
.post-content table,
.post-content hr,
.post-content blockquote,
.post-content pre,
.post-content p img,
.post-content .kg-card {
    margin-right: 0;
    margin-left: 0;
}

.post-content iframe,
.post-content .kg-embed-card > div,
.post-content .kg-embed-card > iframe,
.post-content .kg-embed-card > .fb-post,
.post-content .kg-embed-card > .twitter-tweet {
    margin-right: auto !important;
    margin-left: auto !important;
}

.post-content .kg-embed-card > .twitter-tweet > iframe {
    margin-bottom: 0;
}

/* Typography
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5 {
    line-height: 1.5;
    margin-right: 0;
    margin-bottom: 20px;
    margin-left: -1px;
}

.post-content h1 {
    font-size: 55px;
    margin-top: 60px;
}

.post-content h2 {
    font-size: 41px;
    margin-top: 55px;
}

.post-content h3 {
    font-size: 31px;
    margin-top: 45px;
}

.post-content h4 {
    font-size: 24px;
    margin-top: 40px;
}

.post-content h5 {
    font-size: 20px;
    margin-top: 35px;
}

.post-content h6 {
    font-family: var(--font-family-secondary);
    font-size: 11px;
    font-weight: var(--font-weight-secondary-bolder);
    margin-top: 35px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Paragraph
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content p {
    line-height: 1.6;
    position: relative;
}

/* strong
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content strong {
    color: var(--color-font-one);
}

/* blockquote
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content blockquote p {
    line-height: 1.3;
    margin: 0;
}

/* Koenig — blockquote
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content blockquote {
    font-size: 40px;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding-left: 55px;
}

.post-content blockquote::before {
    font-size: 120px;
    position: absolute;
    top: -15px;
    left: -15px;
    content: '"';
    color: var(--ghost-accent-color);
}

.post-content blockquote cite {
    font-size: 25px;
    font-style: normal;
}

/* Links
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content a {
    transition: border-bottom-color .2s ease;
    border-bottom: 2px solid var(--ghost-accent-color);
}

.post-content a:hover {
    border-bottom-color: var(--color-font-one);
}

.post-content h1 a,
.post-content h2 a,
.post-content h3 a,
.post-content h4 a,
.post-content h5 a,
.post-content h6 a,
.post-content blockquote a {
    transition: background-size .6s ease-out;
    color: var(--color-font-one);
    border: none;
    background: linear-gradient(var(--ghost-accent-color), var(--ghost-accent-color)) no-repeat left 130%/80% 30%;
}

.post-content h1 a:hover,
.post-content h2 a:hover,
.post-content h3 a:hover,
.post-content h4 a:hover,
.post-content h5 a:hover,
.post-content h6 a:hover,
.post-content blockquote a:hover {
    background-size: 97% 30%;
}

/* Disable styling for image when is a link */
.post-content .post-image-link {
    border-bottom: none !important;
}

/* hr
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content hr {
    position: relative;
    display: block;
    width: 80px;
    height: 6px;
    text-align: right;
    border: none;
    border-radius: var(--border-radius-small);
    background-color: var(--color-five);
}

/* mark
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content mark {
    padding: 0 4px 2px;
    color: var(--color-font-three);
    border-radius: var(--border-radius-small);
    background-color: var(--ghost-accent-color);
}

/* kbd
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content kbd {
    font-size: 70%;
    font-weight: var(--font-weight-secondary-bolder);
    display: inline-block;
    padding: 2px 8px 1px;
    border: 1px solid;
    border-radius: var(--border-radius-small);
}

/* iframe
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content iframe {
    display: block;
}

/* Lists
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content ul,
.post-content ol {
    margin-right: 0;
    margin-left: 15px;
}

.post-content ul {
    padding-left: 15px;
    list-style: disc outside;
}

.post-content ol {
    padding-left: 20px;
}

.post-content ul li ul {
    list-style: circle outside;
}

.post-content ol,
.post-content ol li ol {
    list-style: decimal outside;
}

.post-content ul ul,
.post-content ul ol,
.post-content ol ol,
.post-content ol ul {
    font-size: 90%;
    margin: 15px 0;
}

.post-content li {
    margin-bottom: 10px;
}

.post-content dl dt {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-primary-regular);
    float: left;
    clear: left;
    overflow: hidden;
    width: 180px;
    margin-bottom: 10px;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-font-one);
}

.post-content dl dd {
    margin-bottom: 10px;
    margin-left: 200px;
}

/* Table
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content table {
    font-size: 16px;
    display: table;
    width: 100%;
    max-width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    text-align: left;
    background-color: transparent;
}

.post-content th {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-primary-regular);
    color: var(--color-font-one);
    border-top: 2px solid var(--color-five);
}

.post-content th,
.post-content td {
    display: table-cell;
    padding: 10px 12px;
    border-bottom: 2px solid var(--color-five);
}

.post-content th:first-child,
.post-content td:first-child {
    padding-left: 5px;
}

.post-content th:last-child,
.post-content td:last-child {
    padding-right: 5px;
}

/* Responsive */
.post-content .responsive-table {
    overflow-x: auto;
    word-break: normal;
}

/* Footnotes
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content sup a,
.post-content .footnote-backref {
    border-bottom: none;
}

.post-content .footnotes {
    padding: 10px 0 0;
}

.post-content .footnotes-list {
    padding-left: 20px;
    list-style: decimal;
}

.post-content .footnotes-sep {
    margin: 50px 0 10px;
}

.post-content .footnotes p,
.post-content .footnote-item {
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 10px;
}

/* Cardmas
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content .kg-card,
.post-content .kg-card * {
    box-sizing: border-box;
}

.post-content .kg-button-card .kg-btn,
.post-content .kg-nft-card a,
.post-content .kg-product-card .kg-product-card-button {
    border-bottom: none;
}

.post-content .kg-audio-card .kg-audio-title,
.post-content .kg-button-card .kg-btn,
.post-content .kg-file-card .kg-file-card-title,
.post-content .kg-product-card .kg-product-card-title,
.post-content .kg-product-card .kg-product-card-button,
.post-content .kg-toggle-card .kg-toggle-heading-text {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-primary-regular);
}

.post-content .kg-audio-card,
.post-content .kg-callout-card,
.post-content .kg-file-card .kg-file-card-container,
.post-content .kg-nft-card .kg-nft-card-container,
.post-content .kg-product-card .kg-product-card-container,
.post-content .kg-toggle-card {
    border-radius: var(--border-radius);
}

.post-content .kg-audio-card .kg-audio-thumbnail,
.post-content .kg-file-card .kg-file-card-icon::before,
.post-content .kg-product-card .kg-product-card-image {
    border-radius: calc(var(--border-radius) / 2);
}

/* Audio card */
.post-content .kg-audio-card .kg-audio-volume-slider {
    width: 55px;
}

.post-content .kg-audio-card svg {
    fill: var(--color-font-one);
}

.post-content .kg-audio-card .kg-audio-playback-rate {
    color: var(--color-font-one);
}

/* Button card & Product card */
.post-content .kg-button-card .kg-btn {
    height: 2.6em;
    padding: 1.3em 1.4em;
}

.post-content .kg-button-card .kg-btn,
.post-content .kg-product-card .kg-product-card-button {
    text-decoration: none;
    color: var(--color-two);
}

.post-content .kg-product-card-button:hover {
    opacity: .85;
}

/* Callout card */
.post-content .kg-callout-card .kg-callout-emoji {
    flex-shrink: 0;
}

/* NFT card */
.post-content .kg-nft-card a {
    text-decoration: none;
}

.post-content .kg-nft-card .kg-nft-image {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.post-content .kg-nft-card .kg-nft-card-container {
    box-shadow: inset 0 0 0 1px rgb(124 139 154/25%);
}

/* Video card */
.post-content .kg-video-card.kg-width-full {
    right: 50%;
    left: 50%;
    width: calc(100vw - 65px - 65px);
    margin: 0 calc(-50vw + 65px);
}

/* RWD — Video card */
@media (max-width: 1024px) and (min-width: 481px) {
    .post-content .kg-video-card.kg-width-full {
        width: calc(100vw - 25px - 25px);
        margin-right: calc(-50vw + 25px);
        margin-left: calc(-50vw + 25px);
    }

}

@media (max-width: 480px) {
    .post-content .kg-video-card.kg-width-full {
        width: 100vw;
        margin-right: -50vw;
        margin-left: -50vw;
        border-radius: 0;
    }

}

@media (min-width: 1281px) {
    .post-content .kg-video-card.kg-width-wide {
        width: calc(100% + 180px + 180px);
        margin-left: -180px;
    }

}

@media (max-width: 1280px) and (min-width: 1025px) {
    .post-content .kg-video-card.kg-width-wide {
        position: relative;
        right: 50%;
        left: 50%;
        width: calc(100vw - 140px - 140px);
        margin-right: calc(-50vw + 140px);
        margin-left: calc(-50vw + 140px);
    }

}

/* Temporarily disable the alternative Blockquote */
.post-content .kg-blockquote-alt {
    position: relative;
}

/* Code
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content code {
    font-size: 85%;
    padding: 2px 5px;
    background-color: var(--color-one);
}

.post-content pre > code {
    display: block;
    padding: 10px 15px;
    white-space: pre-wrap;
    border-radius: var(--border-radius);
}

/* Inline*/
.post-content p code {
    border-radius: var(--border-radius-small);
    background-color: var(--color-five);
}

/* Koenig — Code
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content pre,
.post-content .kg-code-card {
    min-width: 100%;
}

.post-content .kg-code-card pre,
.post-content .kg-code-card code {
    margin: 0;
}

/* Image
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content img,
.post-content p img {
    position: relative;
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

/* Koenig — Image
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content .kg-image-card {
    line-height: 0;
}

.post-content .kg-image-card:not(.kg-width-full):not(.kg-width-wide) {
    text-align: center;
}

.post-content .kg-image-card.kg-width-wide img {
    width: 100%;
}

.post-content .kg-width-full img {
    position: relative;
    right: 50%;
    left: 50%;
    width: calc(100vw - 65px - 65px);
    margin: 0 calc(-50vw + 65px);
}

.post-content .kg-width-full img,
.post-content .kg-image-card.kg-width-wide:not(.kg-gallery-card) img {
    max-width: initial;
}

/* Koenig — Gallery
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content .kg-gallery-image img {
    display: block;
    margin: 0;
    border-radius: 0;
}

.post-content .kg-gallery-container,
.post-content .kg-gallery-row {
    display: flex;
}

.post-content .kg-gallery-container {
    position: relative;
    flex-direction: column;
    margin: 15px auto;
}

.post-content .kg-gallery-row {
    flex-direction: row;
    justify-content: center;
}

.post-content .kg-gallery-row:first-of-type .kg-gallery-image:first-of-type img {
    border-top-left-radius: var(--border-radius);
}

.post-content .kg-gallery-row:first-of-type .kg-gallery-image:last-of-type img {
    border-top-right-radius: var(--border-radius);
}

.post-content .kg-gallery-row:last-of-type .kg-gallery-image:first-of-type img {
    border-bottom-left-radius: var(--border-radius);
}

.post-content .kg-gallery-row:last-of-type .kg-gallery-image:last-of-type img {
    border-bottom-right-radius: var(--border-radius);
}

.post-content .kg-gallery-row:not(:first-of-type) {
    margin: 15px 0 0 0;
}

.post-content .kg-gallery-image:not(:first-of-type) {
    margin: 0 0 0 15px;
}

/* Koenig — Bookmark card
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content .kg-bookmark-container,
.post-content .kg-bookmark-content,
.post-content .kg-bookmark-metadata {
    display: flex;
}

.post-content .kg-bookmark-title,
.post-content .kg-bookmark-metadata {
    font-weight: var(--font-weight-secondary-bolder);
}

.post-content .kg-bookmark-description,
.post-content .kg-bookmark-metadata {
    display: -webkit-box;
    overflow-y: hidden;
    -webkit-box-orient: vertical;
}

.post-content .kg-bookmark-card + .kg-bookmark-card {
    margin-top: -45px;
}

.post-content .kg-bookmark-container {
    overflow: hidden;
    min-height: 140px;
    padding-bottom: 0;
    transition: transform .2s ease-in-out;
    text-decoration: none;
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--color-one);
    box-shadow: none;
}

.post-content .kg-bookmark-container:hover {
    transform: translateY(-3px);
}

.post-content .kg-bookmark-content {
    align-items: flex-start;
    flex-direction: column;
    flex-grow: 1;
    justify-content: start;
    padding: 20px;
}

.post-content .kg-bookmark-title {
    font-family: var(--font-family-primary);
    font-size: 17px;
    font-weight: var(--font-weight-primary-regular);
    line-height: 1.3;
}

.post-content .kg-bookmark-description {
    font-size: 14px;
    line-height: 1.3;
    max-height: 40px;
    margin-top: 12px;
    -webkit-line-clamp: 2;
}

.post-content .kg-bookmark-metadata {
    font-size: 13px;
    align-items: center;
    flex-wrap: wrap;
    height: 22px;
    margin-top: 18px;
    -webkit-line-clamp: 1;
}

.post-content .kg-bookmark-metadata .kg-bookmark-icon {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    margin-bottom: -5px;
    border-radius: 0;
}

.post-content .kg-bookmark-metadata span:nth-of-type(2)::before {
    margin-right: 6px;
    margin-left: 6px;
    content: '•';
}

.post-content .kg-bookmark-author,
.post-content .kg-bookmark-publisher {
    height: 20px;
}

.post-content .kg-bookmark-thumbnail {
    position: relative;
    min-width: 28%;
    max-height: 100%;
}

.post-content .kg-bookmark-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    -o-object-fit: cover;
    object-fit: cover;
}

/* Figcaption
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content img ~ small,
.post-content p img ~ small,
.post-content figcaption {
    font-size: 11px;
    line-height: 1.2;
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0 15px;
    text-align: center;
    letter-spacing: .5px;
    opacity: .8;
}

.post-content figcaption {
    margin-top: 15px;
}

.post-content img ~ small,
.post-content p img ~ small {
    position: absolute;
    right: 0;
    bottom: 25px;
    left: 0;
    max-width: 720px;
    margin: 0 auto;
}

/* Teaser
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content .members-teaser {
    position: relative;
    margin-bottom: 20px;
}

.post-content .members-teaser::after {
    position: absolute;
    right: 50%;
    bottom: -20px;
    left: 50%;
    width: calc(100vw - 40px);
    height: 80%;
    max-height: 340px;
    margin: 0 calc(-50vw + 20px);
    content: '';
    pointer-events: none;
    background-color: var(--color-body);
    mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .013) 8.1%, rgba(0, 0, 0, .049) 15.5%, rgba(0, 0, 0, .104) 22.5%, rgba(0, 0, 0, .175) 29%, rgba(0, 0, 0, .259) 35.3%, rgba(0, 0, 0, .352) 41.2%, rgba(0, 0, 0, .45) 47.1%, rgba(0, 0, 0, .55) 52.9%, rgba(0, 0, 0, .648) 58.8%, rgba(0, 0, 0, .741) 64.7%, rgba(0, 0, 0, .825) 71%, rgba(0, 0, 0, .896) 77.5%, rgba(0, 0, 0, .951) 84.5%, rgba(0, 0, 0, .987) 91.9%, black);
}

/* CTA
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content .members-cta {
    box-sizing: border-box;
    width: 100%;
    margin: 6vh auto 10vh;
    padding: 40px 60px;
    text-align: center;
    border-radius: var(--border-radius);
    background-color: var(--color-two);
    box-shadow: 0 25px 95px 5px rgba(0, 0, 0, .12);
}

.tag-hash-full-image .post-content .members-cta {
    margin-top: 0;
}

.post-content .members-cta h2 {
    line-height: 1.2;
    margin: 20px auto 40px;
}

/* RWD — Koenig images
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 480px) {
    .post-content .kg-width-full img {
        width: 100vw;
        margin-right: -50vw;
        margin-left: -50vw;
        border-radius: 0;
    }

    .post-content .kg-gallery-card .kg-gallery-container {
        margin-bottom: 5px;
    }

    .post-content .kg-gallery-card .kg-gallery-container,
    .post-content .kg-gallery-card .kg-gallery-row:not(:first-of-type) {
        margin-top: 5px;
    }

    .post-content .kg-gallery-card .kg-gallery-image:not(:first-of-type) {
        margin-left: 5px;
    }

}

@media (min-width: 481px) and (max-width: 1024px) {
    .post-content .kg-gallery-container {
        margin-bottom: 10px;
    }

    .post-content .kg-gallery-container,
    .post-content .kg-gallery-row:not(:first-of-type) {
        margin-top: 10px;
    }

    .post-content .kg-gallery-image:not(:first-of-type) {
        margin-left: 10px;
    }

    .post-content .kg-width-full img {
        width: calc(100vw - 25px - 25px);
        margin-right: calc(-50vw + 25px);
        margin-left: calc(-50vw + 25px);
    }

}

@media (min-width: 1025px) and (max-width: 1280px) {

    .post-content .kg-image-card.kg-width-wide img,
    .post-content .kg-gallery-container {
        position: relative;
        right: 50%;
        left: 50%;
        width: calc(100vw - 140px - 140px);
        margin-right: calc(-50vw + 140px);
        margin-left: calc(-50vw + 140px);
    }

}

@media (min-width: 1281px) {

    .post-content .kg-image-card.kg-width-wide img,
    .post-content .kg-gallery-container {
        width: calc(100% + 180px + 180px);
        margin-left: -180px;
    }

}

/* RWD — Bookmark card
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 320px) {
    .post-content .kg-bookmark-container {
        flex-direction: column;
    }

    .post-content .kg-bookmark-content {
        order: 2;
        padding: 15px;
    }

    .post-content .kg-bookmark-thumbnail {
        order: 1;
        width: 100%;
        min-height: 120px;
    }

}

@media (max-width: 480px) {
    .post-content .kg-bookmark-title {
        font-size: 14px;
    }

    .post-content .kg-bookmark-description {
        font-size: 12px;
    }

}

/* RWD — Post content
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 480px) {
    .post-content {
        font-size: 16px;
    }

    .post-content h1,
    .post-content h2,
    .post-content h3,
    .post-content h4,
    .post-content h5,
    .post-content h6 {
        margin-bottom: 15px;
    }

    .post-content h1 {
        font-size: 38px;
        margin-top: 45px;
    }

    .post-content h2 {
        font-size: 30px;
        margin-top: 40px;
    }

    .post-content h3 {
        font-size: 24px;
        margin-top: 35px;
    }

    .post-content h4 {
        font-size: 19px;
        margin-top: 30px;
    }

    .post-content h5 {
        font-size: 16px;
    }

    .post-content h5,
    .post-content h6 {
        margin-top: 25px;
    }

    .post-content blockquote {
        font-size: 20px;
        padding-left: 32px;
    }

    .post-content blockquote::before {
        font-size: 60px;
        top: -8px;
    }

    .post-content figcaption {
        margin-top: 10px;
    }

    .post-content .members-teaser::after {
        width: 100vw;
        margin-right: -50vw;
        margin-left: -50vw
    }

    .post-content .members-cta {
        margin: 0;
        padding: 25px 15px;
    }

    .post-content .members-cta h2 {
        font-size: 25px;
        margin-top: 10px;
        margin-bottom: 20px;
    }

}

@media (min-width: 481px) and (max-width: 768px) {
    .post-content {
        font-size: 17px;
    }

    .post-content h1 {
        font-size: 45px;
        margin-top: 50px;
    }

    .post-content h2 {
        font-size: 33px;
        margin-top: 45px;
    }

    .post-content h3 {
        font-size: 26px;
        margin-top: 40px;
    }

    .post-content h4 {
        font-size: 21px;
        margin-top: 35px;
    }

    .post-content h5 {
        font-size: 17px;
    }

    .post-content h5,
    .post-content h6 {
        margin-top: 30px;
    }

    .post-content blockquote {
        font-size: 25px;
        padding-left: 40px;
    }

    .post-content blockquote::before {
        font-size: 80px;
        top: -10px;
    }

    .post-content .members-cta {
        padding: 30px;
    }

}

@media (max-width: 768px) {
    .post-content table {
        font-size: 14px;
    }

    .post-content p,
    .post-content iframe,
    .post-content ol,
    .post-content ul,
    .post-content table {
        margin-bottom: 20px;
    }

    .post-content hr,
    .post-content blockquote {
        margin-top: 40px;
    }

    .post-content .kg-card {
        margin-top: 30px;
    }

    .post-content .kg-bookmark-card + .kg-bookmark-card {
        margin-top: -20px;
    }

    .post-content hr,
    .post-content blockquote,
    .post-content .kg-card {
        margin-bottom: 40px;
    }

    .post-content p img {
        margin-bottom: 5px;
    }

    .post-content img ~ small,
    .post-content p img ~ small {
        bottom: -10px;
    }

}

@media (max-width: 1024px) {
    .post-content .members-cta {
        margin-top: 0;
    }

}

@media (min-width: 769px) and (max-width: 1280px) {
    .post-content blockquote {
        font-size: 35px;
        padding-right: 40px;
    }

    .post-content blockquote::before {
        font-size: 100px;
    }

}

@media (max-width: 1280px) {
    .post-content blockquote::before {
        left: -5px;
    }

}

.load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--primary-font-family);
    font-size: var(--fs-b2);
    line-height: var(--lh-b2);
    font-weight: var(--fw-medium);
    background-color: var(--white);
    color: var(--gray-700);
    padding: 12px 20px;
    border: 1px solid var(--gray-300);
    height: 48px;
    cursor: pointer;
    border-radius: var(--br-8);
    transition: all 250ms ease-in-out;
}


/* Header Serach */

.header-search {
    position: relative;
    display: flex;
    align-items: center;
    height: 44px;
}

.header-search button {
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    padding: 0;
    flex-shrink: 0;
}

.header-search button svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-search button svg path {
    stroke: var(--gray-500);
}

.header-search button.header-search-toggle {
    cursor: pointer;
    width: 40px;
    height: 40px;
    padding: 8px;
}

.header-search .header-search-box {
    position: absolute;
    display: flex;
    align-items: center;
    width: 0;
    height: 44px;
    top: 50%;
    right: 0;
    padding: 12px;
    background-color: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    transform: translateY(-50%);
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    z-index: 2;
}

.header-search .header-search-box button {
    opacity: 0;
    visibility: hidden;
    transition-delay: 200ms;
}

.header-search .header-search-box button.header-search-clear {
    cursor: pointer;
}

.header-search .header-search-box input {
    flex-grow: 1;
    height: 100%;
    border: none;
    padding: 0 8px;
    font-size: var(--fs-b2);
    line-height: var(--lh-b2);
    color: var(--gray-700);
    background-color: var(--white);
    transition-delay: 200ms;
    opacity: 0;
    visibility: hidden;
}

.header-search .header-search-box input::placeholder {
    color: var(--gray-500);
    opacity: 1;
}

.header-search .header-search-box.show {
    visibility: visible;
    opacity: 1;
    width: 320px;
}

.header-search .header-search-box.show button, .header-search .header-search-box.show input {
    visibility: visible;
    opacity: 1;
}

.header-search .header-search-result {
    position: absolute;
    width: 320px;
    top: 100%;
    right: 0;
    padding: 12px;
    margin-top: 24px;
    background-color: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    z-index: 2;
}

.header-search .header-search-result.show {
    visibility: visible;
    opacity: 1;
    margin-top: 4px;
}

.header-search .header-search-result-content {
    max-height: 220px;
    padding: 0 12px;
    overflow: auto;
    overscroll-behavior: contain;
}

.header-search .header-search-result-content > ul {
    margin-bottom: 12px;
}

.header-search .header-search-result-content > *:last-child {
    margin-bottom: 0;
}

.header-search .header-search-result-content > span {
    display: block;
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    color: var(--fuchsia-900);
    font-weight: var(--fw-medium);
    margin-bottom: 8px;
}

.header-search .header-search-result-content > ul li:not(:last-child) {
    margin-bottom: 20px;
}

.header-search .header-search-result-content > ul li a {
    display: block;
    color: var(--gray-700);
}

.header-search .header-search-result-content > ul li a span {
    display: inline-block;
    font-weight: var(--fw-semi-bold);
    background-color: var(--fuchsia-50);
}

.header-search .header-search-box, .header-search .header-search-box button, .header-search .header-search-box input, .header-search .header-search-result, .header-search-bg {
    transition: all 250ms ease-in-out;
}


/* ==============================
        Instagram - Header
============================== */

.social-media-header {
    padding-top: 64px;
}

.social-media-header {
    background-image: url('../patterns/social-medias/hand-drawn-accents.svg'), url('../patterns/social-medias/hand-drawn-line.svg'), url('../patterns/social-medias/hand-drawn-accents-1.svg'), url('../patterns/instagram/hand-drawn-accents-2.svg');
    background-repeat: no-repeat;
    background-position: top 220px left 0, top 165px right 168px, bottom 96px left 258px, bottom -20px right 14px;
}

.social-media-header .section-header .section-label {
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
    margin-bottom: 24px;
}

.social-media-header .section-header p {
    margin-top: 24px;
}

.social-media-header .btn-general {
    margin-top: 48px;
}

.social-media-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.social-media-banner img {
    max-width: 926px;
    width: 100%;
    height: auto;
}

#instagram-page .features .section-header h3 {
    max-width: 840px;
}

/* ==============================
        Instagram - For who
============================== */

.for-who.accordion .for-who-left {
    margin: 0;
}

.for-who.accordion .for-who-left .for-who-tabs {
    margin: 48px 0 0;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.for-who.accordion .for-who-left .for-who-tabs > div {
    position: relative;
    width: 100%;
}

.for-who.accordion .for-who-tabs.tabs::before {
    display: none;
}

.for-who.accordion .for-who-left .for-who-tabs > div:before {
    position: absolute;
    content: '';
    top: 0;
    width: 100%;
    height: 1px;
    background-color: var(--gray-300);
    z-index: -1;
}

.for-who.accordion .for-who-left .for-who-tabs > div:not(:last-child) {
    padding-bottom: 32px;
}

.for-who.accordion .for-who-left .for-who-tabs > div .tab-dropdown {
    color: var(--gray-500);
    margin-top: 8px;
}

.for-who.accordion .for-who-left .for-who-tabs > div .tab-dropdown img {
    width: 100%;
    height: auto;
    margin-top: 32px;
    border-radius: 20px;
}

.for-who.accordion .for-who-left .for-who-tabs.tabs button {
    margin-bottom: 8px;
    padding: 24px 0 0;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
}

.for-who.accordion .for-who-left .for-who-tabs.tabs button:not(:last-child) {
    margin: 0;
}

.for-who.accordion .for-who-left .for-who-tabs.tabs button > div {
    display: flex;
    align-items: center;
}

.for-who.accordion .for-who-left .for-who-tabs.tabs button > svg {
    margin-right: 0;
    margin-left: 16px;
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: transform 250ms ease-in-out;
}

.for-who.accordion .for-who-left .for-who-tabs.tabs button.active > svg {
    transform: rotate(180deg);
}

.for-who.accordion .for-who-tabs.tabs button:not(.active) + .tab-dropdown {
    display: none;
}

.for-who.accordion .for-who-right {
    padding-top: 48px;
    padding-bottom: 48px;
    justify-content: flex-start;
}

.for-who.accordion .for-who-right img {
    max-width: none;
    border-radius: 20px;
}

/* ==============================
        Instagram - Schedule free
============================== */

.schedule-free .container > div {
    background-color: var(--fuchsia-900);
    color: var(--white);
    padding: 72px 50px;
    border-radius: 20px;
}

.schedule-free .section-header h3 {
    max-width: 550px;
}

.schedule-free .section-header p {
    max-width: 750px;
}

.schedule-free p {
    margin-top: 40px;
    color: #F9FAFB;
}

.schedule-free.facebook .container > div {
    background-color: var(--facebook-color);
}

.schedule-free.linkedin .container > div {
    background-color: var(--linkedin-color);
}

.schedule-free.instagram-story .container > div .section-header p {
    max-width: none;
}

.schedule-free.ai .container > div {
    background-color: var(--ai-color);
}

.schedule-free.white .container > div {
    background-color: white;
    color: var(--gray-900);
}

.schedule-free.white p {
    color: var(--gray-500);
}

.schedule-free-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


.schedule-free-content .btn-general {
    margin-top: 32px;
}

/* ==============================
        Instagram story
============================== */

.instagram-story .section-header h1 {
    max-width: none;
}

.instagram-story .section-header p {
    max-width: 964px;
}

.instagram-story .social-media-banner img {
    max-width: 1100px;
}

/* ==============================
        Threads
============================== */
#threads-page .step-number span {
    max-width: 230px;
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
}

#threads-page .step-content img.main {
    border-radius: var(--br-8);
}

#threads-page .social-media-header {
    background-image: initial;
}

/* ==============================
        Tiktok
============================== */

#tiktok-page .support .support-text-body {
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
    color: var(--gray-500);
}

#tiktok-page .support-image img {
    max-width: 410px;
}

#tiktok-page .step .step-number span {
    max-width: 285px;
}

#tiktok-page .testimonials .section-header h2 {
    max-width: 100%;
}

.testimonialsSwiper.tiktok .swiper-slide {
    max-width: 376px;
}

.testimonialsSwiper.tiktok .testimonial-item {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.testimonialsSwiper.tiktok .testimonial-item-header img {
    display: block;
    width: 60px;
    height: auto;
    margin-bottom: 24px;
}

.testimonialsSwiper.tiktok .testimonial-item-header h3 {
    font-weight: var(--fw-medium);
    margin-bottom: 48px;
    flex-grow: 1;
}

.testimonialsSwiper.tiktok .testimonial-item-body img {
    max-width: 324px;
}

.testimonialsSwiper.tiktok .testimonial-item-footer .author {
    margin-top: 48px;
}

.testimonialsSwiper.tiktok .swiper-pagination {
    position: static;
    justify-content: center;
    padding-left: 0;
    margin-top: 42px;
}

#tiktok-page .testimonials {
    background-image: url('../patterns/tiktok/hand-drawn-accents.svg'), url('../patterns/tiktok/hand-drawn-accents-1.svg');
    background-repeat: no-repeat;
    background-position: top 140px right 128px, bottom 58px right 580px;
}

/* ==============================
        Twitter
============================== */

#twitter-page .step-content > img {
    box-shadow: none;
}

#twitter-page .step .step-number span {
    max-width: 230px;
}

/* ==============================
        Contact
============================== */

.contact-info .section-header .heading-3{
    margin: auto;
}

.contact-details {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
}

.contact-details-item {
    display: flex;
    flex-direction: column;
    padding: 44px;
    max-width: 317px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 54px 54px 0 rgba(0, 0, 0, 0.05);
}

.contact-details-item .icon {
    margin-bottom: 12px;
}

.contact-details-item .heading-5 {
    margin-bottom: 24px;
    color: var(--fuchsia-900);
    font-weight: var(--fw-medium);
    letter-spacing: -0.48px;
}

.contact-details-item p {
    color: #193765;
    font-feature-settings: 'liga' off, 'clig' off;
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-over-email .container > div {
    max-width: 900px;
    margin: auto;
}

.contact-form {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    z-index: 2;
}

.contact-form .form-item {
    display: flex;
    flex-direction: column;
}

.contact-form .form-item {
    margin-bottom: 30px;
}

.contact-form .form-item label {
    display: block;
    font-size: var(--fs-b1);
    line-height: var(--lh-b1);
    font-weight: var(--fw-medium);
    margin-bottom: 6px;
    color: var(--gray-700);
}

.contact-form .form-item input, .contact-form .form-item textarea {
    padding: 10px 14px;
    width: 100%;
    height: 44px;
    font-size: var(--fs-b2);
    line-height: var(--lh-b2);
    color: var(--gray-700);
    background: var(--white);
    border: 1px solid var(--gray-300);
    outline: none;
    box-shadow: var(--box-shadow-xs);
    border-radius: var(--br-8);
    transition: all 250ms ease-in-out;
}

.contact-form .form-item input:focus, .contact-form .form-item textarea:focus {
    border-color: #D6BBFB;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 0 0 4px #F4EBFF;
}

.contact-form .form-item input::placeholder, .contact-form .form-item textarea::placeholder {
    color: var(--gray-500);
}

.contact-form .form-item textarea {
    height: 134px;
    resize: none;
}

.contact-form .btn-general {
    max-width: 275px;
}

.on-login-show {
    display: none;
}

body.on-login .header-right-btns {
    display: none !important;
}

body.on-login .header-right .btn-user-info {
    display: flex;
}

body.on-login .on-login-hide {
    display: none;
}

body.on-login .on-login-show {
    display: flex;
}

/* ==============================
        Technical partners
============================== */
.tech-partners-content {
    padding: 24px 32px;
    margin-top: 32px;
}

.tech-partners-content .tech-partners-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-partners-content .tech-partners-wrapper > div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 24px;
}

.tech-partners-content .tech-partners-wrapper > div img {
    width: 100%;
    max-width: 160px;
    height: 64px;
    object-fit: contain;
}


/* ==============================
        For who cards
============================== */
.for-who-cards .section-header > div img {
    position: absolute;
    width: 50px;
    height: auto;
    top: -25px;
    right: -58px;
}

.for-who-cards-content {
    margin-top: 64px;
}

.for-who-card {
    padding: 24px;
    background-color: var(--white);
    box-shadow: var(--box-shadow-xl);
    border-radius: var(--br-12);
    transition: all 250ms ease-in-out;
}

.for-who-card:hover {
    transform: translateY(-24px);
}

.for-who-card .card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--br-8);
    background-color: var(--fuchsia-900);
    padding: 12px;
    flex-shrink: 0;
    margin-bottom: 32px;
}

.for-who-card .card-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.for-who-card .card-text > span {
    font-size: var(--fs-b3);
    line-height: var(--lh-h3);
    font-weight: var(--fw-medium);
    color: var(--fuchsia-900);
    margin-bottom: 8px;
}

.for-who-card .card-text > p {
    font-size: var(--fs-b4);
    line-height: var(--lh-b4);
    color: var(--gray-500);
}


#ai-content .welcome-image img.pattern.left-bottom {
    left: -54px;
    bottom: 24px;
}

#ai-content .welcome-image img.pattern.right-top {
    top: 20px;
    right: -66px;
}

.why-ai .section-header > div img {
    position: absolute;
    width: 40px;
    height: auto;
    top: -25px;
    right: -100px;
}

.why-ai-content {
    margin-top: 64px;
}

/* ==============================
        Error pages
============================== */

.error-welcome .btns-wrapper {
    margin-top: 48px;
    gap: 12px;
}


.error-cards {
    padding-top: 0;
}

.error-card {
    border-radius: var(--br-16);
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
    padding: 24px;
    min-height: 226px;
    margin: 0 auto;
    box-shadow: var(--box-shadow-lg);
}

.error-card > img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 32px;
}

.error-card > span {
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-b4);
    line-height: var(--lh-b4);
    color: var(--gray-700);
}

.error-card > p {
    color: var(--gray-500);
    margin-top: 8px;
}

.error-card > .btn-text {
    margin-top: 20px;
}

/* ==============================
        Analytics
============================== */

#analytics .support-content-wrapper,
#analytics .sub-support {
    margin-top: 96px;
}

#analytics .support-image img {
    max-width: none;
}

.support-content-wrapper:nth-child(2n+1) .support-content > .row {
    flex-direction: row-reverse;
}

.support-content-wrapper:nth-child(2n+1) .support-content > .row .support-text {
    padding-right: 0;
    padding-left: 20px;
}

.support-content-wrapper:nth-child(2n+1) .support-content > .row .support-image {
    padding-left: 0;
    padding-right: 20px;
}

.create-share-content {
    margin-top: 96px;
}

.create-share .section-header > div {
    width: 100%;
    text-align: center;
}

.create-share .section-header > div img {
    position: absolute;
    top: -66px;
    right: 120px;
}

.create-share-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    padding-right: 20px;
}

.create-share-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.create-share-item > div {
    display: flex;
    align-items: center;
    gap: 16px;
}

.create-share-item > div svg {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.create-share-item > div svg path {
    stroke: var(--fuchsia-900);
}

.create-share-item > div span {
    font-weight: var(--fw-medium);
    font-size: var(--fs-b4);
    line-height: var(--lh-b4);
    color: var(--fuchsia-900);
}

.create-share-item p {
    padding-left: 40px;
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
    color: var(--gray-500);
}

.create-share-right {
    padding-left: 20px;
}

.create-share-right img {
    width: 100%;
    height: auto;
}

/*#analytics .for-who-content .row {*/
/*    flex-direction: row-reverse;*/
/*}*/

/*#analytics .for-who-content .for-who-left {*/
/*    padding-right: 0;*/
/*    padding-left: 20px;*/
/*}*/

/*#analytics .for-who-content .for-who-right {*/
/*    padding-left: 0;*/
/*    padding-right: 20px;*/
/*}*/

/* ==============================
        Addtobio
============================== */
.features.colorful .features-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.features.colorful .features-content-row {
    padding: 96px 0;
}

.features.colorful .features-content-row:first-child {
    background: #FFE4E8;
}

.features.colorful .features-content-row:nth-child(2) {
    background: #B2DDFF;
}

.features.colorful .features-content-row:nth-child(3) {
    background: #FBE4FF;
}

.features.colorful .features-content-row:nth-child(4) {
    background: #D3F8DF;
}

.features.colorful .feature-text-header img {
    z-index: 1;
}

.features.range .features-content {
    position: relative;
    gap: 0;
}

.features.colorful .features-content .row,
.features.range .features-content .row {
    margin-top: 0;
}

.features.range .features-content-row {
    padding: 48px 0;
}

.features.range .features-content-row:first-child {
    padding-top: 0;
}

.features.range .features-content-row:last-child {
    padding-bottom: 0;
}

.features.range .range-line {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--gray-300);
    transform: translateX(-50%);
    z-index: 1;
}

.features.range .features-content:before,
.features.range .features-content:after {
    position: absolute;
    content: "";
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gray-300);
    z-index: 3;
}

.features.range .features-content:before {
    top: 0;
    transform: translate(-50%, -50%);
}

.features.range .features-content:after {
    bottom: 0;
    transform: translate(-50%, 50%);
}

.features.range .feature-image {
    padding-left: 40px;
}

.features.range .feature-text,
.features.range .feature-image {
    padding-top: 12px;
    padding-bottom: 12px;
}

.features.range .features-content-row:nth-child(2n) .feature-image {
    padding-left: 0;
    padding-right: 40px;
}

.features.range .feature-text {
    position: relative;
}

.features.range .feature-text:after {
    position: absolute;
    content: "";
    top: 0;
    left: 100%;
    width: 3px;
    height: 100%;
    background: var(--fuchsia-900);
    transform: translateX(-50%);
    transform-origin: bottom right;
    z-index: 2;
    transition: all 400ms ease-out;
    opacity: 0;
    visibility: visible;
}

.features.range .features-content-row:nth-child(2n) .feature-text:after {
    left: 0;
}

.features.range .features-content-row:hover .feature-text:after {
    opacity: 1;
    visibility: visible;
}

.features.range .feature-text-header span {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
}

.addtobio-themes .features-content,
.addtobio-themes .features-content .row {
    margin-top: 0;
}

.features-pills-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 64px;
}

.nav-pills {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

.nav-pills:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 2px;
    background: var(--gray-300);
    top: 0;
}

.nav-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: none;
    border: none;
    padding: 16px 4px;
    font-size: var(--fs-b3);
    line-height: var(--lh-b3);
    color: var(--gray-500);
    font-weight: var(--fw-medium);
    font-family: var(--primary-font-family);
    cursor: pointer;
    transition: all 250ms ease-in-out;
    border-top: 2px solid transparent;
    z-index: 1;
}

.nav-pill.active {
    color: var(--fuchsia-900);
    border-color: var(--fuchsia-900);
}

.nav-pill:hover {
    color: var(--fuchsia-900);
}

.tab-pane:not(.active) {
    display: none;
}

/*============================
          Affiliate
==============================*/

.affiliate-hero {
    padding-top: 60px;
}

.affiliate-hero .hero-text {
    margin: auto;
    max-width: 800px;
    text-align: center;
}

.affiliate-hero .hero-text h1 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: -0.96px;
    margin-bottom: 10px ;
}

.affiliate-hero .hero-text p {
    font-size: 22px;
    line-height: 32px;
    margin-bottom: 20px;
}

.affiliate-hero .hero-text a {
    max-width: 170px;
    padding: 10px 18px;
    box-shadow: 0 1px 2px 0 frgba(16, 24, 40, 0.05);
    margin: auto;
    z-index: 10;
}

.affiliate-hero .hero-image img {
    width: 100%;
}

#affiliate-page .section-header * {
    margin: auto;
    text-align: center;
}

#affiliate-page .section-header {
    gap: 20px;
}

.why-join .module {
    max-width: 370px;
    letter-spacing: initial;
    padding: 30px 20px;
}

.why-join .module .text {
    height: auto;
}

.affiliate-how {
    background-color: var(--white);
}

.steps {
    position: relative;
    margin-top: 20px;
    gap: 32px;
}

.steps .line {
    position: absolute;
    top: 65px;
    padding: 0 71px;
    width: 100%;
}

.steps .line div {
    height: 1.6px;
    background-color: #4294FF;
}

.steps .how-step {
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 335px;
}

.steps .icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    border: 8px solid #F9F9F9;
    background: #F3F3F3;
    margin-bottom: 20px;
}

.steps .icon:before {
    content: "";
    position: absolute;
    left: -16px;
    top: 22px;
    rotate: 45deg;
    display: block;
    width: 8px;
    height: 8px;
    background-color: #4294FF;
}

.steps .text {
    color: var(--fuchsia-900);
    text-align: center;
    font-size: var(--fs-b4);
    font-weight: var(--fw-semi-bold);
    line-height: var(--lh-b4);
    letter-spacing: -0.4px;
    margin-bottom: 10px;
}

.steps p {
    color: var(--gray-500);
}

.benefits .module {
    max-width: initial;
    aspect-ratio: 1/1;
    border-radius: 50%;
    justify-content: center;
    background: rgba(255, 255, 255, 0.50);
}

.benefits .module:nth-child(2) {
    background: rgba(102, 112, 133, 0.10);
}

.benefits .module .text {
    height: auto;
}

/*=====================
        Scheduler & Engagement
=======================*/

#engagement .feature-image {
    box-shadow: none;
}

#home .welcome-text,
#scheduler .welcome-text {
    margin-top: auto;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#home .welcome-text h1,
#scheduler .welcome-text h1 {
    font-size: 40px;
    line-height: 46px;
}

#home .welcome-text p,
#scheduler .welcome-text p {
    padding-right: 20px;
}

#home .welcome-image .image-holder,
#scheduler .welcome-image .image-holder {
    box-shadow: 0 54px 54px 0 rgba(0, 0, 0, 0.05);
}