/home/moonrcjl/template.moontelict.com/a.tech/assets/scss/components/_breadcrumb.scss
@use '../utils' as *;

/*----------------------------------------*/
/*  2.11 Breadcrumb
/*----------------------------------------*/




.mt-breadcrumb {
    &-space {
        padding-top: 255px;
        padding-bottom: 140px;

        @media #{$xs} {
            padding-top: 160px;
            padding-bottom: 100px;
        }
    }

    &-bg {
        background-repeat: no-repeat;
        background-position: center;
    }

    &-subtitle {
        font-size: 24px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 50px;
        padding: 8px 24px;
        display: inline-block;
    }

    &-title {
        font-size: 96px;
        line-height: 1.2;
        color: #fff;

        @media #{$xxl} {
            font-size: 80px;
        }

        @media #{$xl} {
            font-size: 70px;
        }

        @media #{$lg} {
            font-size: 60px;
        }

        @media #{$md} {
            font-size: 50px;
        }

        @media #{$xs} {
            font-size: 40px;
        }
    }

    &-content {
        & p {
            font-size: 24px;
            color: #CDCDCD;
            line-height: 34px;

            @media #{$xl,$lg,$md,$xs} {
                & br {
                    display: none;
                }
            }

            @media #{$xs} {
                font-size: 18px;
                line-height: 28px;
            }
        }
    }

    &-list {
        & span {
            margin: 0 2px;
            display: inline-block;
            color: #B1B4BA;

            &.active {
                & a {
                    color: var(--mt-theme-2);
                }
            }

            & a {
                color: #B1B4BA;
                font-size: 20px;
            }

            &.dvir {
                margin: 0 2px;
            }
        }
    }

    &-newslatter {
        width: 514px;
        text-align: center;
        display: inline-block;
        @media #{$xs} {
                width: 300px;
            }
        & button {
            position: absolute;
            right: 5px;
            bottom: 8px;
            font-weight: 700;
            color: #fff;
            padding: 5px 15px;
            border-radius: 50px;
        }
    }

    &-shape {
        &-1 {
            right: -15%;
            bottom: -10%;
            animation: mttranslateY2 3s infinite alternate;

            @media #{$xxl} {
                right: -20%;
                bottom: -20%;
            }

            @media #{$xl} {
                right: -25%;
                bottom: -20%;
            }

            @media #{$lg} {
                right: -25%;
                bottom: -20%;
            }

            @media #{$md} {
                right: -25%;
                bottom: -20%;
            }

            @media #{$xs} {
                right: -25%;
                bottom: -10%;
            }

        }

        &-2 {
            left: -3%;
            bottom: 14%;
            animation: mttranslateY2 3s infinite alternate;

            @media #{$xs} {
                display: none;
            }

        }

        &-3 {
            left: 22%;
            bottom: 20%;
             animation: mttranslateX2 4s linear infinite;

            @media #{$xs} {
                display: none;
            }
        }

        &-4 {
            left: 7%;
            top: 21%;
             animation: mttranslateY2 5s linear infinite;
            @media #{$xs} {
                display: none;
            }
        }

        &-5 {
            left: 35%;
            top: 16%;
             animation: mttranslateY2 4s linear infinite;
            @media #{$xs} {
                display: none;
            }
        }

        &-6 {
            right: 20%;
            top: 23%;
             animation: mttranslateX2 3s linear infinite;
            @media #{$xs} {
                display: none;
            }
        }

        &-7 {
            right: 40%;
            top: 17%;
             animation: mttranslateY2 4s linear infinite;

            @media #{$xs} {
                display: none;
            }
        }
    }


    &-2 {
        padding-top: 290px;
        padding-bottom: 150px;
        background-position: bottom center;

        & .mt-breadcrumb-shape {
            &-2 {
                bottom: -19%;
            }

            &-3 {
                bottom: -10%;
            }

            &-5 {
                left: 40%;
                top: 26%;
            }

            &-6 {
                right: 20%;
                top: 30%;
            }

            &-7 {
                right: 40%;
                top: 30%;
            }
        }
    }


}