@use '../../utils' as *;

/*----------------------------------------*/
/*  7.21 portfolio css start
/*----------------------------------------*/

:root {
    --numOfSlides: 5;
    --slidingAT: 1.3s;
    --controlSize: 60px;
}

.#{$theme-prifix}-portfolio{
    &-sectitle{
        font-size: 145px;
        @media #{$sm,$xs}{
            font-size: 70px;
        }
        & .borders{
            width: 312px;
            height: 6px;
            background: var(--tp-common-black);
            display: inline-block;
            @media #{$sm,$xs}{
                width: 120px;
            }
        }
    }
    &-tag{
        & span{
            font-family: var(--tp-ff-heading);
            font-weight: 700;
            font-size: 16px;
            color: var(--tp-grey-1);
            border: 1px solid var(--tp-border-1);
            border-radius: 100px;
            display: inline-block;
            padding: 1px 17px;
            margin-right: 13px;
            transition: all .4s ease;
            @media #{$lg,$md,$sm,$xs}{
                margin-bottom: 5px;
            }
            &:hover{
                background: var(--tp-common-black);
                border: 1px solid var(--tp-common-black);
                color: var(--tp-common-white);
            }
        }
    }
    &-title{
        &-wrap{
            @media #{$md,$sm,$xs}{
                margin-bottom: 20px;
            }
        }
    }
    &-para{
        margin-bottom: -54px;
        z-index: 1;
        position: relative;
        @media #{$md,$sm,$xs}{
            margin-bottom: 40px;
        }
    }
    &-thumb{
        &.thumb-1{
            height: 604px;
            width: 100%;
            overflow: hidden;
            @media #{$sm,$xs}{
                height: 404px;
            }
        }
        &.thumb-2{
            height: 470px;
            width: 100%;
            overflow: hidden;
            @media #{$sm,$xs}{
                height: 300px;
            }
        }
    }
    &-item{
        @media #{$lg,$md,$sm,$xs} {
            margin-left: 0;
            margin-right: 0;
        }
        @media #{$md,$sm,$xs}{
            margin-top: 0;
        }
    }
    &-2{
        &-para{
            @media #{$md,$sm,$xs}{
                padding-top: 30px;
            }
            & .tp-portfolio-tag{
                & span{
                    font-weight: 500;
                    font-family: var(--tp-ff-p);
                }
            }
        }
        &-content{
            & .tp-portfolio-tag{
                & span{
                    margin-right: 0;
                    font-weight: 500;
                    font-family: var(--tp-ff-p);
                }
            }
        }
        &-shape{
            position: absolute;
            bottom: -345px;
            right: 0;
            z-index: -1;
            width: 20%;
        }
        &-item{
            &:hover{
                & .tp-portfolio-2-thumb{
                    & img{
                        transform: scale(1.1);
                    }
                }
            }
        }
        &-thumb{
            overflow: hidden;
            & img{
                transition: all .4s ease;
            }
        }
        &-slider{
            &-active{
                @media #{$md,$sm,$xs}{
                    width: 300px!important;
                }
            }
        }
    }
    &-wd{
        &-title{
            font-size: 145px;
            @media #{$md}{
                font-size: 100px;
            }
            @media #{$sm,$xs}{
                font-size: 70px;
            }
        }
        &-item{
            & img{
                border-radius: 20px;
                @media #{$sm,$xs}{
                    height: 350px;
                    object-fit: cover;
                }
            }
        }
        &-thumb{
            position: relative;
            &::after{
                position: absolute;
                content: '';
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 20px;
                background: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgb(20 20 20 / 86%) 100%);
            }
        }
        &-category{
            position: absolute;
            top: 45px;
            left: 50px;
            z-index: 2;
            @media #{$xs}{
                top: 15px;
                left: 15px;
            }
            &.portfolio-meta{
                left: auto;
                right: 50px;
                @media #{$xs}{
                    right: 15px;
                }
            }
            & span{
                font-weight: 500;
                font-size: 14px;
                line-height: 1;
                border-radius: 20px;
                padding: 7px 12px;
                transition: 0.3s;
                letter-spacing: .4px;
                display: inline-block;
                text-transform: uppercase;
                color: var(--tp-common-white);
                border: 1px solid rgba(255, 255, 255, 0.2);
                font-family: var(--tp-ff-heading);
                @media #{$xs}{
                    font-size: 12px;
                    padding: 7px 7px;
                }
                &:hover{
                    color: var(--tp-common-black);
                    border-color: var(--tp-common-white);
                    background-color: var(--tp-common-white);
                }
            }
        }
        &-content{
            position: absolute;
            bottom: 50px;
            left: 0;
            right: 0;
            display: inline-block;
            text-align: center;
            @media #{$xs}{
                padding: 10px 20px 20px 20px;
            }
            @media #{$xs}{
                bottom: 5px;
            }
        }
        &-area{
            @media #{$xl}{
                padding-bottom: 120px;
            }
            @media #{$lg,$md}{
                padding-bottom: 110px;
            }
            @media #{$xs}{
                padding-bottom: 0px;
            }
        }
        &-tag{
            @media #{$md,$sm,$xs}{
                margin-left: 0;
            }
            & svg{
                @media #{$sm,$xs}{
                    display: none;
                }
            }
        }
    }
    &-sa{
        &-title{
            font-size: 145px;
            
            @media #{$lg} {
                font-size: 110px;
            }
        
            @media #{$md} {
                font-size: 90px;
            }
        
            @media #{$sm,$xs} {
                font-size: 85px;
                padding: 17px 0;
            }
            &-wrap{
                @media #{$md,$sm,$xs}{
                    & > span{
                        margin-left: 0;
                        margin-bottom: 10px;
                        margin-right: 0;
                    }
                }
            }
        }
        &-shape{
            position: absolute;
            top: 0;
            right: 0;
            z-index: -1;
            width: 9%;
        }
        &-item{
            &-tag{
                padding: 2px 16px;
                border-radius: 30px;
            }
        }
    }
    &-pp{
        &-border{
            margin-right: 110px;
            @media #{$xl,$lg,$md,$sm,$xs}{
                margin-right: 0;
            }
            & svg{
                width: auto;
            }
        }
        &-content{
            & .positions{
                background: var(--tp-common-white-2);
                display: inline-block;
                border-radius: 100px;
            }
        }
    }
    &-masonary{
        &-spacing{
            padding-top: 210px;
            @media #{$md,$sm,$xs}{
                padding-top: 140px;
            }
        }
    }
    &-showcase{
        &-spacing{
            padding-top: 180px;
            @media #{$xl,$lg}{
                padding-top: 130px;
            }
            @media #{$md,$sm,$xs}{
                padding-top: 120px;
            }
        }
        &-nav{
            display: flex;
            justify-content: space-between;
            & span{
                font-family: var(--tp-ff-heading);
                font-weight: 500;
                font-size: 15px;
                text-transform: uppercase;
                color: var(--tp-common-black);
                display: flex;
                align-items: center;
                border: 1px solid var(--tp-border-1);
                border-radius: 100px;
                padding: 6px 17px;
                transition: all .4s ease;
                &:hover{
                    background: var(--tp-common-black);
                    color: var(--tp-common-white);
                    border-color: var(--tp-common-black);
                }
            }
        }
        &-pagenation{
            padding-top: 50px;
        }
        &-slide{
            &-active{
                & .tp-portfolio-2-content{
                    opacity: 0;
                    visibility: hidden;
                    @media #{$lg,$md,$sm,$xs}{
                        padding: 0 12px;
                    }
                }
                & .swiper-slide.swiper-slide-active {
                    & .tp-portfolio-2-content{
                        -webkit-animation: tdfadeUp 1s 0.3s forwards;
                        animation: tdfadeUp 1s 0.3s forwards;
                        animation-fill-mode: both;
                        opacity: 1;
                        visibility: visible;
                    }
                }
            }
        }
        &-full{
            &-subtitle{
                font-weight: 400;
                font-size: 46px;
                line-height: 0.87;
                margin-bottom: 40px;
                display: inline-block;
                letter-spacing: 0.01em;
                color: var(--tp-common-white-2);
                font-family: var(--tp-ff-morganite-semibold);
                display: inline-block;
            }
            &-bg{
                padding: 207px 30px 220px 30px;
                @media #{$lg,$md,$sm,$xs}{
                    padding: 160px 30px 150px 30px;
                }
            }
        }
    }
    &-outcome{
        &-bost{
            display: flex;
            gap: 22px;
            flex-wrap: wrap;
            & span{
                border: 1px solid var(--tp-border-1);
                border-radius: 100px;
                display: inline-block;
                padding: 22px 40px 17px 40px;
                width: 312px;
                margin-bottom: 10px;
                @media #{$xl,$lg,$md,$sm,$xs} {
                    width: 300px;
                }
            }
        }
        &-content{
            @media #{$xl,$lg,$md,$sm,$xs} {
                margin-right: 0;
            }
        }
        &-title{
            @media #{$xs} {
                margin-bottom: 20px;
            }
        }
    }
    &-navigation{
        &-btn{
            @media #{$md,$sm,$xs} {
                justify-content: center;
            }
            & img{
                flex: 0 0 auto;
                width: 100px;
                @media #{$xs} {
                    width: 70px;
                    margin-right: 15px;
                }
            }
        }
        &-wrap{
            border: 1px solid var(--tp-border-1);
            padding: 35px 40px 10px 40px;
            @media #{$xs} {
                padding: 25px 20px 10px 20px;
            }
        }
        &-grid{
            & a{
                color: var(--tp-grey-1);
                opacity: 0.3;
                &:hover{
                    color: var(--tp-common-black);
                    opacity: 1;
                }
            }
        }
        &-title{
            @media #{$lg} {
                & br{
                    display: none;
                }
            }
        }
    }
    &-cst{
        &-subtitle{
            &-wrap{
                border-bottom: 1px solid #E1E5E4;
            }
        }
        &-tag{
            border-radius: 100px;
            padding: 1px 20px;
        }
        &-btn{
            border-radius: 50px;
            border: 1px solid rgba(16, 48, 42, 0.1);
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 0 0 auto;
        }
        &-item{
            border-bottom: 1px solid #E1E5E4;
            position: relative;
            margin-bottom: 32px;
            &::before{
                position: absolute;
                content: "";
                width: 0;
                height: 1px;
                background: var(--tp-common-black-1);
                bottom: 0;
                left: auto;
                right: 0;
                transition: all .4s ease;
            }
            &:hover{
                &::before{
                    width: 100%;
                    left: 0;
                    right: auto;
                }
                & .tp-portfolio-cst-btn{
                    background: var(--tp-common-green-2);
                    border-color: var(--tp-common-green-2);
                    transform: rotate(-45deg);
                }
            }
            &.active{
                &::before{
                    width: 100%;
                    left: 0;
                    right: auto;
                }
                & .tp-portfolio-cst-btn{
                    background: var(--tp-common-green-2);
                    border-color: var(--tp-common-green-2);
                    transform: rotate(-45deg);
                }
            }
        }
        &-img{
            &-wrapper{
                @media #{$md,$sm}{
                    height: 440px;
                }
                @media #{$xs}{
                    height: 300px;
                }
                & .hover-image{
                    display: inline-block;
                    @media #{$md,$sm,$xs}{
                        height: 100%;
                    }
                    & .thumb{
                        object-fit: cover;
                        opacity: 0;
                        position: absolute;
                        top: 0;
                        left: -150px;
                        visibility: hidden;
                        transition: all .6s ease;
                        border-radius: 20px;
                    }
                    &.active{
                        & .thumb{
                            opacity: 1;
                            left: 0;
                            visibility: visible;
                        }
                    }
                }
            }
        }
        &-content{
            @media #{$md,$sm,$xs}{
                height: 100%;
            }
            & p{
                @media #{$xl,$lg,$md,$sm,$xs}{
                    & br{
                        display: none;
                    }
                }
            }
        }
        &-list{
            &-wrap{
                @media #{$md,$sm,$xs}{
                    margin-left: 0;
                }
            }
        }
    }
    &-details{
        &-shedule{
            background: var(--tp-common-white);
            border: 1px solid var(--tp-border-1);
            padding: 43px 40px 50px 40px;
            @media #{$xs} {
                padding: 33px 20px 40px 20px;
            }
            & ul{
                margin-bottom: 47px;
                & li{
                    font-family: var(--tp-ff-heading);
                    font-weight: 500;
                    font-size: 18px;
                    color: var(--tp-common-black);
                    list-style: none;
                    padding-bottom: 15px;
                    display: flex;
                    & span{
                        width: 180px;
                        flex: 0 0 auto;
                        display: inline-block;
                        @media #{$xs} {
                            width: 130px;
                        }
                    }
                }
            }
            &-btn{
                background: var(--tp-common-white-2);
                padding: 15px 20px;
                display: block;
                text-align: center;
                &:hover{
                    background: var(--tp-common-black);
                    color: var(--tp-common-white);
                }
            }
            &-spacing{
                margin-top: -247px;
                position: relative;
                z-index: 2;
                @media #{$xl,$lg,$md,$sm,$xs} {
                    margin-top: 50px;
                }
            }
        }
        &-line{
            line-height: 1;
            margin-top: -10px;
            & svg{
                width: 100%;
            }
        }
        &-content{
            @media #{$xl} {
                margin-right: 50px;
            }
            @media #{$lg,$md,$sm,$xs} {
                margin-right: 0px;
            }
        }
        &-2{
            &-cetagory{
                & ul{
                    & li{
                        list-style: none;
                        display: flex;
                        &:not(:last-child){
                            padding-bottom: 15px;
                            margin-bottom: 15px;
                            border-bottom: 1px solid var(--tp-border-1);
                        }
                        & span{
                            font-family: var(--tp-ff-dm);
                            font-weight: 500;
                            font-size: 18px;
                            color: var(--tp-common-black-5);
                            &.spacing{
                                width: 240px;
                                display: inline-block;
                                @media #{$lg,$md,$sm,$xs}{
                                    width: 160px;
                                }
                            }
                        }
                    }
                }
                &-wrap{
                    & p{
                        @media #{$lg,$md,$sm,$xs}{
                            margin-right: 0;
                        }
                    }
                }
            }
            &-thumb{
                @media #{$lg,$md,$sm,$xs}{
                    margin-left: 0;
                    margin-right: 0;
                }
                & img{
                    border-radius: 16px;
                }
            }
            &-challenge {
                margin-right: 0;
            }
            &-border{
                border-bottom: 1px solid var(--tp-border-1);
            }
            &-branding{
                margin-right: 140px;
                @media #{$lg,$md,$sm,$xs}{
                    margin-left: 0;
                    margin-right: 0;
                }
                & ul{
                    & li{
                        & b{
                            font-family: var(--tp-ff-dm);
                        }
                        & p{
                            font-family: var(--tp-ff-dm);
                            font-size: 18px;
                            line-height: 144%;
                            letter-spacing: -0.02em;
                            color: var(--tp-grey-1);
                        }
                    }
                }
            }
            &-tag{
                display: flex;
                gap: 7px;
                flex-wrap: wrap;
                & a{
                    font-family: var(--tp-ff-dm);
                    font-weight: 500;
                    font-size: 16px;
                    text-transform: uppercase;
                    color: var(--tp-common-black);
                    border-radius: 50px;
                    padding: 8px 13px;
                    background: #f6f6f9;
                    display: inline-block;
                    line-height: 1;
                    &:hover{
                        background: var(--tp-common-black-1);
                        color: var(--tp-common-white);
                    }
                }
                &-border{
                    border-bottom: 1px solid var(--tp-border-1);
                }
            }
            &-social{
                & a{
                    margin-right: 0;
                }
            }
            &-navigation{
                padding: 0;
                border: none;
                border-bottom: 1px solid var(--tp-border-1);
                & .tp-portfolio-navigation-btn img {
                    border-radius: 16px;
                    width: auto;
                }
            }
            &-subtitle{
                border: none;
            }
            &-overview{
                &-wrap{
                    @media #{$lg,$md,$sm,$xs}{
                        margin-left: 0;
                        margin-right: 0;
                    }
                }
            } 
        }
    }
    &-it{
        &-thumb{
            & .service-bg{
                position: relative;
                &::after{
                    position: absolute;
                    content: '';
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: var(--tp-common-black-1);
                    opacity: 0.6;
                } 
            }
        }
        &-tag{
            & a{
                font-family: var(--tp-ff-inter);
                font-weight: 500;
                font-size: 16px;
                text-transform: uppercase;
                color: var(--tp-grey-5);
                border: 1px solid rgba(243, 241, 242, 0.1);
                display: inline-block;
                padding: 0px 15px;
                border-radius: 100px;
                margin-right: 5px;
                @media #{$xl,$lg,$md,$sm,$xs}{
                    margin-bottom: 5px;
                }
                &:hover{
                    background: var(--tp-common-green-2);
                    color: var(--tp-common-black-1);
                }
            }
        }
        &-inner{
            opacity: 0;
            visibility: hidden;
            @include transition(all .4s ease);
        }
        &-content{
            transform: translateY(180px);
            transition: all 0.4s ease;
            @media #{$xl,$lg,$md,$sm,$xs}{
                transform: translateY(100px);
            }
            &-inner{
                @media #{$xl,$lg,$md,$sm,$xs}{
                    margin-bottom: 40px;
                }
            }
        }
        &-wrap{
            padding: 594px 50px 50px 50px;
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            transition: all .5s ease;
            overflow: hidden;
            @media #{$x3l,$xxl,$xl,$lg,$md,$sm,$xs}{
                padding: 394px 20px 50px 20px;
                height: 100%;
            }
            @media #{$lg,$md,$sm,$xs}{
                border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            }
            @media #{$md}{
                padding: 294px 20px 50px 20px;
            }
            @media #{$sm,$xs}{
                padding: 194px 20px 50px 20px;
                border-right: 0;
            }
            &:hover{
                backdrop-filter: blur(8px);
                background: rgba(16, 48, 42, 0.2);
                & .tp-portfolio-it-content{
                    transform: translateY(0);
                }
            }
        }
    }
    &-pb{
        &-tag{
            & a{
                border: 1px solid rgba(243, 241, 242, 0.1);
                border-radius: 100px;
                padding: 0px 15px;
                &:hover{
                    background: var(--tp-theme-secondary);
                    color: var(--tp-common-white);
                }
            }
        }
        &-content{
            position: absolute;
            bottom: -15px;
            left: 0;
            padding: 32px;
            opacity: 0;
            visibility: hidden;
            transition: all .4s ease;
            z-index: 2;
            @media #{$xl}{
                padding: 15px;
            }
        }
        &-thumb{
            & img{
                transition: all .4s ease;
            }
        }
        &-item{
            &:hover{
                &::before{
                    opacity: 1;
                    visibility: visible;
                }
                & .tp-portfolio-pb-content{
                    visibility: visible;
                    opacity: 1;
                    bottom: 0;
                }
                & .tp-portfolio-pb-thumb{
                    & img{
                        transform: scale(1.1);
                    }
                }
            }
            &::before{
                position: absolute;
                content: "";
                background: linear-gradient(180deg, rgba(16, 48, 42, 0) 31%, #111112 100%);
                width: 100%;
                height: 100%;
                bottom: 0;
                left: 0;
                opacity: 0;
                visibility: hidden;
                transition: all .4s ease;
                z-index: 1;
            }
        }
    }
    &-ai{
        &-title{
            @media #{$xxl,$xl,$lg,$md,$sm,$xs}{
                margin-left: 0;
            }
        }
    }
    &-md{
        &-tag{
            border: 1px solid rgba(17, 17, 18, 0.1);
            padding: 3px 17px;
        }
        &-wrapper{
            margin-left: -15px;
            margin-right: -15px;
            @media #{$sm,$xs}{
                margin-left: 0;
                margin-right: 0;
            }
        }
        &-inner{
            &-wrap{
                width: 100%;
                display: flex;
                grid-area: list;
                box-sizing: border-box;
                @media #{$sm,$xs}{
                    flex-wrap: wrap;
                }
            }
        }
        &-item{
            width: calc(4 * calc(1/10 * 100%));
            height: 720px;
            display: block;
            position: relative !important;
            left:0!important;
            top:0!important;
            margin:0px 15px;
            transition:width 0.6s cubic-bezier(0.38, 0.005, 0.215, 1);
            @media #{$xl,$lg,$md}{
                height: 620px;
            }
            @media #{$sm,$xs}{
                width: 100%;
                height: auto;
                margin-bottom: 30px;
            }
            &:hover{
                width:calc(6.6 * calc(1/10 * 100%));
                @media #{$lg,$md}{
                    width: 40%;
                }
                @media #{$sm,$xs}{
                    width: 100%;
                }
            }
        }
        &-thumb{
            height: 100%;
            width: 100%;
            margin-bottom: 30px;
            @media #{$sm,$xs}{
                height: auto;
            }
            & img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        &-content{
            padding-left: 32px;
            @media #{$xs}{
                padding-left: 0;
            }
        }
        &-border{
            border-bottom: 1px solid rgba(17, 17, 18, 0.1);
            padding-bottom: 160px;
            @media #{$sm,$xs}{
                padding-bottom: 100px;
            }
        }
        &-title{
            @media #{$xxl}{
                font-size: 30px;
            }
            @media #{$xl,$lg,$md,$sm,$xs}{
                font-size: 25px;
            }
        }
    }
    &-vp{
        &-bigtitle{
            font-size: 220px;
            font-weight: 800;
            line-height: 73%;
            @media #{$md,$sm,$xs}{
                font-size: 180px;
            }
            @media #{$sm}{
               font-size: 130px; 
            }
            @media #{$xs}{
               font-size: 80px; 
            }
        }
        &-para{
            @media #{$md,$sm,$xs}{
                & br{
                    display: none;
                }
            }
        }
        &-post{
            &-thumbnail{
                padding-top: 720px;
                border-radius: 32px;
                position: relative;
                overflow: hidden;
                @media #{$xl}{
                    padding-top: 600px;
                }
                @media #{$lg,$md,$sm,$xs}{
                    padding-top: 400px;
                    margin-bottom: 30px;
                }
                & img{
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                    transform: translate3d(-6.66%, 0, 0) scale(1.2);
                    -webkit-transform: translate3d(-6.66%, 0, 0) scale(1.2);
                    transition: opacity 0.35s, transform 0.45s, filter 0.35s;
                }
                & .video-container {
                    overflow: hidden;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 1;
                    iframe {
                        width: 300%;
                        margin-left: -100%;
                        min-width: 100%;
                        min-height: 100%;
                        object-fit: cover;
                        border: none;
                        max-width: none;
                        transform: translateY(-50%);
                        position: absolute;
                        top: 50%;
                        left: 0;
                        background: var(--tp-common-black-5);
                    }
                }
                & .vp-title{
                    display: none;
                }
                & .vp-sidedock{
                    & button{
                        display: none;
                    }
                }
            }
        }
        &-content{
            position: absolute;
            bottom: 32px;
            left: 32px;
            z-index: 3;
            @media #{$xs}{
                bottom: 22px;
                left: 22px; 
            }
        }
        &-title{
            & span{
                background: var(--tp-common-black-5);
                display: inline-block;
            }
        }
        &-text{
            &-top{
                padding-left: 32px;
                padding-right: 42px;
                padding-top: 10px;
                border-radius: 16px 16px 0 0;
                position: relative;
                &::before{
                    content: "";
                    position: absolute;
                    bottom: 0;
                    right: -22px;
                    height: 41px;
                    width: 23px;
                    z-index: -1;
                    background-color: transparent;
                    border-bottom-left-radius: 20px;
                    box-shadow: 0px 18px 0 0 #111112;
                }
            }
            &-middle{
                padding: 0 42px 14px 32px;
                border-radius: 0 16px 16px 16px;
            }
        }
    }
    &-slicer{
        &-category {
            font-size: 40px;
            font-family: var(--tp-ff-inter);
            margin-bottom: 36px;
            display: inline-block;
            color: var(--tp-common-white);
            @media #{$lg}{
                font-size: 30px;
            }
            @media #{$sm, $md}{
                font-size: 25px;
                margin-bottom: 20px;
            }
            @media #{$xs}{
                font-size: 20px;
                margin-bottom: 15px;
            }
        }
        &-title {
            font-family: var(--tp-ff-heading);
            color: var(--tp-common-white);
            font-size: 150px;
            line-height: 0.8;
            font-weight: 600;

            @media #{$xl,$md}{
                font-size: 130px;
            }
            @media #{$lg}{
                font-size: 100px;
            }
            @media #{$sm}{
                font-size: 80px;
            }
            @media #{$xs}{
                font-size: 50px;
            }
        }
        &-area{
            &-inner{
                & #app {
                    height: 100vh;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
        &-slider{
            position: relative;
            z-index: 1;
            & .nav-icon {
                font-size: 16px;
                text-transform: uppercase;
                display: flex;
                gap: 20px;
                color: var(--tp-common-white);
                line-height: 1;
                position: relative;
                z-index: 2;
            }
            & .slider-nav {
                display: flex;
                height: 100px;
                justify-content: space-between;
                width: 100%;
                align-items: center;
                @media #{$xxl} {
                    height: 80px;

                }
            }
            & .slider-nav-box {
                position: absolute;
                bottom: 0;
                width: 100%;
            }
            & .slide-content {
                position: absolute;
                width: 100%;
                bottom: 20%;
                opacity: 0;
                transition: all 0.5s;
            }
            & .swiper-slide-active {
                & .slide-content {
                    opacity: 1;
                    visibility: visible;
                }
            }
            & .swiper {
                width: 100%;
                height: 100%;
                --swiper-theme-color: #fff;
            }
            & .swiper-slicer-image {
                max-width: unset;
            }
        }
        &-pagination {
            position: absolute;
            top: auto!important;
            bottom: 0;
            transform: none;
            height: 50px;
            left: 0!important;
            right: 0!important;
            display: inline-flex;
            gap: 20px;
            margin-inline: auto;
            align-items: center;
            justify-content: center;
            z-index: 1;
            @media #{$xl} {
                gap: 10px;
            }
            @media #{$sm,$xs} {
                display: none;
            }
            & .swiper-pagination-bullet {
                width: 80px;
                height: 5px;
                display: inline-block;
                margin: 0 5px;
                overflow: hidden;
                transition: 0.4s;
                position: relative;
                border-radius: 5px;
                background: rgba(255, 255, 255, 0.30);
                @media #{$lg} {
                    width: 50px;
                }
                & .swiper-pagination-bullet-active {
                    width: 80px;
                    @media #{$lg} {
                        width: 40px;
                    }
                }
            }
            .swiper-pagination-bullet::before {
                content: "";
                width: 80px;
                height: 100%;
                position: absolute;
                transition: 0.6s;
                z-index: 9;
                left: 0;
                border-radius: 5px;
                background: rgba(255, 255, 255, 0.30);
            }

            .swiper-pagination-bullet::after {
                content: "";
                width: 0;
                height: 100%;
                position: absolute;
                transition: 0.6s;
                z-index: 8;
                left: 0;
                background-color: white;
            }

            .swiper-pagination-bullet-active::after {
                opacity: 1;
                width: 100%;
            }
        }
    }
    &-parallax{
        &-slider{
            &-wrapper{
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                & .parallax-slider{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 4200px;
                    height: 100%;
                    @media #{$xs}{
                        width: 2600px;
                    }
                }
                & .parallax-slider-inner{
                    position: absolute;
                    top: 0;
                    height: 100%;
                    width: 100%;
                    display: flex;
                    gap: 5px;
                    left: 0px;
                    right: 0;
                }
                & .parallax-item{
                    position: relative;
                    width: 600px;
                    height: 100%;
                    overflow: hidden;
                    @media #{$xs}{
                        width: 350px;
                    }
                    &:hover{
                        & .parallax-content{
                            bottom: 0;
                            opacity: 1;
                            visibility: visible;
                        }  
                        & .parallax-img{
                            &::after{
                                opacity: 1;
                                height: 100%;
                                visibility: visible;
                            }
                        }
                    }
                }
                & .parallax-content{
                    position: absolute;
                    bottom: -100px;
                    left: 0;
                    z-index: 55;
                    overflow: hidden;
                    opacity: 0;
                    visibility: hidden;
                    margin: 40px 40px 30px 35px;
                    transition: .4s;
                    & span{
                        font-size: 24px;
                        line-height: 1;
                        display: block;
                        font-size: 20px;
                        margin-bottom: 10px;
                        color: var(--tp-common-white);
                        font-family: var(--tp-ff-inter);
                        text-transform: capitalize;
                    }
                    & h4{
                        font-size: 50px;
                        line-height: 1;
                        padding-bottom: 7px;
                        display: inline-block;
                        color: var(--tp-common-white);
                        font-family: var(--tp-ff-heading);

                    }
                }
                & .parallax-img {
                    position: absolute;
                    height: 100%;
                    width: 840px;
                    background-size: cover;
                    background-position: center;
                    margin-left: -100px;
                    &::after{
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        content: '';
                        opacity: 0;
                        visibility: hidden;
                        transition: .4s;
                        background-color: rgba(0, 0, 0, 0.3);
                    }
                }
            }
        }
    }
    &-horizontal{
        &-slider{
            background-color: var(--tp-common-white);
            z-index: 2;
            width: 100%;
            position: relative;
            flex-direction: column;
            height: 100vh;
            font-size: 16px;
            display: flex;
            clip-path: none !important;
            & .slider-inner {
                background: var(--tp-common-black);
                height: 100vh;
                position: relative;
            }
            & .swiper-slide {
                position: relative;
                display: flex;
                justify-content: center;
                text-align: left;
                flex-direction: column;
                overflow: hidden;
            }
        }
        &-content{
            position: absolute;
            top: 26%;
            left: 78px;
            z-index: 1;
            @media #{$md,$sm,$xs}{
                width: 100%;
                text-align: center;
                left: 0;
            }
        }
        &-inner {
            object-fit: cover;
            width: 100%;
            height: 100vh;
            &::after{
                content: "";
                position: absolute;
                width: 101%;
                height: 100%;
                top: 0;
                left: -1px;
                background-color: transparent;
                background-image: radial-gradient(at center right, #FFFFFF00 50%, #00000096 100%);
            }
        }
        &-tag {
            color: var(--tp-common-white);
            font-weight: 400;
            font-size: 24px;
            margin-bottom: 10px;
            margin-top: 0px;
            letter-spacing: 1.2px;
            @media #{$sm,$xs}{
                margin-bottom: 0;
            }
        }
        &-title {
            color: var(--tp-common-white);
            font-size: 8vw;
            font-family: var(--tp-ff-inter);
            font-weight: 700;
            line-height: 1.1;
            text-transform: uppercase;
            margin-bottom: 10px;
            margin-left: -12px;
            text-decoration: none;
            @media #{$sm,$xs}{
                font-size: 64px;
            }
        }
        &-disc{
          	font-size: 18px;
            width: 100%;
            margin: 0px 0px 20px 0px;
            font-weight: 400;
            line-height: 32px;
            color: #FFFFFFB0;
            font-family: var(--tp-ff-inter);
            @media #{$sm,$xs}{
                margin: 20px auto 20px auto;
                font-size: 16px;
                width:95%;
            }
            & br{
                @media #{$md,$sm,$xs}{
                    display: none;
                }
            }  
        }
        &-btn{
            color: var(--tp-common-white);
            margin-left: 18px;
            font-size: 1.4em;
            transition: margin-left 300ms cubic-bezier(0.49, 0, 0.01, 1);
            font-weight: 400;
            display: inline-flex;
            position: relative;
            white-space: nowrap;
            text-decoration: none;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            user-select: none;
            outline: none;
            outline-color: transparent;
            box-shadow: none;
            will-change: transform;
            backface-visibility: hidden;
            &:hover{
                margin-left: 38px !important;
                & .tp-portfolio-horizontal-btn-label{
                    transform: translateX(18px);
                }
                & .tp-portfolio-horizontal-btn-text{
                    color: var(--tp-common-white);
                }
                & .tp-portfolio-horizontal-btn-border{
                    transform: scale(0, 1);
                }
                & .circle {
                    clip-path: circle(50% at 50% 50%);
                }
                & .circle-fill {
                    transform: scale(1, 1);
                }
                & .circle-icon {
                    transform: translate(0%, 0%);
                    opacity: 1;
                }
            }
            &-label {
                margin-left: 4pt;
                transition: transform 500ms cubic-bezier(0.49, 0, 0.01, 1);
            }
            &-border {
                position: absolute;
                left: 4pt;
                right: 0;
                bottom: 0;
                height: 1px;
                background: var(--tp-common-white);
                transform-origin: right;
                transition: transform 500ms cubic-bezier(0.49, 0, 0.01, 1);
            }
            & .circle {
                position: absolute;
                right: calc(100% - 10px);
                top: 0;
                bottom: 0;
                margin: auto;
                width: 45px;
                height: 45px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                clip-path: circle(25% at 50% 50%);
                transition: clip-path 500ms cubic-bezier(0.49, 0, 0.01, 1);
            }
            & .circle-fill {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                border-radius: 100%;
                background-color: var(--tp-common-white);
                will-change: transform;
                transform: scale(0);
                z-index: 1;
                transition: transform 500ms cubic-bezier(0.49, 0, 0.01, 1), background-color 500ms cubic-bezier(0.49, 0, 0.01, 1);
            }
            & .circle-icon {
                transform: translate(-100%, 0%);
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                z-index: 2;
                transition: all 500ms cubic-bezier(0.49, 0, 0.01, 1);
            }
            & .icon-arrow{
                width: 20px;
                height: 20px;
                stroke: none;
                fill: var(--tp-common-black);
            }
            & .circle-outline {
                fill: transparent;
                width: 10px;
                stroke: var(--tp-common-white);
            }
        }
        &-button{
            &-wrapper{
                width: 100%;
                & div{
                    bottom: 5%;
                    top: unset;
                    transform: scale(1);
                    transition: all 0.4s;
                    background-color: #FFFFFF00;
                    backdrop-filter: blur(20px);
                    height: 85px;
                    width: 85px;
                    line-height: 85px;
                    border-radius: 50%;
                    transition: all 0.4s;
                    position: absolute;
                    z-index: 2;
                    font-size: 30px;
                    color: var(--tp-common-white);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    @media #{$md,$sm,$xs}{
                        height: 50px;
                        width: 50px;
                        line-height: 50px;
                    }
                    &:hover{
                        background: #FFFFFF0D;
                    }
                }
            }
            &-next{
                right: 50px;
            }
            &-prev{
                left: 50px;
            }
        }
        &-pagination{
            &-area{
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: unset;
                right: unset;
                bottom: 80px;
                left: 50% !important;
                transform: translateX(-50%);
                width: 500px;
                z-index: 1;
                @media #{$md,$sm,$xs}{
                    width: 200px !important;
                }
                @media #{$sm,$xs}{
                    display: none;
                }
                & .slide-range {
                    font-size: 16px;
                    font-weight: 500;
                    margin: 0 15px;
                    color: var(--tp-common-white);
                    line-height: 0;
                    position: absolute;
                    font-size: 20px;
                    &.one{
                        left: -50px;
                    }
                    &.three{
                        right: -50px;
                    }
                }
                & .swiper-pagination {
                    bottom: 0 !important;
                    width: 500px !important;
                    @media #{$md,$sm,$xs}{
                        bottom: 0 !important;
                        width: 200px !important;
                    }
                    & .swiper-pagination-progressbar-fill {
                        background: var(--tp-common-white);
                    }
                }
            }
        }
    }
    &-swipe{
        &-gallery{
            & .slide {
                height: 100%;
                width: 100%;
                top: 0;
                position: fixed;
                visibility: hidden;
                &__outer,
                &__inner {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                }
                &__content {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    top: 0;
                    padding-top: 150px;
                }
                &__container {
                    position: relative;
                    max-width: 1800px;
                    width: 100vw;
                    margin: 0 auto;
                    height: 95vh;
                    margin-bottom: 10vh;
                    display: grid;
                    grid-template-columns: repeat(10, 1fr);
                    grid-template-rows: repeat(10, 1fr);
                    grid-column-gap: 0px;
                    grid-row-gap: 0px;
                    padding: 0 1rem;
                }
                &__heading {
                    display: block;
                    text-align: left;
                    font-size: clamp(5rem, 15vw, 15rem);
                    font-weight: 700;
                    text-transform: uppercase;
                    margin: 0;
                    padding: 0;
                    color: var(--tp-common-white);
                    z-index: 1;
                    mix-blend-mode: difference;
                    grid-area: 2 / 2 / 3 / 10;
                    align-self: end;  
                }
                &__img-cont {
                    margin-top: 4rem;
                    grid-area: 2 / 1 / 7 / 8;
                    overflow: hidden;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                &:nth-of-type(1) {
                    visibility: visible;
                    .slide__content {
                        background-color: #842418;
                    }
                }
                &:nth-of-type(2) {
                    & .slide__content {
                        background-color: #72241a;
                    }
                }
                &:nth-of-type(3) {
                    &  .slide__content {
                        background-color: #4e0101;
                    }
                }
                &:nth-of-type(4) {
                    &  .slide__content {
                        background-color: #200800;
                    }
                }
            }
            & .overlay {
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 2;
                @media #{$xs}{
                    top: 90px;
                }
                &__content {
                    max-width: 1800px;
                    width: 100vw;
                    margin: 0 auto;
                    padding: 0 1rem;
                    height: 90vh;
                    margin-bottom: 10vh;
                    display: grid;
                    grid-template-columns: repeat(10, 1fr);
                    grid-template-rows: repeat(10, 1fr);
                    grid-column-gap: 0px;
                    grid-row-gap: 0px;
                }
    
                &__img-cont {
                    position: relative;
                    overflow: hidden;
                    margin: 0;
                    grid-area: 4 / 3 / 9 / 11;
                    img {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: 50% 50%;
                    }
                }
    
                &__count {
                    grid-area: 3 / 10 / 4 / 10;
                    font-size: clamp(3rem, 4vw, 15rem);
                    margin: 0;
                    padding: 0;
                    text-align: right;
                    color: var(--tp-common-white);
                    opacity: .3;
                }
            }
            @media screen and (min-width: 900px) {
                .overlay__content,
                .slide__container {
                    margin-top: 15vh;
                    height: 87vh;
                }
                .overlay__img-cont {
                    grid-area: 5 / 4 / 10 / 11;
                }
                .overlay__count {
                    grid-area: 3 / 10 / 4 / 11;
                }
                .slide__img-cont {
                    margin-top: 0;
                    grid-area: 3 / 2 / 8 / 7;
                }
                .slide__heading {
                    grid-area: 1 / 1 / 4 / 4;
                }
            }
        }
    }
    &-revealing{
        &-slider{
            position: relative;
            height: 100vh;
            overflow: hidden;
            &-social{
                position: absolute;
                bottom: 75px;
                z-index: 99;
                left: 0;
                right: 0;
                margin: 0 auto;
                text-align: center;
                & a{
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 1;
                    margin: 0 12px;
                    color: var(--tp-common-white);
                }
            }
            &-slides {
                z-index: 1;
                position: relative;
                height: 100%;
            }
            &-control {
                z-index: 2;
                position: absolute;
                top: 50%;
                left: 5%;
                width: var(--controlSize);
                height: var(--controlSize);
                margin-left: calc(var(--controlSize) / -2);
                margin-top: calc(var(--controlSize) / -2);
                border-radius: 50%;
                background-color: #FFFFFF00;
                backdrop-filter: blur(20px);
                transition: background-color 0.3s;
                cursor: pointer;
                &:hover {
                    background-color: var(--tp-theme-secondary);
                    & .tp-portfolio-revealing-slider-control-line::after {
                        background-color: #fff;
                    }
                }
                @media #{$xs}{
                    top: 70%;
                    left: 10%;
                }
                &-right {
                    left: 95%;
                    @media #{$xs}{
                        left: 90%;
                    }
                    & .tp-portfolio-revealing-slider-control-line {
                        left: 37px;
                        transform-origin: 1px 0;
                        transform: rotate(45deg);
                    }
                    & .tp-portfolio-revealing-slider-control-line:nth-child(2) {
                        transform: translateY(1px) rotate(135deg);
                    }
                }
                &-line {
                    position: absolute;
                    left: 23px;
                    top: 50%;
                    width: 3px;
                    height: 14px;
                    transform-origin: 50% 0;
                    transform: rotate(-45deg);
                    &::after{
                        content: "";
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        background-color: #e2e2e2;
                        transition: background-color 0.3s;
                    }
                    &:nth-child(2) {
                        transform: translateY(1px) rotate(-135deg);
                    }
                }
                &.a-rotation{
                    & .tp-portfolio-revealing-slider-control-line::after {
                        animation: arrowLineRotation 0.49s;
                    }
                    & .tp-portfolio-revealing-slider-control-line:nth-child(1)::after {
                        animation: arrowLineRotationRev 0.49s;
                    }
                }
            }
        }
        &-slide {
            overflow: hidden;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 150vmax;
            height: 150vmax;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            transition: clip-path 0s calc(var(--slidingAT) * 0.7);
            clip-path: circle(calc(var(--controlSize) / 2) at 120vw 50%);
            &-inner {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 100vw;
                height: 100vh;
                margin-left: -50vw;
                margin-top: -50vh;
                background-size: cover;
                background-position: center center;
            }
            &-content {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                right: 0;
                margin: 0 auto;
                text-align: center;
            }
            &-heading {
                font-size: clamp(5rem, 15vw, 13rem);
                font-weight: 500;
                line-height: 0.8;
                color: var(--tp-common-white);
                font-family: var(--tp-ff-teko);
                letter-spacing: -4px;
                @media #{$sm,$xs}{
                    letter-spacing: 0;
                }
            }
            &-text {
                font-size: 16px;
                font-weight: 500;
                line-height: 1;
                margin-bottom: 30px;
                display: inline-block;
                font-family: var(--tp-ff-inter);
                color: var(--tp-common-white);
                text-transform: uppercase;
            }
            &.s-prev {
                clip-path: circle(calc(var(--controlSize) / 2) at 30vw 50%);
            }
            &.s-active {
                z-index: 1;
                transition: clip-path var(--slidingAT);
                clip-path: circle(120vmax at 120vw 50%);
            }
            &.s-active.s-active-prev {
                clip-path: circle(120vmax at 30vw 50%);
            }
        }
    }
    &-mix{
        &-slider{
            height: 100%;
            width: 100%;
            &-wrap{
                &.mix{
                    padding: 0px 0px 0px 0px;
                    height: 100vh;
                }
            }
            &-navigation{
                position: absolute;
                bottom: 0;
                width: 100%;
                & .nav-icon {
                    font-size: 16px;
                    text-transform: uppercase;
                    display: flex;
                    gap: 20px;
                    color: var(--tp-common-white);
                    line-height: 1;
                    position: relative;
                    z-index: 2;
                    cursor: pointer;
                }
                & .slider-nav {
                    display: flex;
                    height: 80px;
                    justify-content: space-between;
                    width: 100%;
                    align-items: center;
                    @media #{$xxl} {
                        height: 80px;
    
                    }
                }
                & .slider-nav-box {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                }
                &.navigation-white{
                    & .nav-icon {
                        color: var(--tp-common-black);
                    }
                }
            }
            &-image{
                & .popup-image{
                    position: absolute;
                    bottom: 200px;
                    left: 72px;
                    right: auto;
                    @media #{$xs}{
                        display: none;    
                    }
                    & i{
                        width: 35px;
                        height: 35px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: rgba(0, 0, 0, .2);
                        backdrop-filter: blur(10px);
                        color: var(--tp-common-white);
                    }
                }
            }
            &-content{
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                right: 0;
                margin: 0 auto;
                text-align: center;
                & .tp-portfolio-revealing-slide-text{
                    transform: translateX(200px);
                    transition: all 2s ease;
                    @media #{$lg,$md,$sm,$xs}{
                        transform: translateX(0px);
                    }
                }
                & .tp-portfolio-revealing-slide-heading{
                    transform: translateX(-200px);
                    transition: all 2s ease;
                    @media #{$lg,$md,$sm,$xs}{
                        transform: translateX(0px);
                    }
                }
            }
            & .swiper-slide-active{
                & .tp-portfolio-revealing-slide-text{
                    transform: translateX(0px);
                }
                & .tp-portfolio-revealing-slide-heading{
                    transform: translateX(0px);
                }
            }
        }
    }
    &-creative{
        &-social{
            position: absolute;
            top: 50%;
            right: 5%;
            left: auto;
			z-index: 55;
			writing-mode: vertical-rl;
			transform: translateY(-50%) rotate(180deg);
			@media #{$xl,$lg,$md}{
				right: 45px;
			}
			@media #{$xs}{
				right: 30px;
				display: none;
			}
			& a{
				font-weight: 700;
				font-size: 14px;
				line-height: 1;
				margin: 14px 0;
				display: inline-block;
				text-transform: uppercase;
                font-family: var(--tp-ff-inter);
				color: var(--tp-common-white);
			}
        }
        &-slider{
            &-main{
                & .swiper-pagination {
                    bottom: 30px;
                    left: 50%;
                    -webkit-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                    transform: translateX(-50%);
                    width: auto;
                    @media #{$xs} {
                        display: none;
                    }
                }
                & .swiper-pagination-bullet {
                    background: transparent;
                    margin: 0 10px !important;
                }
                & .path {
                    display: none;
                }
                & .swiper-pagination-bullet-active .path{
                    display: inline-block !important;
                    stroke-dasharray: 1000;
                    stroke-dashoffset: 0;
                    -webkit-animation: dash linear 10s;
                    animation: dash linear 10s;
                    -webkit-animation-iteration-count: unset;
                    animation-iteration-count: unset;
                }
                & .swiper-slide-active{
                    & .tp-portfolio-slicer-category{
                        transform: translateX(0px);
                    }
                    & .tp-portfolio-slicer-title{
                        transform: translateX(0px);
                    }
                }
            }
        }
        &-item{
            display: flex;
            align-items: end;
            height: calc(100vh - 200px);
            padding: 90px 85px 90px 85px;
            margin-top: 100px;
            width: 100%;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            border-radius: 40px;
            @media #{$md,$sm,$xs}{
                padding: 20px 30px;
            }
        }
        &-wrap{
            padding: 0px ;
            height: 100vh;
        }
        &-content{
            & .tp-portfolio-slicer-category{
                transform: translateX(200px);
                transition: all 2s ease;
                @media #{$lg,$md,$sm,$xs}{
                    transform: translateX(0px);
                }
            }
            & .tp-portfolio-slicer-title{
                transform: translateX(-200px);
                transition: all 2s ease;
                @media #{$lg,$md,$sm,$xs}{
                    transform: translateX(0px);
                }
            }
        }
    }
    &-elegant{
        padding-bottom: 50px;
        border: none;
        margin-bottom: 20px;
    }
    &-skew{
        &-wrap{
            .slide {
                width: 100%;
                height: 100%;
                grid-area: 1 / 1 / -1 / -1;
                pointer-events: none;
                opacity: 0;
                overflow: hidden;
                position: relative;
                display: grid;
                place-items: center;
                will-change: transform, opacity;
            }
            .slide--current {
                pointer-events: auto;
                opacity: 1;
                & .skew-slider-content{
                    opacity: 1;
                    visibility: visible;
                }
            }
            .slide__img {
                width: 100%;
                height: 100%;
                background-size: cover;
                background-position: 50% 50%;
                background-repeat: no-repeat;
                will-change: transform, opacity, filter;
            }
            .skew-slider{
                &-wrap{
                    width: 100%;
                    height: 100vh;
                    display: grid;
                    overflow: hidden;
                    place-items: center;
                    grid-template-rows: 100%;
                    grid-template-columns: 100%;
                }
                &-arrow{
                    position: absolute;
                    bottom: 80px;
                    gap: 10px;
                    width: 100%;
                    display: flex;
                    padding: 0 100px;
                    align-items: center;
                    justify-content: space-between;
                    @media #{$xl,$lg,$md} {
                        padding: 0 45px;
                    }
                    @media #{$sm,$xs} {
                        padding: 0 20px;
                    }
                    & button{
                        font-weight: 700;
                        font-size: 14px;
                        line-height: 1;
                        text-transform: uppercase;
                        color: var(--tp-common-white);
                        & .icon{
                            &-1,
                            &-2{
                                transition: .3s;
                                margin-right: 7px;
                                transform: translate(0px, -1px);
                            }
                            &-2{
                                margin-left: 7px;
                            }
                        }
                        &:hover{
                            & .icon{
                                &-1{
                                    transform: translate(-3px, -1px);
                                }
                                &-2{
                                    transform: translate(3px, -1px);
                                }
                            }
                        }
                    }
                }
                &-content{
                    position: absolute;
                    top: 50%;
                    opacity: 0;
                    left: 0;
                    padding-left: 320px;
                    visibility: hidden;
                    transform: translateY(-50%);
                    @media #{$xl} {
                        padding-left: 200px;
                    }
                    @media #{$lg,$md} {
                        padding-left: 150px;
                    }
                    @media #{$sm,$xs} {
                        padding-left: 50px;
                    }
                    & h4{
                        font-size: 140px;
                        line-height: .9;
                        letter-spacing: -0.03em;
                        text-transform: uppercase;
                        letter-spacing: 1.2px;
                        color: var(--tp-common-white);
                        font-family: var(--tp-ff-teko);
                        @media #{$xl} {
                            font-size: 100px;
                        }
                        @media #{$lg} {
                            font-size: 90px;
                        }
                        @media #{$md} {
                            font-size: 80px;
                        }
                        @media #{$sm,$xs} {
                            font-size: 60px;
                        }
                    }
                    & > span{
                        margin-bottom: 15px;
                        display: inline-block;
                        font-weight: 600;
                        font-family: var(--tp-ff-inter);
                        font-size: 16px;
                        line-height: 1;
                        text-transform: uppercase;
                        color: var(--tp-common-white);
                    }
                }
            }
            .slides-numbers{
                position: absolute;
                top: 50%;
                right: 100px;
                transform: translateY(-50%);
                &-wrap{
                    @media #{$md,$sm,$xs} {
                        display: none;
                    }
                }
                & span{
                    font-size: 14px;
                    font-weight: 600;
                    display: block;
                    line-height: 1;
                    color: var(--tp-common-white);
                    &.text-1{
                        transform: translateX(-5px);
                    }
                    &.text-2{
                        margin-left: 10px;
                        transform: rotate(25deg);
                        transform-origin: left bottom;
                    }
                    &.text-3{
                        margin-left: 27px;
                    }
                }
                &::after,
                &::before{
                    content: '';
                    width: 2px;
                    height: 130px;
                    display: inline-block;
                    transform: translateX(13px);
                    background-color: var(--tp-common-white);
                }
                &::before{
                    margin-bottom: 30px;
                }
                &::after{
                    margin-top: 40px;
                }
            }
        }
    }
    &-slider{
		&__wrap{
			grid-area: main;
			position: relative;
			overflow: hidden;
			display: grid;
			place-items: center;
			width: 100%;
			height: 100vh;
		}
		&__item{
			grid-area: 1 / 1 / -1 / -1;
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;
			display: grid;
			place-items: center;
			opacity: 0;
			pointer-events: none;
			&.current{
				opacity: 1;
				z-index: 50;
				pointer-events: auto;
			}
			&-inner{
				position: relative;
				width: 120%;
				height: 120%;
				display: grid;
				place-items: center;
				grid-area: 1/1/-1/-1;
				background-size: cover;
				background-position: 50% 50%;
			}
		}
		&-type{
			grid-area: main;
			display: grid;
			place-items: center;
			z-index: 9;
			position: absolute;
			bottom: 6%;
			left: 50%;
			transform: translateX(-50%);
            overflow: hidden;
			@media #{$sm,$xs}{
				bottom: 20%;
				width: 100%;
			}
			&-title{
				font-weight: 600;
				font-size: 120px;
				line-height: .9;
				margin-bottom: 0;
				text-align: center;
				color: var(--tp-common-white);
				font-family: var(--tp-ff-teko);
				@media #{$lg,$md}{
					font-size: 90px;
				}
                @media #{$sm}{
					font-size: 80px;
				}
				@media #{$xs}{
					font-size: 60px;
				}
			}
		}
		&__mail{
			position: absolute;
			top: 50%;
			right: 4%;
			z-index: 55;
			transform: translateY(-50%);
			@media #{$xl,$lg,$md}{
				right: 45px;
			}
			@media #{$sm,$xs}{
				right: 30px;
			}
			& a{
				font-weight: 600;
				font-size: 16px;
				line-height: 1;
				letter-spacing: .6px;
				writing-mode: vertical-lr;
				color: var(--tp-common-white);
                font-family: var(--tp-ff-inter);
			}
		}
		&__social{
			position: absolute;
			top: 50%;
			left: 4%;
			z-index: 55;
			writing-mode: vertical-rl;
			transform: translateY(-50%) rotate(180deg);
			@media #{$xl,$lg,$md}{
				left: 45px;
			}
			@media #{$sm,$xs}{
				left: 30px;
				display: none;
			}
			& a{
				font-weight: 700;
				font-size: 14px;
				line-height: 1;
				margin: 14px 0;
				display: inline-block;
				text-transform: uppercase;
                font-family: var(--tp-ff-inter);
				color: var(--tp-common-white);
			}
		}
		&__copyright{
			position: absolute;
			top: 45px;
			left: 50%;
			z-index: 55;
			transform: translateX(-50%);
			@media #{$lg}{
				top: 65px;
			}
			@media #{$sm,$xs} {
				display: none;
			}
			& p{
				font-weight: 700;
				font-size: 14px;
				line-height: 1;
				margin-bottom: 0;
				letter-spacing: 0.8px;
				text-transform: uppercase;
				color: var(--tp-common-white);
				& a{
					position: relative;
					&::after{
						position: absolute;
						content: '';
						bottom: -1px;
						left: 0;
						width: 0;
						height: 1px;
						transition: .3s;
						display: inline-block;
						opacity: 0;
						visibility: hidden;
						background-color: var(--tp-common-white);
					}
				}
				&:hover{
					& a{
						&::after{
							right: auto;
							width: 100%;
							opacity: 1;
							visibility: visible;
						}
					}
				}
			}
		}
		&__style-2{
			& .tp-portfolio-slider__copyright {
				position: absolute;
				top: auto;
				bottom: 80px;
				left: 50%;
				z-index: 55;
				transform: translateX(-50%);
				@media #{$sm,$xs} {
					bottom: 140px;
					text-align: center;
				}
			}
			& .tp-portfolio-slider-type-title {
				font-size: 180px;
				@media #{$xl} {
					font-size: 140px;
				}
				@media #{$lg} {
					font-size: 120px;
				}
				@media #{$md} {
					font-size: 100px;
				}
				@media #{$sm,$xs} {
					font-size: 70px;
				}
			}
			& .tp-portfolio-slider-type {
				top: 65%;
			}
		}
	}
    &-colum{
        &-spacing{
            padding-top: 200px;
            padding-bottom: 100px;
        }
    }
    &-inner{
        &-tab{
            &-wrap{
                display: flex;
                justify-content: center;
                & nav{
                    & .nav-tabs{
                        border-bottom: none;
                        & .nav-link{
                            font-size: 15px;
                            font-weight: 600;
                            padding: 6px 25px;
                            margin-right: 10px;
                            font-family: var(--tp-ff-heading);
                            margin-bottom: 20px;
                            border-radius: 30px;
                            display: inline-block;
                            color: var(--tp-common-black);
                            border: 1px solid rgba(0, 0, 0, 0.10);
                            &.active,
                            &:hover{
                                color: var(--tp-common-black);
                                background-color: var(--tp-grey-5);
                                border-color: var(--tp-grey-5);
                            }
                        }
                    }
                }
            }
        }
    }
    &-grid{
        &-item{
            & .tp-portfolio-sa-thumb{
                & img{
                    transition: all .6s ease;
                }
            }
            &:hover{
                & .tp-portfolio-sa-thumb{
                    & img{
                        transform: scale(1.1);
                    }
                }
            }
        }
    }
}
.tp--hover-img canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

//------- coverflow slider start---------//
.coverflow-slider{
	&-wrap{
		display: flex;
		align-items: center;
		height: 100vh;
	}
	&-active{
		padding: 100px 0;
	}
	&-text{
		&-active{
			height: 100px;
		}
		&-wrap{
			position: absolute;
			bottom: 60px;
			left: 50%;
			transform: translateX(-50%);
			@media #{$sm,$xs} {
				bottom: 40px;
			}
		}
	}
	&-title-sm{
		font-size: 100px;
		line-height: 1;
		font-weight: 600;
		letter-spacing: 2px;
		color: var(--tp-common-black);
		font-family: var(--tp-ff-teko);
		@media #{$xl,$lg} {
			font-size: 80px;
		}
		@media #{$md} {
			font-size: 60px;
		}
		@media #{$sm,$xs} {
			font-size: 50px;
		}
	}
	&-item{
		height: 500px;
		overflow: hidden;
	}
}
//------- coverflow slider end---------//

/* ============ creative Slider ================= */
.type__item {
	grid-area: 1 / 1 / -1 / -1;
	opacity: 0;
}
.type__item--current {
	opacity: 1;
}
.char-wrap {
	display: inline-block;
	position: relative;
	overflow: hidden;
	display: inline-flex;
}
.slider--bg {
	z-index: 1;
	& .tp-portfolio-slider__item-inner{
		position: relative;
		&::after{
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(2, 2, 1, 0.2);
		}
	}
}
.slider--fg {
	position: absolute;
	width: 20vw;
	min-width: 200px;
	aspect-ratio: 0.75;
	height: auto;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.tp-portfolio-slider-small{
	&__wrap{
		border-radius: 200px;
	}
}
/* ============ creative Slider ================= */



//------- perspective slider start---------//
.tp-perspective{
	&-slider {
		width: 100%;
		overflow: hidden;
		padding: 2vw 3vw 0;
		box-sizing: border-box;
		margin-bottom: 80px;
		& .tp-perspective-inner {
			width: 100%;
			height: 90vh;
			position: relative;
			display: inline-block;
			& .tp-perspective-content {
				position: absolute;
				text-align: center;
				width: 100%;
				top: 50%;
				z-index: 10;
				transform: translateY(-50%);
				-webkit-transform: translateY(-50%);
				-moz-transform: translateY(-50%);
				-ms-transform: translateY(-50%);
				-o-transform: translateY(-50%);
			}
			& .tp-perspective-image {
				width: 100%;
				height: 100%;
				background-size: cover;
				position: relative;
				display: inline-block;
			}
		}
		& .tp-perspective-category{
			font-weight: 400;
			font-size: 40px;
			line-height: 1;
			margin-bottom: 0px;
			color: var(--tp-common-white);
            display: block;
			font-family: var(--tp-ff-teko);
		}
		& .tp-perspective-title{
			font-weight: 400;
			font-size: 180px;
			line-height: 1;
			display: inline-block;
			color: var(--tp-common-white);
			font-family: var(--tp-ff-teko);
			@media #{$lg} {
				font-size: 130px;
			}
			@media #{$md} {
				font-size: 110px;
			}
			@media #{$xs} {
				font-size: 70px;
			}
		}
	}
	&-social{
		&-wrap {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
		}
		&-info{
			& span{
				font-size: 17px;
				font-weight: 400;
				line-height: 1;
				text-transform: uppercase;
				color: var(--tp-common-white);
				font-family: var(--tp-ff-onest);
				& svg{
					@extend %svg-2;
					display: inline-block;
				}
			}
		}
	}
	&-scroll{
		& a{
			font-size: 17px;
			font-weight: 400;
			line-height: 1;
			text-transform: uppercase;
			color: var(--tp-common-white);
			font-family: var(--tp-ff-onest);
		}
	}
}
//------- perspective slider end---------//


.tp-pd-3{
    &-spacing{
        @media #{$md} {
            padding-top: 15px;
        }
        @media #{$sm,$xs} {
            padding-top: 0;
        }
    }
	&-hero{
		&-area{
			@media #{$sm,$xs} {
				padding-top: 80px;
			}
		}
		&-style{
			padding-top: 20px;
			& .des-portfolio-category {
				top: auto;
				left: 60px;
				bottom: 60px;
				@media #{$lg,$md} {
					left: 20px;
				}
			}
			& .des-portfolio-category.portfolio-meta {
				left: auto;
				right: 50px;
				@media #{$lg,$md} {
					right: 20px;
				}
			}
			& .des-portfolio-content {
				bottom: 20px;
				@media #{$sm,$xs} {
					bottom: 10px;
				}
			}
		}
	}
	&-subtitle{
		font-weight: 500;
		font-size: 16px;
		line-height: 1;
		margin-bottom: 20px;
		display: inline-block;
		letter-spacing: -0.02em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.6);
        font-family: var(--tp-ff-inter);
	}
	&-title{
		font-size: 80px;
		line-height: .9;
		color: #f9f4e8;
		margin-bottom: 25px;
		font-family: var(--tp-ff-teko);
        font-weight: 500;
		@media #{$sm,$xs} {
			font-size: 55px;
		}
	}
	&-overview{
		&-area{
			@media #{$md,$sm,$xs} {
				padding-top: 80px;
				padding-bottom: 55px;
			}
		}
		&-left{
			@media #{$md,$sm,$xs} {
				margin-bottom: 40px;
			}
		}
		&-info{
			& span{
				font-weight: 500;
				font-size: 16px;
				line-height: 1;
				color: rgba(249, 244, 232, 0.5);
                font-family: var(--tp-ff-inter);
			}
			& h4{
				font-size: 40px;
				line-height: 1.4;
				color: #f9f4e8;
				margin-bottom: 0;
				letter-spacing: 0.02em;
                font-weight: 500;
				font-family: var(--tp-ff-teko);
			}
		}
		&-text{
			& p{
				font-weight: 500;
				font-size: 20px;
				line-height: 1.5;
				margin-bottom: 55px;
				margin-right: 20px;
                font-family: var(--tp-ff-inter);
				color: rgba(255, 255, 255, 0.6);
				& br{
					@media #{$lg,$md,$sm,$xs} {
						display: none;
					}
				}
			}
		}
	}
	&-gallery{
		&-img{
			& img{
				width: 100%;
				border-radius: 20px;
			}
			&.height{
				height: 880px;
				overflow: hidden;
				border-radius: 20px;
				@media #{$xl} {
					height: 800px;
				}
				@media #{$lg} {
					height: 650px;
				}
				@media #{$md} {
					height: 480px;
				}
				@media #{$sm,$xs} {
					height: 260px;
				}
				& img{
					@media #{$xs} {
						margin-top: -50px;
					}
				}
			}
			&.medium-img{
				height: 720px;
				border-radius: 20px;
				overflow: hidden;
				@media #{$xl} {
					height: 630px;
				}
				@media #{$lg} {
					height: 550px;
				}
				@media #{$md} {
					height: 480px;
				}
				@media #{$sm,$xs} {
					height: 260px;
				}
				& img{
					margin-top: -80px;
					@media #{$lg} {
						margin-top: -40px;
					}
				}
			}
			&.small-img{
				height: 400px;
				overflow: hidden;
				border-radius: 20px;
				& img{
					margin-top: -150px;
					@media #{$xl} {
						margin-top: -100px;
					}
					@media #{$lg} {
						margin-top: -20px;
					}
				}
			}
		}
	}
	&-portfolio{
		&-area{
			@media #{$xl} {
				padding-top: 160px;
			}
			@media #{$lg} {
				padding-top: 100px;
			}
			@media #{$md,$sm,$xs} {
				padding-top: 80px;
			}
		}
		&-thumb{
			@media #{$md,$sm,$xs} {
				padding-bottom: 40px;
			}
			& img{
				border-radius: 20px;
			}
		}
		&-item{
			@media #{$xl,$lg,$md,$sm,$xs} {
				margin-bottom: 0;
			}
			&-wrap{
				@media #{$md,$sm,$xs} {
					padding-top: 0;
				}
			}

		}
		&-content{
			@media #{$md,$sm,$xs} {
				margin-left: 0;
			}
		}
	}
	&-navigation{
		&-title{
			font-size: 160px;
			font-weight: 500;
			line-height: .69;
			text-transform: uppercase;
			color: var(--tp-common-white);
			font-family: var(--tp-ff-teko);
			@media #{$xl} {
				font-size: 145px;
			}
			@media #{$lg} {
				font-size: 125px;
			}
			@media #{$md} {
				font-size: 115px;
			}
			@media #{$sm,$sm,$xs} {
				font-size: 70px;
			}
			&-sm{
				font-size: 120px;
				line-height: .62;
				position: relative;
				display: inline-block;
				padding: 15px 0;
                font-weight: 500;
				transition: .4s ease-in-out;
				transform: translateY(120px);
				color: var(--tp-common-white);
				font-family: var(--tp-ff-teko);
				@media #{$xl} {
					font-size: 100px;
				}
				@media #{$lg,$md} {
					font-size: 90px;
				}
				@media #{$sm,$xs} {
					font-size: 60px;
				}
				&::after{
					position: absolute;
					content: "";
					bottom: 7px;
					left: 0;
					height: 6px;
					width: 0;
					transition: 0.4s;
					background-color: var(--tp-common-white);
				}
				&:hover {
					&::after {
						width: 100%;
					}
				}
			}
		}
		&-thumb{
			border-radius: 20px;
			& img{
				transition: .5s;
				border-radius: 20px;
			}
			&-overlay{
				position: relative;
				overflow: hidden;
				&::after{
					position: absolute;
					content: '';
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					opacity: 0;
					border-radius: 20px;
					visibility: hidden;
					pointer-events: none;
					transition: .3s ease-in-out;
					background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
				}
			}
			&-wrap{
				border-radius: 20px;
				& .des-portfolio-category span {
					transition: .4s ease-in-out;
					transform: translateY(30px);
				}
				&:hover{
					& .tp-pd-3-navigation-title-sm{
						transform: translateY(0);
					}
					& .des-portfolio-category span {
						transform: translateY(0);
					}
					&.tp-pd-3-navigation-thumb-overlay::after {
						opacity: 1;
						visibility: visible;
					}
					& .tp-pd-3-navigation-thumb{
						& img{
							transform: scale(1.1) rotate(-2deg);
						}
					}
				}
			}
		}
		&-top{
			@media #{$md,$sm,$xs} {
				padding-bottom: 50px;
			}
		}
		&-content{
			position: absolute;
			bottom: 70px;
			left: 0;
			right: 0;
			z-index: 3;
			text-align: center;
			@media #{$xl,$lg,$md} {
				bottom: 40px;
			}
			@media #{$sm,$xs} {
				bottom: 20px;
			}
		}
	}
    &-btn{
        font-weight: 400;
        font-size: 40px;
        transition: 0.3s;
        border-radius: 6px;
        padding: 8px 20px 2px 20px;
        line-height: 1;
        display: inline-block;
        letter-spacing: 1px;
        color: var(--tp-common-white);
        font-family: var(--tp-ff-teko);
        border: 1px solid rgba(249, 244, 232, 0.1);
        &:hover{
            background: var(--tp-common-white);
        }
    }
}

.des-portfolio{
    &-item{
        & img{
            width: 100%;
            border-radius: 20px;
        }
    }
    &-thumb{
        position: relative;
        border-radius: 20px;
        &::after{
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 20px;
            background: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.4) 100%);
        }
    }
    &-category{
        position: absolute;
        top: 45px;
        left: 50px;
        z-index: 2;
        @media #{$sm,$xs}{
            top: 15px;
            left: 15px;
        }
        &.portfolio-meta{
            left: auto;
            right: 50px;
            @media #{$sm,$xs}{
                right: 15px;
            }
        }
        & span{
            font-weight: 500;
            font-size: 14px;
            line-height: 1;
            border-radius: 20px;
            padding: 7px 12px;
            transition: 0.3s;
            letter-spacing: .4px;
            display: inline-block;
            text-transform: uppercase;
            color: var(--tp-common-white);
            font-family: var(--tp-ff-inter);
            border: 1px solid rgba(255, 255, 255, 0.2);
            @media #{$sm,$xs}{
                font-size: 12px;
                padding: 7px 7px;
            }
            &:hover{
                color: var(--tp-common-black);
                border-color: var(--tp-common-white);
                background-color: var(--tp-common-white);
            }
        }
    }
    &-content{
        position: absolute;
        bottom: 50px;
        left: 0;
        right: 0;
        display: inline-block;
        text-align: center;
        @media #{$sm,$xs}{
            bottom: 5px;
        }
    }
    &-title{
        font-weight: 600;
        font-size: 180px;
        line-height: 1;
        margin-bottom: 0;
        display: inline-block;
        font-family: var(--tp-ff-teko);
        color: var(--tp-common-white);
        font-weight: 500;
        @media #{$xl} {
            font-size: 125px;
        }
        @media #{$lg}{
            font-size: 80px;
        }
        @media #{$md}{
            font-size: 70px;
        }
        @media #{$sm,$xs}{
            font-size: 50px;
        }
    }
    &-area{
        @media #{$xl}{
            padding-bottom: 120px;
        }
        @media #{$lg,$md}{
            padding-bottom: 110px;
        }
        @media #{$sm,$xs}{
            padding-bottom: 0px;
        }
    }
}

.tp-pd{
    &-2{
        &-ptb{
            @media #{$lg,$md,$sm,$xs} {
                padding-top: 150px;
            }
            @media #{$sm,$xs} {
                padding-bottom: 50px;
            }
        }
        &-area{
            @media #{$lg} {
                padding-bottom: 100px;
            }
            @media #{$md,$sm,$xs} {
                padding-bottom: 80px;
            }
        }
        &-top{
            @media #{$lg} {
                padding-bottom: 50px;
            }
            @media #{$md,$sm,$xs} {
                padding-bottom: 40px;
            }
        }
        &-title{
            font-size: 140px;
            font-weight: 700;
            line-height: 1;
            letter-spacing: -7px;
            color: var(--tp-common-black);
            @media #{$xl} {
                font-size: 110px;
            }
            @media #{$lg,$md} {
                font-size: 100px;
                letter-spacing: 0;
            }
            @media #{$sm,$xs} {
                font-size: 60px;
                letter-spacing: 0;
            }
        }
        &-categories{
            & span{
                font-size: 14px;
                font-weight: 600;
                padding: 4px 24px;
                position: relative;
                border-radius: 30px;
                margin-right: 10px;
                display: inline-block;
                color: var(--tp-common-black);
                font-family: var(--tp-ff-inter);
                    border: 1px solid rgba(0, 0, 0, 0.1);
                &::before{
                    position: absolute;
                    top: 15px;
                    left: 12px;
                    content: "";
                    height: 5px;
                    width: 5px;
                    border-radius: 50%;
                    background-color: var(--tp-theme-secondary);
                }
            }
        }
        &-bottom{
            @media #{$sm,$xs} {
                flex-wrap: wrap;
            }
            & .tp-pd-2-bottom-item{
                &:not(:last-of-type){
                    margin-right: 20px;
                }
            }
            &-item{
                @media #{$sm,$xs} {
                    padding-bottom: 20px;
                }
                & span{
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 1;
                    margin-bottom: 10px;
                    display: inline-block;
                    font-family: var(--tp-ff-inter);
                    color: rgba(0, 0, 0, 0.7);
                }
                & h6{
                    font-size: 20px;
                    font-weight: 600;
                    color: var(--tp-common-black);
                }
            }
        }
        &-banner{
            height: 950px;
            overflow: hidden;
            @media #{$xxl,$xl} {
                height: 680px;
            }
            @media #{$lg} {
                height: 600px;
            }
            @media #{$md} {
                height: 500px;
            }
            @media #{$sm,$xs} {
                height: 250px;
            }
            & img{
                width: 100%;
                margin-top: -150px;
                @media #{$lg} {
                    margin-top: -100px;
                }
                @media #{$md} {
                    margin-top: -20px;
                }
                @media #{$sm,$xs} {
                    margin-top: -50px;
                }
            }
        }
        &-overview{
            &-heading{
                @media #{$md,$sm,$xs} {
                    padding-bottom: 30px;
                }
            }
            &-title{
                font-size: 50px;
                font-weight: 700;
                line-height: 1;
                letter-spacing: -1.5px;
                color: var(--tp-common-black);
            }
            &-wrap{
                & p{
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 26px;
                    margin-bottom: 24px;
                    color: rgba(0, 0, 0, 0.60);
                    font-family: var(--tp-ff-inter);
                }
                & ul{
                    padding-top: 20px;
                    display: inline-block;
                    & li{
                        font-size: 20px;
                        font-weight: 600;
                        margin-bottom: 20px;
                        padding-bottom: 20px;
                        margin-left: 16px;
                        color: var(--tp-common-black);
                        font-family: var(--tp-ff-inter);
                        &:not(:last-of-type){
                            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
                        }
                    }
                }
            }
        }
        &-slider{
            &-ptb{
                @media #{$xl,$lg} {
                    padding-bottom: 100px;
                }
                @media #{$md,$sm,$xs} {
                    padding-bottom: 80px;
                }
            }
            &-wrapper{
                margin: 0 -200px;
                @media #{$sm,$xs} {
                    margin: 0;
                }
                & .swiper-wrapper{
                    padding-bottom: 40px;
                }
            }
            &-thumb{
                overflow: hidden;
                &:hover{
                    & img{
                        transform: scale(1.2);
                    }
                }
                & img{
                    transition: .9s ease-in-out;
                }
            }
        }
        &-dot{
            & .swiper-pagination-bullet {
                width: 6px;
                height: 6px;
                opacity: 1;
                transition: .3s;
                border-radius: 50%;
                display: inline-block;
                background: rgba(0, 0, 0, 0.30);
                &.swiper-pagination-bullet-active{
                    width: 24px;
                    border-radius: 10px;
                    background-color: var(--tp-common-black);
                }
            }
        }

        &-step{
            &-heading{
                @media #{$sm,$xs} {
                    padding-bottom: 40px;
                }
            }
            &-title{
                font-size: 40px;
                font-weight: 700;
                line-height: 1.2;
                letter-spacing: -1.2px;
                color: var(--tp-common-black);
                @media #{$sm,$xs} {
                    font-size: 35px;
                    letter-spacing: 0;
                }
                & br{
                    @media #{$md,$sm,$xs} {
                        display: none;
                    }
                }
            }
            &-item{
                &-title{
                    font-size: 22px;
                    font-weight: 600;
                    margin-bottom: 10px;
                    color: var(--tp-common-black);
                }
                & span{
                    font-size: 15px;
                    font-weight: 500;
                    line-height: 24px;
                    display: inline-block;
                    color: rgba(0, 0, 0, 0.60);
                    font-family: var(--tp-ff-inter);
                    & br{
                        @media #{$lg,$md,$sm,$xs} {
                            display: none;
                        }
                    }
                }
            }
        }
        &-thumb{
            &-ptb{
                @media #{$lg} {
                    padding-bottom: 100px;
                }
                @media #{$md,$sm,$xs} {
                    padding-bottom: 80px;
                }
            }
            &-item{
                overflow: hidden;
                height: 600px;
                @media #{$xl} {
                    height: 500px;
                }
                @media #{$lg} {
                    height: 400px;
                }
                @media #{$md} {
                    height: 450px;
                }
                @media #{$sm,$xs} {
                    height: 250px;
                }
                & img{
                    margin-top: -100px;
                    width: 100%;
                    @media #{$lg} {
                        margin-top: -60px;
                    }
                    @media #{$sm,$xs} {
                        margin-top: -40px;
                    }
                }
            }
        }
        &-np{
            &-ptb{
                @media #{$md,$sm,$xs} {
                    padding-bottom: 80px;
                }
            }
            &-content{
                & a{
                    width: 180px;
                    height: 180px;
                    font-size: 16px;
                    font-weight: 600;
                    margin: 0 -14px;
                    text-align: center;
                    line-height: 180px;
                    border-radius: 50%;
                    display: inline-block;
                    color: var(--tp-common-black);
                    border: 1px solid rgba(0, 0, 0, 0.10);
                    &:hover{
                        color: var(--tp-common-white);
                        background-color: var(--tp-common-black);
                    }
                    & svg{
                        margin: 0 4px;
                    }
                }
            }
        }
    }
}