/**=====================
    Breadcrumb scss
==========================**/

.breadcrumb {
    @include flex_common;
    margin: 0;
    margin-top: 10px;

    .breadcrumb-item {
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
        color: $white;
        text-transform: capitalize;

        +.breadcrumb-item {
            padding-left: 8px;

            [dir="rtl"] & {
                padding-left: unset;
                padding-right: 8px;
            }

            &:before {
                color: $white;
                float: left;
                padding-right: 8px;

                [dir="rtl"] & {
                    float: right;
                    padding-right: unset;
                    padding-left: 8px;
                }
            }
        }
    }
}

.breadcrumb-icon {
    --bs-breadcrumb-divider: '>';

    li {
        display: inline-block;
    }
}

.breadcrumb-section {
    padding-block: calc(135px + (154 - 135) * ((100vw - 320px) / (1920 - 320))) calc(28px + (61 - 28) * ((100vw - 320px) / (1920 - 320)));

    .breadcrumb-contain {
        @include flex_common;
        text-align: center;
        margin: 0 auto;

        h2 {
            font-size: calc(23px + (42 - 23) * ((100vw - 320px) / (1920 - 320)));
            font-weight: 700;
            background: linear-gradient(to right, #fb4040 10%, var(--primary-color) 60%);
            -webkit-background-clip: text;
            background-clip: text;
            display: inline-block;
            -webkit-text-fill-color: transparent;
            text-fill-color: transparent;
            background-size: 200% auto;
            margin: 0 auto;
            position: relative;
            animation: textclip 3s linear infinite;

            &:before,
            &:after {
                @include pos;
                background-color: var(--primary-color);
                height: calc(14px + (34 - 14) * ((100vw - 320px) / (1920 - 320)));
                width: calc(3px + (4 - 3) * ((100vw - 320px) / (1920 - 320)));
                border-radius: 6px;
                @include center(vertical);

                @media (max-width: 1366px) {
                    @include center(vertical);
                }
            }

            &:before {
                left: calc(-13px + (-40 - -13) * ((100vw - 320px) / (1920 - 320)));
            }

            &:after {
                right: calc(-13px + (-40 - -13) * ((100vw - 320px) / (1920 - 320)));
            }

            span {

                &:before,
                &:after {
                    @include pos;
                    background-color: var(--primary-color);
                    height: calc(28px + (58 - 28) * ((100vw - 320px) / (1920 - 320)));
                    width: calc(3px + (4 - 3) * ((100vw - 320px) / (1920 - 320)));
                    border-radius: 6px;
                    @include center(vertical);

                    @media (max-width: 1366px) {
                        @include center(vertical);
                    }
                }

                &:before {
                    left: calc(-7px + (-30 - -7) * ((100vw - 320px) / (1920 - 320)));

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

                &:after {
                    right: calc(-7px + (-30 - -7) * ((100vw - 320px) / (1920 - 320)));

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

        p {
            font-size: 16px;
            line-height: 24px;
            max-width: 680px;
            width: 90%;
            padding-top: calc(20px + (30 - 20)*((100vw - 991px) /(1920 - 991)));
            color: $light-color;
            margin: 0 auto;

            @media (max-width: 767.98px) {
                display: none;
            }
        }
    }
}

@keyframes textclip {
    0% {
        background-position: 100% center;
    }

    50% {
        background-position: 10% center;
    }

    100% {
        background-position: 100% center;
    }
}