/* Features css */

.features__heading--subtitle{
    font-size: 1.8rem;
    line-height: 2.5rem;
    font-weight: 500;
    text-transform: uppercase;   
}
.section__heading {
    & span.features__heading--subtitle.gradient__color {
        background: linear-gradient(-45deg, #EC4899 22%, #9393FB 57%, #58AAF8 80%, #27CEEF 78%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
.section__heading--horizontal{
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    align-items: center;
    @media only screen and (max-width: 1199px) {
        flex-direction: column;
         text-align: center;
    }
    & p{
        max-width: 45rem;
    }
}

.features__card{
    background: #181A21;
    border: 1px solid #565656;
    position: relative;
    border-radius: 1rem;
    padding: 3rem;
    &.features__demos{
        padding: 8rem 4rem;
        @media only screen and (min-width: 1200px) {
           padding: 6rem;
        }
    }
    &.features__ceo-Performance{
        padding: 3rem 0 3rem 2rem;
        @media only screen and (min-width: 576px) {
            padding: 3rem 0 3rem 5rem;
        }
        @media only screen and (min-width: 1500px) {
          padding: 3rem 0 6rem 6rem;
        }
    }
    &.card__shipping--calculator{
        padding: 3rem 0 4rem 3rem;
        @media only screen and (min-width: 768px) {
           padding: 3rem 0 1rem 3rem;
        }
        & .features__card--content{
            padding: 0 0 4.5rem;
        }
    }
    &.card__filter--sorting{
        padding: 1.5rem 3rem 3rem 0;
         @media only screen and (min-width: 1200px) {
            padding: 1.5rem 3rem 5rem 0;
        }
        & .features__card--content{
            padding: 0 0 0 2rem;
            @media only screen and (min-width: 1200px) {
             margin-top: -20px;
            }
            @media only screen and (min-width: 1500px) {
             margin-top: -53px;
            }
        }
    }
    &.card__color--swatches{
        padding: 3rem 3rem 0 3rem;
        @media only screen and (min-width: 768px) {
            padding: 3rem 4rem 0 4rem;
        }
    }
    &.card__cart--note{
        padding: 3rem 3rem 0;
    }
    &.card__shipping--bar{
        padding: 3rem 3rem 0 2rem;
    }
    &.card__enhanced--search{
        padding: 3rem 0  0 3rem;
    }
    &.card__booster--popup{
        padding: 3rem 0  1rem 3rem;
        & .features__card--content{
            margin-bottom: -3rem;
            @media only screen and (min-width: 1200px) {
             margin-bottom: -8rem;
            }
            @media only screen and (min-width: 1500px) {
             margin-bottom: -11rem;
            }
        }
    }
    &.card__trust--badge{
        padding: 0 3rem 0 0;
        & .features__card--content{
            padding: 3rem 0 0 3rem;
            margin-bottom: -7rem;
            @media only screen and (min-width: 992px) {
              margin-bottom: -3rem;
            }
            @media only screen and (min-width: 1500px) {
             margin-bottom: -14rem;
            }
        }
    }
    &.card__recommended--products{
        padding: 3rem 3rem 0;
    }
    &.card__scrolling--text{
        padding: 3rem 0 6.5rem;
        & .features__card--content{
            padding: 0 0 3rem 3rem;
        }
    }
    &.card__stock--counter{
        padding: 0 3rem 4rem;
        @media only screen and (min-width: 1500px) {
            padding: 0 3rem 7rem;
        }
        & .features__card--content{
            padding: 3rem 0 0 0;
            margin-bottom: -8rem;
             @media only screen and (min-width: 1500px) {
             margin-bottom: -11rem;
            }
        }
    }
    &.card__gallery{
        padding: 3rem 3rem 0.5rem;
    }
    &.card__faq{
        padding: 3rem 3rem 4.5rem;
    }
    &.card__notifications{
        padding: 3rem 3rem 0;
    }
    &.card__contact--form{
        padding: 3rem 0 0 3rem;
    }
    &.card__store--location{
        & .features__card--thumbnail{
            padding: 3rem 6rem 2rem;
        }
    }
    &.card__shoppable--videos{
        & .features__card--thumbnail{
            padding: 0 0 2rem;
             @media only screen and (min-width: 992px) {
             padding: 0 0 5rem;
            }
        }

    }
    &.card__stock--alert{
        padding: 0 0 3rem 3rem;
        & .features__card--content{
            padding: 3rem 0 0;
            margin-bottom: -3rem;
            z-index: 99;
            @media only screen and (min-width: 768px) {
                margin-bottom: -8rem;
            }
            @media only screen and (min-width: 1500px) {
             margin-bottom: -11rem;
            }
        }
    }
    &.card__menu--navigation{
        @media only screen and (min-width: 992px) {
            padding: 3rem 3rem 0;
        }
    }
    &.card__size--guide{
        padding: 3rem 3rem 0;
    }
    &.card__hotspot{
        padding: 3rem 0 3rem 3rem;
    }
    &.card__compare{
        padding: 3rem 3rem 0;
        & .features__card--thumbnail{
            padding: 0 3rem;
        }
    }
    &.card__before--after{
        padding: 3rem 3rem 0;
        & .features__card--content{
            margin-bottom: -5rem;
            z-index: 99;
            @media only screen and (min-width: 1500px) {
             margin-bottom: -10.5rem
            }
        }
    }
    &.card__complementary{
        padding: 3rem 0 0 3rem;
        & .features__card--content{
            margin-bottom: -4rem;
        }
    }
    &.card__mega--menu{
        padding: 3rem 3rem 0;
        @media only screen and (min-width: 768px) {
            padding: 3rem 5rem 0;
        }
        @media only screen and (min-width: 1200px) {
            padding: 3rem 10rem 0;
        }
    }
    &.card__rtl{
        padding: 3rem 3rem 0;
    }
    &.card__product--bundles{
        padding: 3rem 0 4rem 3rem;
    }
    &.card__testimonial{
        & .features__card--content{
           margin-bottom: -4rem;
        }
    }
    &.card__sticky--header{
        padding: 3rem 3rem 0;
    }
}
.card__color--schemes{
    & .features__card--thumbnail{
        @media only screen and (min-width: 768px) {
           padding: 0 5rem 2rem 2rem;
        }
    }
    
}
.features__card--thumbnail{
    position: relative;
    z-index: 9;
}


.features__card--content{
    padding: 0 0 2rem;
    position: relative;
    z-index: 9;
}

.features__card--title{
    font-size: 2.2rem;
    line-height: 3rem;
    font-weight: 700;
    display: inline-block;
    background: linear-gradient(45deg, #27CEEF 0%, #58AAF8 34%, #9393FB 45%, #EC4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    &.gradient-2{
        background: linear-gradient(45deg, #27CEEF 0%, #58AAF8 34%, #9393FB 60%, #EC4899 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    & span{
         background: white;
         -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    @media only screen and (min-width: 768px) {
        font-size: 2.5rem;
        line-height: 3.2rem;
    }
    @media only screen and (min-width: 1200px) {
       font-size: 2.8rem;
        line-height: 3.4rem;
    }
    @media only screen and (min-width: 1366px) {
        font-size: 3.2rem;
        line-height: 4rem;
    }
}
.features__card--title.gradient-mega-menu{
    font-size: 3.5rem;
     background: linear-gradient(180deg, #EC4899 0%, #8137B9 45%, rgb(24, 26, 33, .41) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    @media only screen and (min-width: 992px) {
        font-size: 5rem;
        line-height: 5rem;
    }
    @media only screen and (min-width: 992px) {
        font-size: 7rem;
        line-height: 7rem;
    }
     @media only screen and (min-width: 1200px) {
        font-size: 10rem;
        line-height: 10rem;
    }
}
.features__ceo-Performance{
    & .features__card--content{
        padding: 0.5rem 3rem 0 0;
        @media only screen and (min-width: 1500px) {
          max-width: 48rem;
        }
    }
}
.features__card--desc{
    color: #B9BBC1;
}
.features__card--shape{
    position: absolute;
    &.top-left{
        top: 0;
        left: 0;
    }
    &.bottom-right{
        bottom: 0;
        right: 0;
    }
    &.bottom-left{
        bottom: 0;
        left: 0;;
    }
    &.top-right{
        top: 0;
        right: 0;
    }
    &.bottom-center{
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    &.top-center{
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}


.features__btn{
    margin-top: 3rem;
}
@media only screen and (min-width: 992px) {
    .features__btn{
        margin-top: 6rem;
    }
}
.mega__menu--content{
    z-index: 99;
}


/*
    performance section css
*/

.theme__performance--section{
    position: relative;
}
.theme__performance--section__shape{
    position: absolute;
    top: -40%;
    right: 0;
    z-index: -1;
}

.performance__card{
    background: #15131D;
    border: 1px solid #616161;
    position: relative;
    border-radius: 1rem;
}
.performance__card--content{
    padding: 3rem 3rem 0;
    position: relative;
    z-index: 9;
}

.performance__card--title{
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 700;
    background: linear-gradient(45deg, #27CEEF 0%, #58AAF8 30%, #9393FB 50%, #EC4899 88%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

@media only screen and (min-width: 992px) {
    .performance__card--title {
        font-size: 2rem;
        line-height: 2.2rem;
    }
}
@media only screen and (min-width: 1200px) {
    .performance__card--title {
        font-size: 2.8rem;
        line-height: 2.8rem;
    }
}
.performance__card--desc{
    color: #B9BBC1;
}

.performance__card--shape{
    position: absolute;
    top: 0;
    right: 0;
}
@media only screen and (max-width: 767px) {
    .performance__card--shape {
        max-width: 300px;
    }
}
.performance__card--thumbnail{
    padding: 0 1.5rem;
    position: relative;
    z-index: 9;
}
.performance__card--thumbnail.card1{
    padding: 0 3rem 3rem;
}
.performance__card--thumbnail.card2{
    padding: 0 3rem 3rem;
}
.performance__card--thumbnail.card3{
    padding: 0 0 0 3rem;
}
.performance__card--thumbnail.card4{
    padding: 0 3rem 3rem;
}
.performance__card--thumbnail.card5{
       padding: 0 8.5rem 5rem;
}

.performance__optimized--media__img{
    max-width: 84rem;
}

.performance__progressbar--items{
    background: #0B182A;
    border: 1px solid #232E3E;
    padding: 1rem 2rem 1.5rem 2.5rem;
    border-radius: 1rem;
    position: relative;
}

@media only screen and (min-width: 1600px) {
    .performance__progressbar--items{
        padding: 1.5rem 2rem 1.5rem 2.5rem;
    }
}
@media only screen and (max-width: 1199px) {
    .performance__progressbar--items{
        margin-bottom: 1rem;
    }
}
.performance__progressbar--items.two {
    position: relative;
    right: 3rem
}
@media only screen and (min-width: 576px) {
    .performance__progressbar--items.two {
        right: 13rem;
    }
}
.performance__progressbar{
    position: absolute;
    right: 4rem;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
@media only screen and (max-width: 575px) {
    .performance__progressbar {
        position: inherit;
        right: 0;
        left: 2rem;
        transform: inherit;
        margin-top: 3rem;
    }
}
.performance__progressbar--left{
    width: 9rem;
    text-align: center;
    position: relative;
    margin-right: 5rem;
    z-index: 9;
}
@media only screen and (min-width: 1200px) {
    .performance__progressbar--left{
        width: 10rem;
        margin-right: 7rem;
    }
}
.performance__progressbar--left::before{
    position: absolute;
    content: "";
    width: 1.5px;
    height: 5.5rem;
    right: -3.5rem;
    top: 50%;
    transform: translateY(-50%);
}
@media only screen and (min-width: 1200px) {
    .performance__progressbar--left::before{
        height: 8.5rem;
    }
}
.performance__progressbar--left.desktop::before{
    background: #28A6AD;
}
.performance__progressbar--left.mobile::before{
    background: #87A84B;
}
.performance__progressbar--left.accessibility::before{
    background: #0463AF;
}
.performance__progressbar--img{
    margin-bottom: 1rem;
}
@media only screen and (max-width: 1599px) {
    .performance__progressbar--img{
        max-width: 5rem;
    }
}
@media only screen and (max-width: 1365px) {
    .performance__progressbar--img{
        max-width: 4rem;
    }
}
@media only screen and (max-width: 1199px) {
    .performance__progressbar--img{
        max-width: 2rem;
    }
}
.performance__progressbar--title{
    font-size: 1.6rem;
    line-height: 2rem;
}
@media only screen and (min-width: 1200px) {
    .performance__progressbar--title{
        font-size: 2rem;
     line-height: 2.8rem;
    }
}
@media only screen and (min-width: 1366px) {
    .performance__progressbar--title{
        font-size: 2.2rem;
        line-height: 3rem;
    }
}
@media only screen and (min-width: 1600px) {
    .performance__progressbar--title{
        font-size: 2.5rem;
        line-height: 3.2rem;
    }
}
.performance__progressbar--count{
    font-size: 1.6rem;
    line-height: 2rem;
    font-weight: 600;
}
@media only screen and (min-width: 1200px) {
    .performance__progressbar--count{
        font-size: 2.2rem;
        line-height: 2.2rem;
    }
}
@media only screen and (min-width: 1366px) {
    .performance__progressbar--count{
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
}
@media only screen and (min-width: 1600px) {
    .performance__progressbar--count{
        font-size: 2.8rem;
        line-height: 2.8rem;
    }
}
.performance__progressbar--subtitle{
    font-size: 1.4rem;
    opacity: 0.5;
}
@media only screen and (max-width: 1199px) {
    .performance__progressbar--subtitle{
        font-size: 1.3rem;
        line-height: 2rem;
    }
}
.performance__progressbar--card__shape1{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}
.performance__progressbar--card__shape2{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}
.performance__progressbar--card__shape3{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

@media only screen and (max-width: 991px) {
    .col-lg-4.col-md-6.col-sm-6.mb-30.col-md-order {
        order: 1;
    }
}

@media only screen and (min-width: 480px) {
    .features__page--section{
        margin-top: 10rem;
    }
}
.card__gallery--thumb{
    padding: 0 0 2.5rem 3rem;
}
.card__cartnote--thumb{
    padding: 0 3rem 0;
}
.card__scrolling--text__thumb{
    padding: 0 0 3rem;
}
.card__recommended--thumb{
    padding: 0 3rem 0;
}
.card__trust--badge__thumb{
    padding: 0 4rem 4rem;
}
.title_exclusive_deals{
    background: linear-gradient(-45deg, #F1D43C 39%, #EE2761 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card__lookbook--thumb{
    padding: 0 5.5rem;
}
.card__hotspot--thumb{
    padding: 0;
}
.local__pickup--thumb2{
    padding: 0 0 0 3rem;
}
.card__product-badget__thumb{
    padding: 0 4rem 5rem;
}
.features__card--thumbnail.mega__menu--thumb.two {
    margin-top: -4rem;
    padding: 0 3rem 4rem;
}
.card__stock--alert__thumb{
    padding: 0 3rem;
}
.card__complementary--thumb{
    padding: 0 2rem 4rem;
}
.card__before--after__thumb{
    padding: 0 3rem 3rem;
}
.card__testimonial--thumb{
    padding: 0 3rem;
}
.card__sticky--header__thumb{
    padding: 0 0 0 3rem;
}
.card__store--locator__thumb{
    padding: 0 3rem 6rem 0;
}
.card__product--tabs__thumb{
    padding: 0 2rem 8rem;
}
.card__color--schemes__thumb{
    padding: 0 0 0 3rem;
}


.section__heading--title.theme-performanc-title{
    background: linear-gradient(-45deg, #FFFFFF 14%, #00FF37 94%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/*
    performance section css end
*/