/**=====================
    Breadcrumb scss
==========================**/
.breadcrumb {
    @include flex_common;
    margin: 0;
    margin-top: calc(7px + (10 - 7) * ((100vw - 320px) / (1920 - 320)));
    row-gap: 5px;

    .breadcrumb-item {
        font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
        color: $title-color;
        text-transform: capitalize;
        display: flex;
        align-items: center;
        gap: calc(6px + (10 - 6) * ((100vw - 320px) / (1920 - 320)));
        line-height: 1;

        i {
            --Iconsax-Size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
        }

        +.breadcrumb-item {
            padding-left: calc(6px + (8 - 6) * ((100vw - 320px) / (1920 - 320)));
            gap: 0;

            [dir="rtl"] & {
                padding-left: unset;
                padding-right: calc(6px + (8 - 6) * ((100vw - 320px) / (1920 - 320)));
            }

            &:before {
                color: $title-color;
                float: left;
                padding-right: calc(6px + (8 - 6) * ((100vw - 320px) / (1920 - 320)));

                [dir="rtl"] & {
                    float: right;
                    padding-right: unset;
                    padding-left: calc(6px + (8 - 6) * ((100vw - 320px) / (1920 - 320)));
                }
            }
        }

        &.active {
            color: rgba($title-color, 0.671);
            font-weight: 500;
        }
    }
}

.breadcrumb-section {
    background-color: $section-bg;
    padding: calc(26px + (50 - 26) * ((100vw - 320px) / (1920 - 320))) 0;
    position: relative;
    z-index: 0;
    overflow: hidden;

    body.dark & {
        background-color: #252934;

        .breadcrumb-contain {
            h2 {
                color: $white;
            }

            .breadcrumb-icon {
                .breadcrumb-item {
                    color: #d1cfcf;

                    &::before {
                        color: #d1cfcf;
                    }
                }

                svg {
                    --Iconsax-Color: #d1cfcf;
                }

            }
        }
    }

    .breadcrumb-contain {
        text-align: center;

        h2 {
            font-size: calc(23px + (36 - 23) * ((100vw - 320px) / (1920 - 320)));
            font-weight: 600;
            letter-spacing: 0.8px;
            color: $title-color;
            line-height: 1.2;
            text-transform: none;
            margin: 0 auto;
            position: relative;
        }
    }
}