/*
Theme Name:     Kadence Child by GrowthGeeky
Theme URI:      n/a
Template:       kadence
Author:         Sabbir Ahmed
Author URI:     n/a
Description:    Child Theme Description
Version:        1.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ==========================================================================
   1. GLOBAL STYLES & RESET OVERRIDES
   ========================================================================== */

/* Paragraph bottom spacing override */
.wp-site-blocks p:not([style*="margin"]) {
    margin-bottom: 0.75em;
}

/* UL Spacing (Excludes checkmark list classes) */
.single-content ul:not(.kt-svg-icon-list):not(.kb-query-grid-wrap):not(.kb-dynamic-list.kb-dynamic-list):not(.our-custom-checkmark):not(.author-full-bio ul) {
    padding-left: 22px !important;
}

/* LI Spacing (Excludes checkmark list items) */
.single-content li:not(.kt-svg-icon-list-item-wrap):not(.kb-query-grid-wrap):not(.kb-dynamic-list.kb-dynamic-list):not(.our-custom-checkmark):not(.author-full-bio li):not(.kb-dynamic-list-item) {
    margin-bottom: 12px;
}

/* Last LI Spacing (Excludes checkmark list items) */
.single-content li:not(.kt-svg-icon-list-item-wrap):not(.our-custom-checkmark):not(.author-full-bio li):last-child {
    margin-bottom: 0;
}

/* Make standard content link underlines 1px thin without forcing it site-wide */
.entry-content a {
    text-decoration-thickness: 1px !important;
    /* text-underline-offset: 3.5px !important; */
}

/* Excerpt lines clamping */
.kb-dynamic-html.post-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Custom Checkmark Bullet Points --- */

/* Hide default discs and reset padding */
.author-full-bio ul,
ul.our-custom-checkmark {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0;
}

/* Position list items and make space on the left for the icon */
.author-full-bio ul li,
li.our-custom-checkmark,
ul.our-custom-checkmark li {
    list-style: none !important;
    position: relative !important;
    padding-left: 1.75em !important;
    margin-bottom: 0.6em !important;
}

/* Inject the checkmark SVG */
.author-full-bio ul li::before,
li.our-custom-checkmark::before,
ul.our-custom-checkmark li::before {
    content: "" !important;
    position: absolute !important;
    left: -2px !important;
    top: 0.1em !important;
    width: 1.25em !important;
    height: 1.25em !important;
    background-image: url('/wp-content/uploads/2026/06/custom-checkmark.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}


/* ==========================================================================
   2. TYPOGRAPHY & HEADINGS
   ========================================================================== */

/* Clamp the Kadence Dynamic Heading bio to 5 lines */
.author-bio.wp-block-kadence-advancedheading {
    display: -webkit-box !important;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Author name color override */
p.author-name.wp-block-kadence-advancedheading span {
    color: var(--global-palette6);
}


/* ==========================================================================
   3. RETRO BUTTONS (3D EFFECTS)
   ========================================================================== */

/* --- Base 3D Retro Button --- */
.kb-button {
    position: relative !important;
    margin-left: 8px;
    border: 1px solid #1f1f1f !important;
    box-shadow:
        -1px 1px 0px #000000,
        -2px 2px 0px #000000,
        -3px 3px 0px #000000,
        -4px 4px 0px #000000,
        -5px 5px 0px #000000,
        -6px 6px 0px #000000,
        -7px 7px 0px #000000,
        -8px 8px 0px #000000 !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

/* Hover State: move button slightly down-right towards the shadow */
.kb-button:hover {
    transform: translate(-3px, 3px) !important;
    box-shadow:
        -1px 1px 0px #1f1f1f,
        -2px 2px 0px #1f1f1f,
        -3px 3px 0px #1f1f1f,
        -4px 4px 0px #1f1f1f,
        -5px 5px 0px #1f1f1f !important;
}

/* Click/Active State: press button completely flat */
.kb-button:active {
    transform: translate(-8px, 8px) !important;
    box-shadow: 0px 0px 0px #1f1f1f !important;
}

/* --- 3D Retro Button Red Border/Shadow Variant --- */
.kb-button.red-border-btn,
.dark-bg-form.cream-button .gform_button[type="submit"] {
    position: relative !important;
    margin-left: 8px;
    border: 1px solid var(--global-palette1) !important;
    box-shadow:
        -1px 1px 0px var(--global-palette1),
        -2px 2px 0px var(--global-palette1),
        -3px 3px 0px var(--global-palette1),
        -4px 4px 0px var(--global-palette1),
        -5px 5px 0px var(--global-palette1),
        -6px 6px 0px var(--global-palette1),
        -7px 7px 0px var(--global-palette1),
        -8px 8px 0px var(--global-palette1) !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.dark-bg-form.cream-button .gform_button[type="submit"] {
    background-color: var(--global-palette7) !important;
    color: var(--global-palette3) !important;
}

/* Hover State */
.kb-button.red-border-btn:hover,
.dark-bg-form.cream-button .gform_button[type="submit"]:hover {
    transform: translate(-3px, 3px) !important;
    box-shadow:
        -1px 1px 0px var(--global-palette1),
        -2px 2px 0px var(--global-palette1),
        -3px 3px 0px var(--global-palette1),
        -4px 4px 0px var(--global-palette1),
        -5px 5px 0px var(--global-palette1) !important;
}

/* Click/Active State */
.kb-button.red-border-btn:active,
.dark-bg-form.cream-button .gform_button[type="submit"]:active {
    transform: translate(-8px, 8px) !important;
    box-shadow: 0px 0px 0px var(--global-palette1) !important;
}

/* --- 3D Retro Button Variation 2 (Dark Background) --- */
a.retro-3d-btn-dark,
.retro-3d-btn-dark a.kb-button,
.dark-bg-form .gform_button[type="submit"] {
    position: relative !important;
    margin-left: 8px;
    display: inline-block;
    text-decoration: none;
    font-family: inherit;
    letter-spacing: 0.5px;
    background-color: var(--global-palette3) !important;
    color: var(--global-palette9) !important;
    border: 1px solid var(--global-palette7) !important;
    border-radius: 0px !important;
    box-shadow:
        -1px 1px 0px var(--global-palette7),
        -2px 2px 0px var(--global-palette7),
        -3px 3px 0px var(--global-palette7),
        -4px 4px 0px var(--global-palette7),
        -5px 5px 0px var(--global-palette7),
        -6px 6px 0px var(--global-palette7),
        -7px 7px 0px var(--global-palette7),
        -8px 8px 0px var(--global-palette7) !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

/* Hover State */
a.retro-3d-btn-dark:hover,
.retro-3d-btn-dark a.kb-button:hover,
.dark-bg-form .gform_button[type="submit"]:hover {
    transform: translate(-3px, 3px) !important;
    box-shadow:
        -1px 1px 0px var(--global-palette7),
        -2px 2px 0px var(--global-palette7),
        -3px 3px 0px var(--global-palette7),
        -4px 4px 0px var(--global-palette7),
        -5px 5px 0px var(--global-palette7) !important;
}

/* Click/Active State */
a.retro-3d-btn-dark:active,
.retro-3d-btn-dark a.kb-button:active,
.dark-bg-form .gform_button[type="submit"]:active {
    transform: translate(-8px, 8px) !important;
    box-shadow: 0px 0px 0px var(--global-palette7) !important;
}

/* --- Mobile Responsive Button Overrides (max-width: 767px) --- */
@media (max-width: 767px) {
    /* Base Button overrides */
    .kb-button {
        margin-left: 6px;
        box-shadow:
            -1px 1px 0px #1f1f1f,
            -2px 2px 0px #1f1f1f,
            -3px 3px 0px #1f1f1f,
            -4px 4px 0px #1f1f1f,
            -5px 5px 0px #1f1f1f,
            -6px 6px 0px #1f1f1f !important;
    }

    .kb-button:hover {
        transform: translate(-3px, 3px) !important;
        box-shadow:
            -1px 1px 0px #1f1f1f,
            -2px 2px 0px #1f1f1f,
            -3px 3px 0px #1f1f1f !important;
    }

    .kb-button:active {
        transform: translate(-6px, 6px) !important;
        box-shadow: 0px 0px 0px #1f1f1f !important;
    }

    /* Red Button overrides */
    .kb-button.red-border-btn,
    .dark-bg-form.cream-button .gform_button[type="submit"] {
        margin-left: 6px;
        box-shadow:
            -1px 1px 0px var(--global-palette1),
            -2px 2px 0px var(--global-palette1),
            -3px 3px 0px var(--global-palette1),
            -4px 4px 0px var(--global-palette1),
            -5px 5px 0px var(--global-palette1),
            -6px 6px 0px var(--global-palette1) !important;
    }

    .kb-button.red-border-btn:hover,
    .dark-bg-form.cream-button .gform_button[type="submit"]:hover {
        margin-left: 6px;
        transform: translate(-3px, 3px) !important;
        box-shadow:
            -1px 1px 0px var(--global-palette1),
            -2px 2px 0px var(--global-palette1),
            -3px 3px 0px var(--global-palette1) !important;
    }

    .kb-button.red-border-btn:active,
    .dark-bg-form.cream-button .gform_button[type="submit"]:active {
        transform: translate(-6px, 6px) !important;
        box-shadow: 0px 0px 0px var(--global-palette1) !important;
    }

    /* Dark Button & Gravity Forms Submit overrides */
    a.retro-3d-btn-dark,
    .retro-3d-btn-dark a.kb-button,
    .dark-bg-form .gform_button[type="submit"] {
        margin-left: 6px;
        box-shadow:
            -1px 1px 0px var(--global-palette7),
            -2px 2px 0px var(--global-palette7),
            -3px 3px 0px var(--global-palette7),
            -4px 4px 0px var(--global-palette7),
            -5px 5px 0px var(--global-palette7),
            -6px 6px 0px var(--global-palette7) !important;
    }

    a.retro-3d-btn-dark:hover,
    .retro-3d-btn-dark a.kb-button:hover,
    .dark-bg-form .gform_button[type="submit"]:hover {
        transform: translate(-3px, 3px) !important;
        box-shadow:
            -1px 1px 0px var(--global-palette7),
            -2px 2px 0px var(--global-palette7),
            -3px 3px 0px var(--global-palette7) !important;
    }

    a.retro-3d-btn-dark:active,
    .retro-3d-btn-dark a.kb-button:active,
    .dark-bg-form .gform_button[type="submit"]:active {
        transform: translate(-6px, 6px) !important;
        box-shadow: 0px 0px 0px var(--global-palette7) !important;
    }
}


/* ==========================================================================
   4. RETRO ICONS & INTERACTIVE HOVER ACTIONS
   ========================================================================== */

/* --- Checkmark Icon --- */
.icon-checkmark {
    fill: var(--global-palette1);
}

/* --- Layout Adjustments for Icons --- */
.heading-with-myicon .wp-block-kadence-advancedheading {
    justify-content: space-between;
}

/* --- Left Icon Hover-Fill Effect --- */
.hover-fill-left-icon .kb-adv-heading-icon {
    position: relative;
}

.hover-fill-left-icon .kb-adv-heading-icon svg {
    transition: opacity 0.2s ease;
}

.hover-fill-left-icon .kb-adv-heading-icon::after {
    content: "";
    position: absolute;
    top: 0;
    right: 3px;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.2s ease;
    background-color: currentColor;
    -webkit-mask: url("/wp-content/uploads/2026/06/arrow-filled-left.svg") center/contain no-repeat;
    mask: url("/wp-content/uploads/2026/06/arrow-filled-left.svg") center/contain no-repeat;
}

.hover-fill-left-icon:hover .kb-adv-heading-icon svg {
    opacity: 0;
}

.hover-fill-left-icon:hover .kb-adv-heading-icon::after {
    opacity: 1;
}

/* --- Right Icon Hover-Fill Effect --- */
.hover-fill-icon .kb-adv-heading-icon {
    position: relative;
}

.hover-fill-icon .kb-adv-heading-icon svg {
    transition: opacity 0.2s ease;
}

.hover-fill-icon .kb-adv-heading-icon::after {
    content: "";
    position: absolute;
    top: 0;
    left: 3px;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.2s ease;
    background-color: currentColor;
    -webkit-mask: url("/wp-content/uploads/2026/06/arrow-filled.svg") center/contain no-repeat;
    mask: url("/wp-content/uploads/2026/06/arrow-filled.svg") center/contain no-repeat;
}

.hover-fill-icon:hover .kb-adv-heading-icon svg {
    opacity: 0;
}

.hover-fill-icon:hover .kb-adv-heading-icon::after {
    opacity: 1;
}

/* --- Base Setup for Custom 3D Retro Icons --- */
.wp-block-kadence-single-icon.retro-3d-icon,
.wp-block-kadence-single-icon.retro-3d-icon-dark,
.wp-block-kadence-single-icon.retro-3d-icon-light {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 0px !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease !important;
    box-sizing: border-box !important;
}

.wp-block-kadence-single-icon.retro-3d-icon a,
.wp-block-kadence-single-icon.retro-3d-icon-dark a,
.wp-block-kadence-single-icon.retro-3d-icon-light a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
}

.wp-block-kadence-single-icon.retro-3d-icon svg,
.wp-block-kadence-single-icon.retro-3d-icon-dark svg,
.wp-block-kadence-single-icon.retro-3d-icon-light svg {
    fill: currentColor !important;
    color: inherit !important;
}

/* --- Variation 1: Dark Background Icons --- */
.wp-block-kadence-single-icon.retro-3d-icon,
.wp-block-kadence-single-icon.retro-3d-icon-dark,
.wp-block-kadence-single-icon.retro-3d-icon.retro-dark {
    background-color: var(--global-palette3) !important;
    border: 1px solid var(--global-palette7) !important;
    color: var(--global-palette7) !important;
    box-shadow:
        -1px 1px 0px var(--global-palette7),
        -2px 2px 0px var(--global-palette7),
        -3px 3px 0px var(--global-palette7),
        -4px 4px 0px var(--global-palette7),
        -5px 5px 0px var(--global-palette7),
        -6px 6px 0px var(--global-palette7),
        -7px 7px 0px var(--global-palette7),
        -8px 8px 0px var(--global-palette7) !important;
}

.wp-block-kadence-single-icon.retro-3d-icon:hover,
.wp-block-kadence-single-icon.retro-3d-icon-dark:hover,
.wp-block-kadence-single-icon.retro-3d-icon.retro-dark:hover {
    transform: translate(-3px, 3px) !important;
    box-shadow:
        -1px 1px 0px var(--global-palette7),
        -2px 2px 0px var(--global-palette7),
        -3px 3px 0px var(--global-palette7),
        -4px 4px 0px var(--global-palette7),
        -5px 5px 0px var(--global-palette7) !important;
}

.wp-block-kadence-single-icon.retro-3d-icon:active,
.wp-block-kadence-single-icon.retro-3d-icon-dark:active,
.wp-block-kadence-single-icon.retro-3d-icon.retro-dark:active {
    transform: translate(-8px, 8px) !important;
    box-shadow: 0px 0px 0px var(--global-palette7) !important;
}

/* --- Variation 2: Light Background Icons --- */
.wp-block-kadence-single-icon.retro-3d-icon-light,
.wp-block-kadence-single-icon.retro-3d-icon.retro-light {
    background-color: var(--global-palette9, #ffffff) !important;
    border: 1px solid var(--global-palette3) !important;
    color: var(--global-palette3) !important;
    box-shadow:
        -1px 1px 0px var(--global-palette3),
        -2px 2px 0px var(--global-palette3),
        -3px 3px 0px var(--global-palette3),
        -4px 4px 0px var(--global-palette3),
        -5px 5px 0px var(--global-palette3),
        -6px 6px 0px var(--global-palette3),
        -7px 7px 0px var(--global-palette3),
        -8px 8px 0px var(--global-palette3) !important;
}

.wp-block-kadence-single-icon.retro-3d-icon-light:hover,
.wp-block-kadence-single-icon.retro-3d-icon.retro-light:hover {
    transform: translate(-3px, 3px) !important;
    box-shadow:
        -1px 1px 0px var(--global-palette3),
        -2px 2px 0px var(--global-palette3),
        -3px 3px 0px var(--global-palette3),
        -4px 4px 0px var(--global-palette3),
        -5px 5px 0px var(--global-palette3) !important;
}

.wp-block-kadence-single-icon.retro-3d-icon-light:active,
.wp-block-kadence-single-icon.retro-3d-icon.retro-light:active {
    transform: translate(-8px, 8px) !important;
    box-shadow: 0px 0px 0px var(--global-palette3) !important;
}

/* --- Mobile Responsive Icon Overrides (max-width: 767px) --- */
@media (max-width: 767px) {
    /* Variation 1: Dark Icons Mobile overrides */
    .wp-block-kadence-single-icon.retro-3d-icon,
    .wp-block-kadence-single-icon.retro-3d-icon-dark,
    .wp-block-kadence-single-icon.retro-3d-icon.retro-dark {
        box-shadow:
            -1px 1px 0px var(--global-palette7),
            -2px 2px 0px var(--global-palette7),
            -3px 3px 0px var(--global-palette7),
            -4px 4px 0px var(--global-palette7) !important;
    }

    .wp-block-kadence-single-icon.retro-3d-icon:hover,
    .wp-block-kadence-single-icon.retro-3d-icon-dark:hover,
    .wp-block-kadence-single-icon.retro-3d-icon.retro-dark:hover {
        transform: translate(-2px, 2px) !important;
        box-shadow:
            -1px 1px 0px var(--global-palette7),
            -2px 2px 0px var(--global-palette7) !important;
    }

    .wp-block-kadence-single-icon.retro-3d-icon:active,
    .wp-block-kadence-single-icon.retro-3d-icon-dark:active,
    .wp-block-kadence-single-icon.retro-3d-icon.retro-dark:active {
        transform: translate(-4px, 4px) !important;
        box-shadow: 0px 0px 0px var(--global-palette7) !important;
    }

    /* Variation 2: Light Icons Mobile overrides */
    .wp-block-kadence-single-icon.retro-3d-icon-light,
    .wp-block-kadence-single-icon.retro-3d-icon.retro-light {
        box-shadow:
            -1px 1px 0px var(--global-palette3),
            -2px 2px 0px var(--global-palette3),
            -3px 3px 0px var(--global-palette3),
            -4px 4px 0px var(--global-palette3) !important;
    }

    .wp-block-kadence-single-icon.retro-3d-icon-light:hover,
    .wp-block-kadence-single-icon.retro-3d-icon.retro-light:hover {
        transform: translate(-2px, 2px) !important;
        box-shadow:
            -1px 1px 0px var(--global-palette3),
            -2px 2px 0px var(--global-palette3) !important;
    }

    .wp-block-kadence-single-icon.retro-3d-icon-light:active,
    .wp-block-kadence-single-icon.retro-3d-icon.retro-light:active {
        transform: translate(-4px, 4px) !important;
        box-shadow: 0px 0px 0px var(--global-palette3) !important;
    }
}


/* ==========================================================================
   5. NAVIGATION & MENUS
   ========================================================================== */

/* Active / current and hover menu item underlines */
.kb-navigation .current-menu-item .kb-link-wrap a.kb-nav-link-content::after,
.kb-navigation .menu-item .kb-link-wrap a.kb-nav-link-content:hover::after {
    height: 4px !important;
    margin-bottom: 2px;
    background-color: #f72630 !important;
}


/* ==========================================================================
   6. GRAVITY FORMS OVERRIDES
   ========================================================================== */

/* Spacing between form fields (General) */
.gform_fields {
    gap: 12px !important;
}

/* General submit button focus reset */
.gform_button[type="submit"]:focus {
    outline: none !important;
}

/* Error validation container styling (General) */
.gform-theme--framework .gform_validation_errors {
    margin-bottom: 12px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    outline: none !important;
}

.gform-theme--framework .gform_validation_errors:focus {
    outline: none !important;
}

/* --------------------------------------------------------------------------
   6.1. Light Background - Full Width Red Button Form (.light-form-red-btn)
   -------------------------------------------------------------------------- */

/* Spacing between form fields */
.light-form-red-btn .gform_fields {
    gap: 12px 12px !important;
}

/* Full-Width 3D Retro Submit Button (Red Button, 6px Dark Shadow) */
.light-form-red-btn .gform_footer,
.light-form-red-btn .gform-footer {
    width: 100% !important;
    padding: 0 !important;
    margin: 20px 0 0 0 !important;
}

.light-form-red-btn .gform_button[type="submit"] {
    position: relative !important;
    display: block !important;
    width: calc(100% - 6px) !important;
    margin-left: 6px !important;
    margin-right: 0 !important;
    text-align: center !important;
    text-decoration: none;
    text-transform: uppercase !important;
    font-family: 'Nohemi', sans-serif;
    font-weight: 700 !important;
    font-size: 20px !important;
    padding: 16px 24px !important;
    background-color: var(--global-palette1, #e02424) !important;
    color: #ffffff !important;
    border: 1px solid #1f1f1f !important;
    border-radius: 0px !important;
    box-shadow:
        -1px 1px 0px #1f1f1f,
        -2px 2px 0px #1f1f1f,
        -3px 3px 0px #1f1f1f,
        -4px 4px 0px #1f1f1f,
        -5px 5px 0px #1f1f1f,
        -6px 6px 0px #1f1f1f !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

/* Button Hover State */
.light-form-red-btn .gform_button[type="submit"]:hover {
    transform: translate(-3px, 3px) !important;
    box-shadow:
        -1px 1px 0px #1f1f1f,
        -2px 2px 0px #1f1f1f,
        -3px 3px 0px #1f1f1f !important;
}

/* Button Click/Active State */
.light-form-red-btn .gform_button[type="submit"]:active {
    transform: translate(-6px, 6px) !important;
    box-shadow: 0px 0px 0px #1f1f1f !important;
}

.light-form-red-btn .gform_button[type="submit"]:focus {
    outline: none !important;
}

/* Input Fields (White Background, Dark Dashed Borders) */
.light-form-red-btn .gfield input[type="text"],
.light-form-red-btn .gfield input[type="email"],
.light-form-red-btn .gfield input[type="tel"],
.light-form-red-btn .gfield input[type="number"],
.light-form-red-btn .gfield input[type="url"],
.light-form-red-btn .gfield textarea,
.light-form-red-btn .gfield select {
    box-sizing: border-box !important;
    height: 48px !important;
    padding: 12px 16px !important;
    gap: 8px !important;
    font-size: 16px;
    background: #ffffff !important;
    color: #1f1f1f !important;
    border: 1px dashed #1f1f1f !important;
    border-radius: 0 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Input Fields Focus States */
.light-form-red-btn .gfield input[type="text"]:focus,
.light-form-red-btn .gfield input[type="email"]:focus,
.light-form-red-btn .gfield input[type="tel"]:focus,
.light-form-red-btn .gfield input[type="number"]:focus,
.light-form-red-btn .gfield input[type="url"]:focus,
.light-form-red-btn .gfield textarea:focus,
.light-form-red-btn .gfield select:focus {
    outline: none !important;
    border: 1px dashed #1f1f1f !important;
    box-shadow: 0 0 0 2px rgba(31, 31, 31, 0.2) !important;
}

/* Placeholder text color adjustment */
.light-form-red-btn .gfield input::placeholder,
.light-form-red-btn .gfield textarea::placeholder {
    color: #767676 !important;
    opacity: 1 !important;
}

/* Individual field error validation text */
.light-form-red-btn .gfield_validation_message,
.light-form-red-btn .validation_message {
    color: #e02424 !important;
    font-size: 14px !important;
}

/* Mobile Responsive Form Overrides */
@media (max-width: 767px) {
    .light-form-red-btn .gform_button[type="submit"] {
        font-size: 17px !important;
        padding: 14px 20px !important;
    }
}

/* --------------------------------------------------------------------------
   6.2. Dark Background Form (.dark-bg-form)
   -------------------------------------------------------------------------- */

/* Custom form fields with dashed white borders on dark backgrounds */
.dark-bg-form .gfield input[type="text"],
.dark-bg-form .gfield input[type="email"],
.dark-bg-form .gfield input[type="tel"],
.dark-bg-form .gfield input[type="number"],
.dark-bg-form .gfield input[type="url"],
.dark-bg-form .gfield textarea,
.dark-bg-form .gfield select {
    box-sizing: border-box !important;
    height: 48px !important;
    padding: 12px 16px !important;
    gap: 8px !important;
    font-size: 16px;
    background: transparent !important;
    border: 1px dashed #ffffff !important;
    border-radius: 0 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Focus States */
.dark-bg-form .gfield input[type="text"]:focus,
.dark-bg-form .gfield input[type="email"]:focus,
.dark-bg-form .gfield input[type="tel"]:focus,
.dark-bg-form .gfield input[type="number"]:focus,
.dark-bg-form .gfield input[type="url"]:focus,
.dark-bg-form .gfield textarea:focus,
.dark-bg-form .gfield select:focus {
    outline: none !important;
    border: 1px dashed #ffffff !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) !important;
}

/* Form Footer spacing adjustments */
.dark-bg-form .gform-footer.gform_footer.top_label {
    margin-top: 20px;
    margin-left: 8px;
}

/* Submit Button Specific Styles (Box shadow rules in Section 3) */
.dark-bg-form .gform_button[type="submit"] {
    padding: 16px 24px !important;
    font-family: 'Nohemi', sans-serif;
    font-weight: 700 !important;
    font-size: 20px !important;
}

/* Individual field error validation text */
.dark-bg-form .gfield_validation_message,
.dark-bg-form .validation_message {
    color: #ffffff !important;
    font-size: 14px !important;
}

/* Mobile Responsive Form Overrides */
@media (max-width: 767px) {
    .dark-bg-form .gform_button[type="submit"] {
        font-size: 17px !important;
        padding: 14px 20px !important;
    }

    .dark-bg-form .gform-footer.gform_footer.top_label {
        margin-left: 6px;
    }
}

/* --------------------------------------------------------------------------
   6.3. Light Background Form (.light-bg-form)
   -------------------------------------------------------------------------- */

/* Spacing between form fields */
.light-bg-form .gform_fields {
    gap: 20px 12px !important;
}

/* 3D Retro Submit Button (Red Button, 6px Dark Shadow on Desktop) */
.light-bg-form .gform_button[type="submit"] {
    position: relative !important;
    margin-left: 8px;
    display: inline-block;
    text-decoration: none;
    font-family: 'Nohemi', sans-serif;
    font-weight: 700 !important;
    font-size: 20px !important;
    padding: 16px 24px !important;
    background-color: var(--global-palette1, #e02424) !important;
    color: #ffffff !important;
    border: 1px solid #1f1f1f !important;
    border-radius: 0px !important;
    box-shadow:
        -1px 1px 0px #1f1f1f,
        -2px 2px 0px #1f1f1f,
        -3px 3px 0px #1f1f1f,
        -4px 4px 0px #1f1f1f,
        -5px 5px 0px #1f1f1f,
        -6px 6px 0px #1f1f1f !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

/* Button Hover State */
.light-bg-form .gform_button[type="submit"]:hover {
    transform: translate(-3px, 3px) !important;
    box-shadow:
        -1px 1px 0px #1f1f1f,
        -2px 2px 0px #1f1f1f,
        -3px 3px 0px #1f1f1f !important;
}

/* Button Click/Active State */
.light-bg-form .gform_button[type="submit"]:active {
    transform: translate(-6px, 6px) !important;
    box-shadow: 0px 0px 0px #1f1f1f !important;
}

.light-bg-form .gform_button[type="submit"]:focus {
    outline: none !important;
}

/* Input Fields (White Background, Dark Dashed Borders) */
.light-bg-form .gfield input[type="text"],
.light-bg-form .gfield input[type="email"],
.light-bg-form .gfield input[type="tel"],
.light-bg-form .gfield input[type="number"],
.light-bg-form .gfield input[type="url"],
.light-bg-form .gfield textarea,
.light-bg-form .gfield select {
    box-sizing: border-box !important;
    height: 48px !important;
    padding: 12px 16px !important;
    gap: 8px !important;
    font-size: 16px;
    background: #ffffff !important;
    color: #1f1f1f !important;
    border: 1px dashed #1f1f1f !important;
    border-radius: 0 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Input Fields Focus States */
.light-bg-form .gfield input[type="text"]:focus,
.light-bg-form .gfield input[type="email"]:focus,
.light-bg-form .gfield input[type="tel"]:focus,
.light-bg-form .gfield input[type="number"]:focus,
.light-bg-form .gfield input[type="url"]:focus,
.light-bg-form .gfield textarea:focus,
.light-bg-form .gfield select:focus {
    outline: none !important;
    border: 1px dashed #1f1f1f !important;
    box-shadow: 0 0 0 2px rgba(31, 31, 31, 0.2) !important;
}

/* Placeholder text color adjustment */
.light-bg-form .gfield input::placeholder,
.light-bg-form .gfield textarea::placeholder {
    color: #767676 !important;
    opacity: 1 !important;
}

/* Form Footer spacing adjustments */
.light-bg-form .gform-footer.gform_footer.top_label {
    margin-top: 20px;
    margin-left: 6px;
}

/* Individual field error validation text */
.light-bg-form .gfield_validation_message,
.light-bg-form .validation_message {
    color: #e02424 !important;
    font-size: 14px !important;
}

/* Mobile Responsive Form Overrides */
@media (max-width: 767px) {
    .light-bg-form .gform_button[type="submit"] {
        width: 100% !important;
        font-size: 17px !important;
        padding: 14px 20px !important;
    }
}


/* ==========================================================================
   7. DECORATIVE SKETCHES & HIGHLIGHTS
   ========================================================================== */

/* --- Skewed Text Highlight Backgrounds --- */
mark.has-inline-color,
mark.has-inline-color.has-theme-palette-3-color,
mark.has-inline-color.has-theme-palette-9-color,
.bg-highlight mark.kt-highlight {
    position: relative;
    display: inline-block;
    padding: 0 6px;
    z-index: 1;
    background-clip: text !important;
    -webkit-background-clip: text !important;
}

mark.has-inline-color::before,
mark.has-inline-color.has-theme-palette-3-color::before,
mark.has-inline-color.has-theme-palette-9-color::before,
.bg-highlight mark.kt-highlight::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: inherit;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    transform: skewX(-8deg);
}

/* --- Base Handwritten Elements (Covered By Your Grace font) --- */
.new,
.our-highlight,
.pen-sketch,
.pen-sketch-larg,
.pen-sketch-red mark.kt-highlight,
.pen-sketch-red-custom {
    font-family: 'Covered By Your Grace', cursive;
    font-weight: 400;
}

/* --- Positioning & Display Setup for Sketched/Highlighted Elements (Alphabetical) --- */
.business-highlight,
.business-highlight-circle,
.business-hightlight,
.freedom,
.freedom-circle mark.kt-highlight,
.grow-your-business,
.growth-highlight mark.kt-highlight,
.growth-highlight-circle,
.intentionally mark.kt-highlight,
.killer-highlight mark.kt-highlight,
.lives-highlight,
.marketers-highlight mark.kt-highlight,
.new,
.outgrown-circle,
.pen-red-mark-bellow,
.pen-sketch,
.pen-sketch-larg,
.pen-sketch-red mark.kt-highlight,
.pen-sketch-red-custom,
.profit-highlight,
.resources-circle mark.kt-highlight,
.right-people mark.kt-highlight,
.stronger-highlight,
.thinking,
.women-highlight,
.world-highlight,
.years-highlight,
.you-circle {
    position: relative;
    display: inline-block;
    z-index: 1;
}

/* --- Underline Vectors (::after) --- */

/* Pen Red Mark Below Highlight Underlines */
.business-highlight::after,
.marketers-highlight mark.kt-highlight::after,
.pen-red-mark-bellow::after,
.stronger-highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 10px;
    background-image: url('/wp-content/uploads/2026/06/pen-red-mark-bellow.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.lives-highlight::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 10px;
    background-image: url('/wp-content/uploads/2026/06/lives-highlight-vector.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.killer-highlight mark.kt-highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 10px;
    background-image: url('/wp-content/uploads/2026/06/Vector-killer.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.profit-highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 10px;
    background-image: url('/wp-content/uploads/2026/06/profit-vector.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.women-highlight::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 10px;
    background-image: url('/wp-content/uploads/2026/06/women-highlight.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.years-highlight::after {
    content: '';
    position: absolute;
    bottom: -22px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 9px;
    background-image: url('/wp-content/uploads/2026/06/pen-sketch-line.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.world-highlight::after {
    content: '';
    position: absolute;
    bottom: -22px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 9px;
    background-image: url('/wp-content/uploads/2026/06/Vector-world.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.right-people mark.kt-highlight::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 9px;
    background-image: url('/wp-content/uploads/2026/06/right-people-vector.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.growth-highlight mark.kt-highlight::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 10px;
    background-image: url('/wp-content/uploads/2026/06/growth-highlight.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.business-hightlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 10px;
    background-image: url('/wp-content/uploads/2026/06/business-highlight.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.thinking::after {
    content: '';
    position: absolute;
    bottom: -26px;
    left: -8px;
    z-index: -1;
    width: 157px;
    height: 10px;
    background-image: url('/wp-content/uploads/2026/06/thinking.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.freedom::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: -6px;
    z-index: -1;
    width: 112px;
    height: 9px;
    background-image: url('/wp-content/uploads/2026/06/freedom.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

/* --- Circle & Sketch Overlays (::before) --- */

.growth-highlight-circle::after {
    content: "";
    position: absolute;
    top: 18%;
    left: -6%;
    right: -7%;
    bottom: 0%;
    z-index: -1;
    background-image: url('/wp-content/uploads/2026/06/red-circle-vector.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.business-highlight-circle::after {
    content: "";
    position: absolute;
    top: 10%;
    left: -6%;
    right: -7%;
    bottom: 0%;
    z-index: -1;
    background-image: url('/wp-content/uploads/2026/06/business-highlight-circle-img.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.pen-sketch::before,
.pen-sketch-larg::before,
.intentionally mark.kt-highlight::before {
    content: "";
    position: absolute;
    top: -3%;
    left: -7%;
    right: -8%;
    bottom: -10%;
    z-index: -1;
    background-image: url('/wp-content/uploads/2026/06/pen-sketch-svg-larg.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.outgrown-circle::before {
    content: "";
    position: absolute;
    top: 0%;
    left: -6%;
    right: -4%;
    bottom: 0%;
    z-index: -1;
    background-image: url('/wp-content/uploads/2026/06/outgrown-circle-img.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.freedom-circle mark.kt-highlight::before {
    content: "";
    position: absolute;
    top: 18%;
    left: -6%;
    right: -7%;
    bottom: 0%;
    z-index: -1;
    background-image: url('/wp-content/uploads/2026/06/red-circle-vector.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.you-circle::before {
    content: "";
    position: absolute;
    top: 0;
    left: -6%;
    right: -7%;
    bottom: 0%;
    z-index: -1;
    background-image: url('/wp-content/uploads/2026/06/you-circle.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.pen-sketch-red mark.kt-highlight::before,
.resources-circle mark.kt-highlight::before {
    content: "";
    position: absolute;
    top: 0%;
    left: -3%;
    right: -5%;
    bottom: -6%;
    z-index: -1;
    background-image: url('/wp-content/uploads/2026/06/pen-sketch-red-1.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.pen-sketch-red-custom::before {
    content: "";
    position: absolute;
    top: 0%;
    left: -3%;
    right: -5%;
    bottom: -6%;
    z-index: -1;
    background-image: url('/wp-content/uploads/2026/06/success.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.new::before {
    content: "";
    position: absolute;
    top: 0%;
    left: -10%;
    right: -12%;
    bottom: -6%;
    z-index: -1;
    background-image: url('/wp-content/uploads/2026/06/new.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.grow-your-business::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 17px;
    background-image: url('/wp-content/uploads/2026/06/grow.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

/* --- Mobile Responsive Sketches (max-width: 767px) --- */
@media (max-width: 767px) {
    .thinking::after {
        bottom: -14px;
        left: -6px;
        width: 93px;
        height: 10px;
    }

    .years-highlight::after {
        bottom: -16px;
    }

    .right-people mark.kt-highlight::after {
        bottom: 1px;
    }
}


/* ==========================================================================
   8. REVIEW CARDS (DESKTOP HOVER & MOBILE RESPONSIVE)
   ========================================================================== */

/* --- Desktop Layout (Interactive Hover: Screens 1025px and wider) --- */
@media (min-width: 1025px) {
    .review-card {
        position: relative;
        overflow: hidden;
    }

    /* Set underlying color to exactly #1f1f1f */
    .review-card>.kt-inside-inner-col {
        position: relative;
        z-index: 1;
        background-color: #1f1f1f !important;
    }

    /* Zoom Container (Created by JS) styling */
    .review-card-bg-zoom {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transform: scale(1);

        /* Grayscale & Desaturation Filter */
        opacity: 0.24 !important; /* 24% image opacity to blend with the dark background */
        filter: grayscale(100%) brightness(0.9) contrast(1.1) !important; /* Turns color photos to premium desaturated grayscale */

        transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.45s ease;
        z-index: 0;
    }

    /* Zoom background image on hover */
    .review-card:hover .review-card-bg-zoom {
        transform: scale(1.08);
    }

    /* The Red Color + Checkerboard SVG Overlay */
    .review-card>.kt-inside-inner-col::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--global-palette1, #3182CE);
        background-image: url(/wp-content/uploads/2026/06/Frame-1556.svg);
        background-size: contain;
        background-position: 0% 50%;
        background-attachment: scroll;
        background-repeat: repeat-y;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        z-index: 1;
    }

    /* Show the overlay on hover */
    .review-card:hover>.kt-inside-inner-col::before {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Normal Stage: Hide review & hover info (Absolute), show static bottom (Relative) */
    .review-card-top,
    .review-card-hover-info {
        position: absolute !important;
        top: 32px;
        left: 64px;
        right: 32px;
        opacity: 0;
        visibility: hidden;
        z-index: 2;
        transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
    }

    .review-card-bottom {
        position: relative !important;
        opacity: 1;
        visibility: visible;
        z-index: 2;
        margin-top: auto !important; /* Pushes the name container to the bottom */
        transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
    }

    /* Hover Stage: Show review & hover info (Relative), hide static bottom (Absolute) */
    .review-card:hover .review-card-top {
        position: relative !important;
        top: auto;
        left: auto;
        right: auto;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .review-card:hover .review-card-hover-info {
        position: relative !important;
        top: auto;
        left: auto;
        right: auto;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .review-card:hover .review-card-bottom {
        position: absolute !important;
        bottom: 32px;
        left: 64px;
        opacity: 0 !important;
        visibility: hidden !important;
        margin-left: 0 !important;
    }
}

/* --- Mobile & Tablet Override (Screens 1024px and narrower) --- */
@media (max-width: 1024px) {
    .review-card-bg-zoom {
        display: none !important;
    }

    /* Force the red checkerboard background on mobile & tablet */
    .review-card>.kt-inside-inner-col {
        background-color: var(--global-palette1) !important;
        background-image: url(/wp-content/uploads/2026/06/Frame-1556.svg) !important;
        background-size: contain !important;
        background-position: 0% 50% !important;
        background-attachment: scroll !important;
        background-repeat: repeat-y !important;
    }

    /* Make review & hover info relative (active in flex layout), hide bottom info */
    .review-card .review-card-top,
    .review-card .review-card-hover-info {
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .review-card .review-card-bottom {
        position: absolute !important;
        opacity: 0 !important;
        visibility: hidden !important;
        margin-left: 0 !important;
    }
}

/* --- Review Card Left BG (Mobile: max-width: 767px) --- */
@media (max-width: 767px) {
    .card-left-bg-mob>.kt-inside-inner-col {
        background-size: 20px auto !important;
    }
}


/* ==========================================================================
   9. LAYOUT & UTILITY CLASSES
   ========================================================================== */

/* --- Tags / Dynamic Lists with '#' Icons --- */
.hash-icon.kb-dynamic-list.kb-dynamic-list-layout-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.hash-icon.kb-dynamic-list .kb-dynamic-list-item {
    border: 1px dashed var(--global-palette3);
    display: flex;
    transition: background-color 0.3s ease; /* Easing effect when hovered/unhovered */
}

.hash-icon.kb-dynamic-list .kb-dynamic-list-item-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--global-palette3);
    text-decoration: none;
    padding: 10px 16px; /* Expanded clickable link area to the edges */
    width: 100%; /* Ensures the link spans the full width of the list item */
    box-sizing: border-box;
}

/* Prepended '#' SVG icon */
.hash-icon.kb-dynamic-list .kb-dynamic-list-item-link::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    background-color: var(--global-palette1);
    -webkit-mask-image: url('/wp-content/uploads/2026/06/hash.svg');
    mask-image: url('/wp-content/uploads/2026/06/hash.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Hover background to global palette 8 */
.hash-icon.kb-dynamic-list .kb-dynamic-list-item:hover {
    background-color: var(--global-palette8);
}

/* Hide any tag items beyond the 2nd */
.hash-icon.kb-dynamic-list .kb-dynamic-list-item:nth-child(n+3) {
    display: none;
}

/* --- Push CTA / Icon to Bottom of Query Cards --- */
.cta-bottom-query-card .kb-query-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cta-bottom-query-card .kb-query-item .heading-with-myicon {
    margin-top: auto;
}

/* --- Post Banner / Read More Position Overrides (Preserved Reference) --- */
/*
.post-banner {
    position: relative;
}

.read-more-icon {
    position: absolute;
    left: 0;
    bottom: -100px;
}
*/

/* --- Helpers & Utilities --- */
.transform-6deg {
    transform: skewX(-6deg);
}

.fit-content-width,
.fit-content-width p {
    width: fit-content;
    max-width: fit-content;
}

/* --- Apple Podcasts / Spotify SVG Layout Space Overrides --- */

/* Hide the default SVG immediately so it never flashes on load */
.apple-podcasts .kb-svg-icon-wrap svg,
.spotify .kb-svg-icon-wrap svg {
    display: none !important;
}

/* Reserve the exact 32px layout space so the button doesn't shift when JS runs */
.apple-podcasts .kb-svg-icon-wrap,
.spotify .kb-svg-icon-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
}

/* --- Kadence Query Loop - Mobile and Tab Post Limits (max-width: 1024px) --- */
@media (max-width: 1024px) {
    /* Show only 3 posts on mobile (Hides 4th and after) */
    .mobile-limit-posts-three .kb-query-item:nth-child(n+4) {
        display: none !important;
    }

    /* Show only 4 posts on mobile (Hides 5th and after) */
    .mobile-limit-posts-four .kb-query-item:nth-child(n+5) {
        display: none !important;
    }

    /* Show only 6 posts on mobile (Hides 7th and after) */
    .mobile-limit-posts-six .kb-query-item:nth-child(n+7) {
        display: none !important;
    }
}

/* Mobile overwite */

@media (max-width: 767px) {
    .background-20-mobile > .kt-inside-inner-col,
	.background-20-mobile-before > .kt-inside-inner-col:before {
        background-size: 20px auto !important;
    }
	
	.freedom::after {
    left: 0;
    width: 80px;
}