/* ///////////////////////////////////////////////////////////
23. breadcrumb
/////////////////////////////////////////////////////////// */ 
@use '../abstracts/variables' as *;


.breadcrumb {
    &-area {
        min-height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
        border-radius: 30px;
        margin-left: 30px;
        margin-right: 30px;
        overflow: hidden;
        @media #{$xs}{
            margin-left: 15px;
            margin-right: 15px;
        }
    }
    &-title {
        color: #1B2A52;
        font-size: 70px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -2.1px;
        margin-bottom: 8px;
        @media #{$lg}{
            font-size: 60px;
        }
        @media #{$md}{
            font-size: 55px;
        }
        @media #{$sm}{
            font-size: 50px;
        }
        @media #{$xxs}{
            font-size: 40px;
        }
    }
    &-list {
        display: flex;
        align-items: center;
        justify-content: center;
        a {
            color: rgba(27, 42, 82, .7);
            font-size: 17px;
            font-weight: 400;
            line-height: 25px;
            position: relative;
            z-index: 1;
            padding-right: 13px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            @media #{$xxs}{
                font-size: 16px;
            }
            &:hover {
                
                color: var(--clr-theme-primary);
            }
            &::after {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                content: "";
                background-color: #1B2A52;
                width: 3px;
                height: 3px;
                border-radius: 50%;
            }
        }
        span {
            color: #7D25EC;
            font-size: 17px;
            font-weight: 500;
            line-height: 25px;
            display: block;
            @media #{$xxs}{
                font-size: 16px;
            }
        }
    }
}
.breadcrumb-shape {
    &-1 {
        position: absolute;
        left: 20%;
        top: 30%;
        @media #{$md}{
            left: 12%;
        }
        @media #{$sm}{
            display: none;
        }
    }
    &-2 {
        position: absolute;
        left: 31%;
        bottom: 32%;
        @media #{$md}{
            left: 20%;
        }
        @media #{$sm}{
            display: none;
        }
    }
    &-3 {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 24%;
        @media #{$md}{
            display: none;
        }
    }
    &-4 {
        position: absolute;
        right: -155px;
        top: 50px;
        animation: animation-circle 20s linear 0s infinite;
        z-index: -1;
    }
}

@keyframes animation-circle {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}