@use '../utils' as *;

.it-breadcrumb {
    &-area {
        @include background;
        padding-top: 75px;
        padding-bottom: 75px;
        background-color: var(--it-gray-3);
        @media #{$xs}{
            padding-top: 80px;
            padding-bottom: 50px;
        }
    } 
    &-title {
        font-size: 45px;
        line-height: 1.56;
        position: relative;
        margin-bottom: 30px;    
        letter-spacing: 0.01em;
        color: var(--it-common-black);
        font-family: var(--it-ff-heading);
        & .title-shape {
            position: absolute;
            bottom: 0;
            left: -.5%;
            z-index: -1;
            @media #{$md,$xs}{
                display: none;
            }
        }
        &.style-2 {
            & .title-shape {
                left: 0;
                right: 0;
                text-align: center;
                margin: 0  auto;
            }
        }
        @media #{$lg}{
            font-size: 36px;
            margin-bottom: 20px;
        } 
        @media #{$md}{
            font-size: 35px;
            margin-bottom: 20px;
        } 
        @media #{$xs}{
            font-size: 35px;
            margin-bottom: 20px;
            & br {
                display: none;
            }
        } 
        @media #{$sm}{
            font-size: 42px;
        } 
    }
    &-thumb {
        padding-right: 137px;
        & img {
            border-radius: 10px;
        }
        @media #{$xl}{
            padding-right: 70px;
        }
        @media #{$lg}{
            padding-right: 40px;
        }
        @media #{$md}{
            padding-right: 0;
        }
        @media #{$xs}{
            padding-right: 0;
            margin-top: 50px;
            width: 100%;
        }
    }
    &-list {
        display: inline-block;
        border-radius: 8px;
        padding: 12px 30px;
        background-color: var(--it-theme-1);
        @media #{$lg}{
            padding: 8px 30px;
        }
        @media #{$md,$xs}{
            padding: 8px 22px;
        }
        & span {
            display: inline-block;
            letter-spacing: 0.01em;
            color: var(--it-common-white);
            font-family: var(--it-ff-spartan-semibold);
            @media #{$lg,$md,$xs}{
                font-size: 14px;
            }
            &.dvdr{
                margin: 0 12px;
                transform: translateY(-1px);
                color: var(--it-common-white);
            }
        }
        & i {
            font-style: normal;
            letter-spacing: 0.01em;
            color: var(--it-common-white);
            font-family: var(--it-ff-spartan-semibold);
            @media #{$lg,$md,$xs}{
                font-size: 14px;
            }
        }
    }
    &-list-2 {
        margin-bottom: 60px;
        & span {
            letter-spacing: 0.01em;
            color: var(--it-common-white);
            font-family: var(--it-ff-spartan-semibold);   
            &.dvdr {
                margin: 0 20px;
            }         
        }
    }
    &-subtitle {
        display: inline-block;
        border-radius: 5px;
        padding: 7px 20px;
        margin-bottom: 35px;
        color: var(--it-common-white);
        background-color: var(--it-theme-1);
        border: 1px solid rgba(26, 182, 157, 0.3);
    }
    &-author {
        flex: 0 0 auto;
        & img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 15px;
        }
        &-info {       
            & span {
                display: block;
                font-size: 14px;
                color: var(--it-theme-2);
                &:last-child{
                    margin-top: 8px;
                    font-size: 18px;
                    color: rgba(255, 255, 255, 0.8);
                    font-family: var(--it-ff-spartan-medium);
                }
            }
        }
        &-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            @media #{$xs}{
                display: block;
            }
            @media #{$sm}{
                display: flex;
                justify-content: space-between;
            }
            & .border-style {
                padding-right: 30px;
                margin-right: 30px;
                border-right: 1px solid rgba(255, 255, 255, 0.3);
                @media #{$xs}{
                    padding-right: 0;
                    margin-right: 0;
                    border-right: none;
                }
                &.d-flex.align-items-center.mb-20{
                    @media #{$xs}{
                        flex-wrap: nowrap !important;
                        text-align: start;
                        justify-content: center;
                    }
                }
            }
        }
    }
    &-course-details-style {
        padding-top: 65px;
        padding-bottom: 40px;
        & .it-breadcrumb-thumb  {
            padding-right: 0;
            border-radius: 10px;
            display: inline-block;
            border: 5px solid var(--it-common-white);
        }
        &.team-details-style {
            padding-bottom: 92px;
        }
        & .it-breadcrumb-author-wrapper {
            justify-content: start;
        }
        & .it-breadcrumb-list-2 span {
            @media #{$lg,$md,$xs} {
                font-size: 14px;
            }
            &.dvdr {
                @media #{$lg,$md,$xs} {
                    margin: 0 10px;
                }
            }
        }
    }
    &-course-details-3-style {
        padding-top: 90px;
        padding-bottom: 290px;
        @media #{$xs}{
            padding-bottom: 75px;
        }
    }
    &-course-details-4-style {
        padding-top: 150px;
        padding-bottom: 155px;
        & .it-breadcrumb-list {
            @media #{$sm}{
                padding: 8px 10px;
            }
            & span {
                @media #{$sm}{
                    font-size: 13px;
                }
            }
        }    
    }
    &-event-details-style {
        padding-top: 110px;
        padding-bottom: 410px;
        & .it-breadcrumb-title {
            margin-bottom: 20px;
        }
    }
    &-style-2 {
        padding-top: 150px;
        padding-bottom: 155px;
        @media #{$xl,$lg,$md,$xs}{
            padding-top: 100px;
            padding-bottom: 130px;
        }
        & .it-breadcrumb-shape-3 {
            @media #{$xl,$lg,$md,$xs}{
                display: none;
            }
        }
        & .it-breadcrumb-title {
            @media #{$xs}{
                font-size: 30px;
            }
        }
        & .it-breadcrumb-list span {
            @media #{$xs}{
                font-size: 12px;
            }
            &.dvdr {
                & svg {
                    height: 12px;
                }
            }
        }
    }
    &-style-3 {
        @include background;
        padding-top: 255px;
        padding-bottom: 140px;
        background-color: transparent;
        & .it-hero-4-shape-1 {
            top: 31%;
            & img {
                animation: unset;
            }
        }
        & .it-hero-4-shape-3 {
            top: 34%;
            right: 7%;
            & img {
                animation: unset;
            }
        }        
    }
    &-style-4 {
        padding-top: 100px;
        padding-bottom: 120px;
        background-color: var(--it-theme-1);
        @media #{$xl,$lg,$md,$xs}{
            padding-top: 70px;
            padding-bottom: 90px;
        }
        & .it-breadcrumb-title {
            font-weight: 400;
            font-size: 60px;
            letter-spacing: 0.01em;
            text-transform: uppercase;
            color: var(--it-common-white);
            font-family: var(--it-ff-cinzel-decorative);
            @media #{$xl}{
                font-size: 45px;
            }
            @media #{$lg}{
                font-size: 40px;
            }
            @media #{$md}{
                font-size: 40px;
            }
            @media #{$xs}{
                font-size: 34px;
            }
        }
        & .it-breadcrumb-list {
            padding: 16px 30px;
            background-color: var(--it-theme-2);
            @media #{$xl,$lg,$md,$xs}{
                padding: 10px 30px;
            }
            & span {
                color: var(--it-common-black);
                &.dvdr{
                    color: var(--it-common-black);
                }
            }
            & i {
                color: var(--it-common-black);
            }
        }
        & .it-breadcrumb-bg {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: 30%;
            width: 44.5%;
            @media #{$xl,$lg}{
                width: 52%;
            }
            @media #{$xs}{
               position: static;
               width: 100%;
               margin-top: 50px;
            }
            @media #{$sm}{
               position: absolute;
               width: 40%;
               margin-top: 0;
            }
            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
    &-style-5 {
        padding-top: 165px;
        padding-bottom: 170px;
        @media #{$lg,$md,$xs}{
            padding: 100px 0;
        }
        &::after {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: rgba($color: #0d0d0d, $alpha: 0.8);
        }
        & .it-breadcrumb-title {
            font-weight: 500;
            font-size: 60px;
            letter-spacing: 0.01em;
            line-height: 1;
            margin-bottom: 36px;
            text-transform: uppercase;
            color: var(--it-common-white);
            font-family: var(--it-ff-oxanium);
            @media #{$xl}{
                font-size: 45px;
            }
            @media #{$lg}{
                font-size: 40px;
            }
            @media #{$md}{
                font-size: 40px;
            }
            @media #{$xs}{
                font-size: 34px;
            }
        }
        & .it-breadcrumb-list {
            padding: 16px 30px;
            border-radius: 0;
            background-color: var(--it-theme-5);
            @media #{$xl,$lg,$md,$xs}{
                padding: 10px 30px;
            }
            & span {
                font-family: var(--it-ff-body);
                color: var(--it-common-white);
                &.dvdr{
                    color: var(--it-common-white);
                }
            }
            & i {
                font-family: var(--it-ff-body);
                color: var(--it-common-white);
            }
        }
        & .it-breadcrumb-bg {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: 30%;
            width: 44.5%;
            @media #{$xl,$lg}{
                width: 52%;
            }
            @media #{$xs}{
               position: static;
               width: 100%;
               margin-top: 50px;
            }
            @media #{$sm}{
               position: absolute;
               width: 40%;
               margin-top: 0;
            }
            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
    &-ptb {
        @media #{$lg,$md,$xs}{
            padding: 100px 0;
        }
    }
    &-shape {
        &-1 {
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            @media #{$xl}{
                top: -7%;
                left: -5%;
            }
            @media #{$lg,$md,$xs}{
                display: none;
            }
        }
        &-2 {
            position: absolute;
            z-index: -1;
            top: -21%;
            right: 0;
            @media #{$lg,$md,$xs}{
                display: none;
            }
        }
        &-3 {
            position: absolute;
            z-index: -1;
            top: 4%;
            right: 15.5%;
            @media #{$xl}{
                right: 3.5%;
            }
            @media #{$lg,$md,$xs}{
                display: none;
            }
        }
        &-4 {
            position: absolute;
            bottom: 0;
            right: 41%;
            @media #{$md,$xs}{
                display: none;
            }
        }
    }
}