:root {
    --color-bg-btn-see-listing: #2B3A55;
    --color-border-btn-see-listing: none;
    --color-text-btn-see-listing: #fff;

    --color-bg-btn-free-valuation: #F4C542;
    --color-border-btn-free-valuation: none;
    --color-text-btn-free-valuation: #fff;

    --color-graph-circle-stroke: #101956;
    --color-graph-circle-fill: #eef1ff;
    --color-graph-line: #333333;
    --color-graph-walker: #101956;

    --color-border-button-prev: #0002;
    --color-bg-view-all-listing: #fff;
    --color-view-all-listing: #101956;

    --color-border-success: #0001;
    --color-bg-success-complete: #22C55E;
    --color-text-success-complete: #fff;
    --color-static-background: #F0FDF4;
    --color-static-green: #27AA57;
    --color-month-background: #EFF6FF;
    --color-month-blue: #2C3B55;
    --color-faq-switch: black;
}

:root[data-theme="dark"] {
    --color-bg-btn-see-listing: none;
    --color-border-btn-see-listing: #515f79;
    --color-text-btn-see-listing: #515f79;

    --color-bg-btn-free-valuation: none;
    --color-border-btn-free-valuation: #F4C542;
    --color-text-btn-free-valuation: #F4C542;

    --color-graph-circle-stroke: #1d4ed8;
    --color-graph-circle-fill: #eef1ff;
    --color-graph-line: #585858;
    --color-graph-walker: #1d4ed8;

    --color-border-button-prev: #b1b1b122;
    --color-bg-view-all-listing: transparent;
    --color-view-all-listing: #9b9b9b;

    --color-border-success: #b1b1b122;
    --color-bg-success-complete: #303030;
    --color-text-success-complete: #22C55E;
    --color-static-background: #d5e1d8;
    --color-static-green: #27AA57;
    --color-month-background: #cdd3db;
    --color-month-blue: #2C3B55;
    --color-faq-switch: #6e6e6e;
}

main {
    padding: 0 !important;
    max-width: 100% !important;
    padding-bottom: var(--padding-main) !important;
}

/*
.slide-section {
    max-width: unset !important;
    position: relative;

    .wrapper {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
    }

    img {
        aspect-ratio: 15/6;
        object-fit: cover;
        flex: 0 0 100%;
        scroll-snap-align: start;
        opacity: 0.8;
        filter: opacity(0.3);
        filter: brightness(0.5);
    }

    ::-webkit-scrollbar {
        display: none;
    }

    .prev,
    .next {
        position: absolute;
        top: 50%;
        left: 8px;
        padding: 8px;
        background-color: #0002;
        border: none;
        border-radius: var(--box-radius);
        font-size: var(--text-heading1);
        translate: 0 -50%;
        display: none !important;

        &.next {
            left: unset;
            right: 8px;
        }
    }
}


.hero-section {
    width: 100%;
    max-width: unset !important;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    gap: 18px;

    h1 {
        font-size: var(--text-heading1);
        font-weight: bold;

        color: #fff;
        text-align: center;
    }

    h2 {
        font-size: var(--text-heading1);
        font-weight: bold;

        color: #fff;
        text-align: center;
    }

    p {
        color: #fff;
    }

    .row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: var(--box-radius);
        padding: var(--padding-button);
        border: none;
        background-color: #2B3A55;
        color: #fff;
        cursor: pointer;

        &.freevalua {
            background-color: #F4C542;
        }
    }
} */

@keyframes tracking-move {
    to {
        stroke-dashoffset: -650;
    }

    /* dash + gap = 50 + 600 */
}

.introduction-section {
    display: flex;
    flex-direction: column;
    align-items: center;

    .content {
        padding: var(--padding-main);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;

        h2 {
            font-size: var(--text-heading2);
            font-weight: 600;
            text-align: center;
            color: var(--color-heading-black);
        }

        a {
            width: min-content;
            white-space: nowrap;
            padding: var(--padding-button);
            color: white;
            background-color: var(--color-text);
            border-radius: var(--box-radius);
        }

        .graph {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10%;

            position: relative;

            width: 100%;
            aspect-ratio: 16 / 7;

            .duty {
                width: 30%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 8px;

                b {
                    font-weight: 600;
                    font-size: var(--text-heading3);
                    color: var(--color-heading-black);
                }

                p {
                    text-align: center;
                    color: var(--color-text-black);
                }
            }

            .img-container {
                border-radius: var(--card-radius);
                box-shadow: var(--shadow-card);

                img {
                    border-radius: var(--card-radius);
                }
            }

            .circles {
                position: absolute;
                z-index: 2;

                width: 100%;
                height: 100%;
            }

            .lines {
                position: absolute;
                z-index: -1;

                width: 100%;
                height: 100%;

                .track {
                    stroke: var(--color-graph-line);
                    stroke-width: 2;
                    stroke-linecap: round;
                    stroke-dasharray: 8, 4;
                }

                #left-walker {
                    stroke: var(--color-graph-walker);
                    stroke-width: 10;
                    stroke-linecap: round;

                    stroke-dasharray: 50 600;
                    stroke-dashoffset: 0;
                    animation: tracking-move 3s linear infinite;
                }

                #right-walker {
                    stroke: var(--color-graph-walker);
                    stroke-width: 10;
                    stroke-linecap: round;

                    stroke-dasharray: 50 600;
                    stroke-dashoffset: 0;
                    animation: tracking-move 3s linear infinite;
                }
            }
        }
    }
}


.form-section {
    /*padding-top: var(--padding-main);
    padding-bottom: var(--padding-main);*/

    padding: var(--padding-main) 16px;

    form {
        background-color: var(--color-forground);
        border: 1px solid #0001;
        box-shadow: var(--shadow-card);
        padding: var(--padding-card);
        border-radius: var(--card-radius);

        .form-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 8px;

            .form-group {
                width: 100%;
                display: flex;
                align-items: start;
                flex-direction: column;
                gap: 4px;

                input,
                select {
                    width: 100%;
                    padding: var(--padding-button);
                    box-shadow: var(--shadow-inset);
                    border: 1px solid #0002;
                    outline: none;
                    border-radius: var(--box-radius);
                }
            }
        }

        .btn-wrapper {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 16px;

            button {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                border-radius: var(--box-radius);
                padding: var(--padding-button);
                border: none;
                background-color: #2B3A55;
                color: #fff;
                cursor: pointer;

            }
        }

        .quick-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-top: 16px;
            cursor: pointer;

            .item {
                padding: 8px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                gap: 4px;
                background-color: #F3F4F6;

                &:hover {
                    background-color: #DBEAFE;
                    color: #1D4ED8;

                    svg path {
                        fill: #1D4ED8 !important;
                    }
                }
            }
        }
    }
}

[data-theme="dark"] .form-section {
    form {
        border-color: #b1b1b122;

        .form-wrapper .form-group {
            label {
                color: #9b9b9b;
            }

            input,
            select {
                border-color: #b1b1b122;
                background-color: var(--color-forground);
                color: #9b9b9b;
            }
        }

        .quick-wrapper .item {
            background-color: transparent;
            border: 1px solid #b1b1b122;
            color: #9b9b9b;

            svg path {
                fill: #9b9b9b;
            }

            &:hover {
                border-color: #1D4ED8;
                color: #1D4ED8;

                svg path {
                    fill: #1D4ED8 !important;
                }
            }
        }

        .btn-wrapper button {
            background-color: transparent;
            border: 1px solid #1D4ED8;
            color: #1D4ED8;

            svg path {
                fill: #1D4ED8;
            }
        }
    }
}

.all-feature-section {
    padding: 0 16px;

    h2 {
        font-size: var(--text-heading2);
        font-weight: bold;
        text-align: center;
        margin-bottom: 8px;
        color: var(--color-heading);
    }

    p {
        text-align: center;
        color: var(--color-text);
    }

    .action {
        display: flex;
        align-items: center;

        justify-content: center;
        margin-top: var(--padding-card);

        button {
            border: none;
            padding: var(--padding-button);
            border-radius: var(--box-radius);
            color: var(--color-view-all-listing);
            background-color: var(--color-bg-view-all-listing);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            border: 1px solid var(--color-view-all-listing);

            svg {
                fill: var(--color-view-all-listing);
            }
        }
    }

    .feature-section {
        display: none;

        padding-top: var(--padding-main);
        padding-bottom: var(--padding-main);
        position: relative;

        /* ::-webkit-scrollbar {
        display: none;
    } */

        .next,
        .prev {
            position: absolute;
            z-index: 9;
            top: 50%;
            left: -8px;
            border: 1px solid var(--color-border-button-prev);
            font-size: 20px;
            padding: 12px;
            border-radius: 8px;
            background-color: var(--color-forground);
            box-shadow: var(--shadow-card);
            cursor: pointer;
            outline: none;
            color: var(--color-text-black);

            &.next {
                left: unset;
                right: -8px;
            }
        }

        .featuredListing {
            margin-top: var(--padding-main);
            width: 100%;
            gap: 12px;
            width: 100%;
            display: flex;
            overflow-x: auto;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;

            .card {
                flex: 0 0 calc(33.33% - 6px);
                scroll-snap-align: start;
                border-radius: var(--card-radius);
                box-shadow: var(--shadow-card);
                overflow: hidden;

                background-color: var(--color-forground);
                cursor: pointer;

                .img-container {
                    width: 100%;
                    aspect-ratio: 16/9;
                    overflow: hidden;

                    img {
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                        object-position: center;
                    }
                }

                .detail {
                    width: 100%;
                    padding: var(--padding-card);
                    display: flex;
                    align-items: start;
                    flex-direction: column;
                    gap: 8px;

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

                    h3 {
                        font-weight: bold;
                        color: var(--color-heading);
                    }

                    h4 {
                        font-weight: bold;
                        color: #16A34A;
                    }

                    p {
                        font-size: 14px;
                        font-weight: 300;
                    }

                    span {
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        color: #16A34A;
                        font-size: 14px;
                        font-weight: 300;
                    }

                    a {
                        font-size: 14px;
                        font-weight: 500;
                        color: var(--color-primary);
                    }
                }
            }
        }
    }

    #all-recommends {
        display: flex;
    }
}

.success-section {
    padding: var(--padding-main) 16px;
    position: relative;

    h2 {
        width: 100%;
        text-align: center;
        font-size: var(--text-heading2);
        font-weight: bold;
        color: var(--color-primary);
    }

    >p {
        width: 100%;
        text-align: center;
        color: var(--color-text-black);
    }

    /* ::-webkit-scrollbar {
        display: none;
    } */

    .next,
    .prev {
        position: absolute;
        z-index: 9;
        top: 50%;
        left: 8px;
        border: 1px solid var(--color-border-button-prev);
        font-size: 20px;
        padding: 12px;
        border-radius: 8px;
        background-color: var(--color-forground);
        box-shadow: var(--shadow-card);
        cursor: pointer;
        outline: none;

        color: var(--color-text-black);

        &.next {
            left: unset;
            right: 8px;
        }
    }

    .slider {
        width: 100%;
        margin-top: 12px;
        gap: 12px;
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;

        .item {
            flex: 0 0 calc(25% - 9px);
            scroll-snap-align: start;
            display: flex;
            flex-direction: column;
            border: 1px solid var(--color-border-success);
            box-shadow: var(--shadow-card);
            border-radius: var(--card-radius);
            overflow: hidden;

            .image {
                width: 100%;
                position: relative;

                .industry {
                    border: 1px solid var(--color-border-success);
                    background-color: var(--color-forground);
                    color: var(--color-text-black);
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    padding: 12px;
                    border-radius: 8px;
                    position: absolute;
                    top: 6px;
                    left: 6px;
                }

                .complete {
                    background-color: var(--color-bg-success-complete);
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    padding: 12px;
                    border-radius: 8px;
                    position: absolute;
                    bottom: 6px;
                    right: 6px;
                    color: var(--color-text-success-complete);
                    border: 1px solid var(--color-border-success);

                    svg {
                        path {
                            fill: var(--color-text-success-complete);
                        }
                    }
                }
            }

            .detail {
                padding: var(--padding-card);
                color: var(--color-text-black);

                h3 {
                    font-size: 16px;
                    font-weight: bold;
                }

                p {
                    font-size: 14px;
                    margin-top: 4px;
                    display: block;
                }

                span {
                    font-size: 14px;
                    margin-top: 8px;
                    display: block;
                }
            }

            .static {
                margin-top: auto;
                padding: var(--padding-card);
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;

                .static-item {
                    background-color: var(--color-static-background);
                    border-radius: var(--box-radius);
                    padding: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    flex-direction: column;

                    p {
                        font-size: var(--text-heading3);
                        font-weight: bold;
                        color: var(--color-static-green);
                    }

                    span {
                        font-size: 12px;
                        font-weight: 300;
                    }

                    &.month {
                        background-color: var(--color-month-background);

                        p {
                            color: var(--color-month-blue);
                        }
                    }
                }
            }
        }
    }
}


.faq-section {
    padding: var(--padding-main) 16px;
    background-color: var(--color-background);

    h2 {
        font-size: var(--text-heading2);
        font-weight: bold;
        text-align: center;
        margin-bottom: 8px;
        color: var(--color-heading);
    }

    p {
        text-align: center;
        color: var(--color-text);
    }

    .faq-box {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 16px;
        margin-top: var(--padding-main);
        color: var(--color-text-black);

        .faq-item {
            width: 100%;
            border-radius: var(--card-radius);
            background-color: var(--color-background);

            cursor: pointer;

            div {
                background-color: var(--color-forground);
                padding: var(--padding-card);
                /* font-size: var(--text-heading3); */
                border: 1px solid #0001;
                box-shadow: var(--shadow-card);
                border-radius: var(--box-radius);

                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            h3 {
                font-weight: bold;
            }

            svg {
                font-weight: 300;
                fill: var(--color-faq-switch);
            }

            p {
                display: none;
                padding: var(--padding-card);
                text-align: left;

                &.show {
                    display: block;
                }
            }
        }
    }
}


.about-us {
    padding: 0 16px;

    .content {
        display: flex;
        flex-direction: row;
        gap: var(--padding-main);
        align-items: center;


        h2 {
            margin-top: var(--padding-main);
            font-size: var(--text-heading2);
            font-weight: bold;
            color: var(--color-heading);

            white-space: nowrap;
        }

        p {
            margin-top: 8px;
            color: var(--color-text);

            a {
                color: var(--color-primary);
                font-weight: 600;
                cursor: pointer;
            }
        }

        img {
            margin-top: 8px;
            border-radius: var(--box-radius);
            box-shadow: var(--shadow-card);
        }
    }

}


@media only screen and (max-width:1200px) {
    section:not(.hero-section):not(.slide-section) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .introduction-section .content .graph {
        flex-direction: column;
        gap: 24px;

        .duty {
            width: 50%;
        }

        svg {
            display: none;
        }
    }

    .success-section {
        .slider .item {
            flex: 0 0 calc(33.33% - 6px) !important;
        }

        .prev {
            left: 6px;
        }

        .next {
            right: 6px !important;
        }
    }

    .about-us {
        .content {
            flex-direction: column;
            gap: 0;

            h2 {
                text-align: center;
                white-space: initial;
            }

            p {
                text-align: center;
            }
        }
    }
}


/* Hero - gradient overlay at bottom for better text readability */
.grid.grid-cols-1>div:first-child::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* Hero - glassmorphism trust badge items */
section:first-of-type .flex.items-center.gap-\[12px\] .flex.items-center.gap-2 {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    padding: 6px 14px;
    transition: background 0.2s ease;
}

section:first-of-type .flex.items-center.gap-\[12px\] .flex.items-center.gap-2:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Introduction section - heading decoration */
.introduction-section .content h2::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: var(--color-secondary);
    border-radius: 99px;
    margin: 10px auto 0;
}

/* Form section - better input focus */
.form-section form .form-wrapper .form-group input:focus,
.form-section form .form-wrapper .form-group select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(16, 25, 86, 0.1) !important;
}

/* Form - quick filter pills: better look */
.form-section form .quick-wrapper .item {
    border: 1px solid #E5E7EB;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.18s ease;
}

.form-section form .quick-wrapper .item:hover {
    border-color: #1D4ED8;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.15);
}

/* Form - search button wider and more prominent */
.form-section form .btn-wrapper button {
    padding: 14px 48px !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(43, 58, 85, 0.3);
}

.form-section form .btn-wrapper button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(43, 58, 85, 0.4);
}

/* Featured listing cards - lift + image zoom on hover */
.all-feature-section .feature-section .featuredListing .card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.all-feature-section .feature-section .featuredListing .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.all-feature-section .feature-section .featuredListing .card .img-container img {
    transition: transform 0.35s ease;
}

.all-feature-section .feature-section .featuredListing .card:hover .img-container img {
    transform: scale(1.05);
}

/* Featured listing - view listing link styling */
.all-feature-section .feature-section .featuredListing .card .detail .row a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Feature section headings */
.all-feature-section>.content h2 {
    position: relative;
    padding-bottom: 12px;
}

.all-feature-section>.content h2::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: var(--color-secondary);
    border-radius: 99px;
    margin: 10px auto 0;
}

/* View all button - better hover */
.all-feature-section .action button {
    font-weight: 600;
    transition: all 0.2s ease;
}

.all-feature-section .action button:hover {
    background-color: var(--color-primary) !important;
    color: #fff !important;
    border-color: var(--color-primary) !important;
    transform: translateY(-1px);
}

.all-feature-section .action button:hover svg {
    fill: #fff !important;
}

/* Success section - heading decoration */
.success-section h2 {
    position: relative;
    padding-bottom: 12px;
}

.success-section h2::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: var(--color-secondary);
    border-radius: 99px;
    margin: 10px auto 0;
}

/* Success cards - hover lift */
.success-section .slider .item {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.success-section .slider .item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* FAQ section - heading decoration */
.faq-section>.content h2::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: var(--color-secondary);
    border-radius: 99px;
    margin: 10px auto 0;
}

/* FAQ item - better hover and transition */
.faq-section .faq-box .faq-item div {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-section .faq-box .faq-item:hover div {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.faq-section .faq-box .faq-item p {
    transition: all 0.25s ease;
}

/* About us section - image hover */
.about-us .content img {
    transition: box-shadow 0.3s ease;
}

.about-us .content img:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* --- Latest Insights Section --- */
.faq-insights {
    background-color: var(--color-background);
    padding: 64px 16px;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.faq-insights-inner {
    margin: 0 auto;
}

.faq-insights-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 12px;
}

.faq-insights-header h2 {
    font-size: var(--text-heading2, 1.5rem);
    font-weight: bold;
    color: var(--color-heading);
}

.faq-insights-header a {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.faq-insights-header a:hover {
    opacity: 0.75;
}

.faq-insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.faq-insight-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--card-radius, 12px);
    overflow: hidden;
    background-color: var(--color-forground);
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.faq-insight-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.faq-insight-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.faq-insight-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.faq-insight-card:hover .faq-insight-img img {
    transform: scale(1.04);
}

.faq-insight-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px 20px;
    flex: 1;
}

.faq-insight-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.faq-insight-tags span {
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 99px;
    background-color: #DBEAFE;
    color: #1E40AF;
}

:root[data-theme="dark"] .faq-insight-tags span {
    background-color: #1e3a5f;
    color: #93C5FD;
}

.faq-insight-body b {
    font-size: var(--text-heading3, 1rem);
    font-weight: bold;
    color: var(--color-text-black);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.faq-insight-body p {
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.6;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.faq-insight-read {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: auto;
}

@media only screen and (max-width:800px) {
    section:not(.hero-section):not(.slide-section) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .introduction-section .content .graph {
        display: none;
        flex-direction: column;
        gap: 24px;

        .duty {
            width: 60%;
        }

        svg {
            display: none;
        }
    }

    .mb {
        display: flex;
        flex-direction: column !important;
        align-items: center;
        gap: 12px;
    }

    .form-wrapper {
        grid-template-columns: 1fr !important;
    }

    .quick-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        flex-direction: column;
    }

    .slide-section {
        img {
            aspect-ratio: 1/1;
        }
    }

    .success-section {
        .slider .item {
            flex: 0 0 100% !important;
        }

        .prev {
            left: 6px;
        }

        .next {
            right: 6px !important;
        }
    }

    .all-feature-section {
        .feature-section {
            display: flex;

            .featuredListing .card {
                flex: 0 0 100% !important;
                border: 1px solid #0002;

                .img-container {
                    aspect-ratio: 1/1;
                }
            }
        }

        #all-recommends {
            display: none;

        }
    }

    .mobile-cta-bar {
        display: flex;
    }

    #freeValuationModal {
        padding: 1rem 1rem;
        align-items: flex-start;
        box-sizing: border-box;
    }

    .faq-insights-grid {
        grid-template-columns: 1fr;
    }
}