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

/*----------------------------------------*/
/*  7.7 Counter css
/*----------------------------------------*/
.counter {
    &-content {
        & .count {
            font-size: 80px;
            color: var(--tp-heading-primary);
            margin-bottom: 0;
            position: relative;
            font-family: var(--tp-ff-heading);
            display: inline-block;
            font-style: normal;
            line-height: 1;
            font-weight: normal;
            &::after {
                content: "+";
                color: var(--tp-heading-primary);
                font-size: 80px;
            }
            & .odometer.odometer-auto-theme, .odometer.odometer-theme-default {
                transform: translateY(-10px);
            }
        }
    }
}
.counter-item-3 {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    padding: 27px 31px;
    margin: 80px 0 80px 0;
    @media #{$xs} {
        margin: 20px 0 20px 0;
    }
    & .count {
        font-weight: 400;
        color: var(--tp-common-white);
        font-size: 48px;
        line-height: 1;
        &::after {
            content: "+";
            color: var(--tp-common-white);
            font-size: 48px;
            transform: translateY(-4px);
            display: inline-block;
        }
        & .odometer.odometer-auto-theme, .odometer.odometer-theme-default {
            transform: translateY(-10px);
        }
    }
    & .counter-content p {
        font-size: 24px;
        line-height: 1.3;
        font-weight: 400;
        color: var(--tp-common-white);
        margin-bottom: 0;
        margin-top: -13px;
        @media #{$lg} {
            font-size: 17px;
        }
    }
}
.counter-6 {
    &-content {
        & .count {
            font-size: 112px;
            line-height: 1.1;
            color: rgba(72, 30, 11, 0.1);
            position: relative;
            font-style: normal;
            font-family: var(--tp-ff-heading);
            @media #{$lg} {
                font-size: 80px;
                margin-bottom: 0;
            }
            &::after {
                content: "+";
                color: rgba(72, 30, 11, 0.1);
                font-size: 80px;
              }
            & .odometer.odometer-auto-theme {
                transform: translateY(-15px);
            }
        }
    }
    &-item {
        position: relative;
        &  p {
            position: absolute;
            display: block;
            transform: translateY(-50%);
            margin-bottom: 0;
            left: 45px;
            bottom: 45%;
            font-size: 24px;
            color: var(--tp-heading-primary);
            line-height: 1.5;
            @media #{$xl} {
                left: 20px;
            }
            @media #{$lg} {
                position: inherit;
                transform: translateY(0%);
                margin-bottom: 0;
                left: 0;
                bottom: 0;
                font-size: 20px;
            }
            @media #{$xs} {
                position: inherit;
                transform: translateY(-100%);
            }
        }
    }
}
.sponsore-2 {
    & .tpsection-title {
        color: var(--tp-common-white);
    }
    & .tpsection p {
        color: var(--tp-common-white);
        margin-bottom: 55px;
        & br {
            @media #{$xl,$xs} {
                display: none;
            }
        }
    }
    &-item {
        background: rgba(255, 255, 255, .1);
        border-radius: 6px;
        height: 220px;
        width: 220px;
        text-align: center;
        line-height: 220px;
    }
}
.category-7 {
    padding-top: 50px;
    &-active {
        & .swiper-slide {
            @include transition (.5s);
        }
        & .swiper-slide-active {
            margin-top: -50px;
        }
    }
    &-thumb {
        margin-bottom: 10px;
        overflow: hidden;
        &:hover{
            & img {
                transform: scale(1.08);
            }
        }
        & img {
            @include transition(.3s);
            width: 100%;
        }
    }
    &-content {
        & a {
            font-weight: 400;
            font-size: 24px;
            line-height: 1.5;
            color: var(--tp-common-black);
            background-image: linear-gradient(#CD5F37, #CD5F37), linear-gradient(#CD5F37, #CD5F37);
            display: inline;
            background-size: 0% 1px, 0 1px;
            background-position: 100% 100%, 0 93%;
            background-repeat: no-repeat;
            transition: background-size 0.4s linear;
            @include transition(.3s);
            &:hover {
                background-size: 0 1px, 100% 1px;
                color: var(--tp-theme-primary);
            }
        }
    }
}
.category-7-arrow,
.testimonial-7-arrow {
    & span {
        height: 80px;
        width: 80px;
        line-height: 72px;
        text-align: center;
        border-radius: 50%;
        background-color: transparent;
        border: 2px solid #CD5F37;
        color: var(--tp-theme-primary);
        color: var(--tp-theme-primary);
        display: inline-block;
        @include transition (.3s);
        position: relative;
        z-index: 1;
        &::before {
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            background-color: var(--tp-theme-primary);
            border-radius: 50%;
            transform: scale(0);
            z-index: -1;
            @include transition(.2s);
        }
        &:hover {
            color: var(--tp-common-white);
            &::before {
                transform: scale(1.05);
            }
        }
    }
}