/** Shopify CDN: Minification failed

Line 88:13 Expected identifier but found "$"
Line 88:25 Unexpected "{"
Line 97:17 Expected identifier but found "$"
Line 97:29 Unexpected "{"
Line 100:17 Expected identifier but found "$"
Line 100:32 Unexpected "{"
Line 114:21 Expected identifier but found "$"
Line 114:33 Unexpected "{"
Line 117:21 Expected identifier but found "$"
Line 117:33 Unexpected "{"
... and 12 more hidden warnings

**/
/*--_year-of-expariance.scss start */
.counter-area .row{
    padding:2px;
}

.tmp-white-version {
    --color-heading: #141414;
    --color-gray: #5d6570;
    --color-body: #2a2d31;
    --color-gray-2: #F4F4F4;
    --color-border: #D9DDE0;
    --color-primary: #ff9001;
    --font-primary: "Rajdhani", sans-serif;
    --font-secondary: "Rubik", sans-serif;
    background: #ffffff;
}
.tmp-white-version .tmponhover {
    box-shadow: 2px 2px var(--color-primary);
    transition: 0.3s;
}

.tmponhover {
		box-shadow: 2px 2px var(--color-primary);
		transition: .3s;
		&:hover{
			box-shadow: none;
		}
	}

.tmp-white-version .row>* {
    padding-right: calc(var(--bs-gutter-x) /4);
    padding-left: calc(var(--bs-gutter-x) / 4);
    margin-top: var(--bs-gutter-y);
}

.counter-area-right-content .g-5,.counter-area-right-content .gy-5 {
    --bs-gutter-y: 1.2rem;
}
.year-of-expariance-wrapper {
    position: relative;
    overflow: hidden;
    background: var(--color-gray-2);

    &.bg-blur-style-one,
    &.bg-blur-style-two,
    &.bg-blur-style-three {
        &::after {
            content: " ";
            position: absolute;
            right: -250px;
            bottom: -367px;
            min-width: 474px;
            min-height: 474px;
            border-radius: 100px;
            filter: blur(227px);
            z-index: -1;
        }
    }

    &.bg-blur-style-one {
        &::after {
            background: var(--color-primary);
        }
    }

    border-radius: 20px;
    padding: 36px 30px 51px 30px;

    @media (min-width: 1400px) {
        padding: 36px 30px 51px 30px;
    }

    @media #{$sm-layout} {
        padding: 30px 20px;
    }

    .year-expariance-wrap {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        @media #{$lg-layout} {
            gap: 20px;
        }
        @media #{$large-mobile} {
            display: block;
        }
        @media (min-width: 568px) {
            gap: 44px;
        }
        .year-number {
            color: var(--color-primary);
            font-family: var(--font-primary);
            font-size: 167px;
            line-height: 115%;
            font-weight: 700;
            margin-bottom: 0;
            flex-basis: auto;
            @media #{$lg-layout} {
                font-size: 100px;
            }
            @media #{$md-layout} {
                font-size: 100px;
            }
            @media #{$sm-layout} {
                font-size: 100px;
                line-height: 1;
            }
        }
        .year-title {
            color: var(--color-heading);
            font-family: var(--font-primary);
            font-size: 48.14px;
            font-weight: 700;
            line-height: 130%;
            text-transform: capitalize;
            margin-bottom: 0;
            @media #{$lg-layout} {
                font-size: 37px;
            }
            @media #{$md-layout} {
                font-size: 37px;
            }
            @media #{$sm-layout} {
                font-size: 32px;
                br{
                    display: none;
                }
            }
            @media #{$large-mobile} {
                font-size: 26px;
                br{
                    display: none;
                }
            }
        }
    }
    .year-para {
        color: var(--color-heading);
        font-family: var(--font-secondary);
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        margin-top: 12px;
    }
}


.counter-card {
    padding: 34px 7px;
    border-radius: 20px;
    background: var(--color-gray-2);
    height: 100%;
    .counter-title {
        color: var(--color-heading);
        text-align: center;
        font-family: var(--font-primary);
        font-size: 48px;
        font-weight: 700;
        line-height: 60px;
        text-transform: capitalize;
        margin-bottom: 0;
        @media #{$laptop-device} {
            font-size: 40px;
        }
    }
    .counter-para {
        color: var(--color-gray);
        text-align: center;
        font-family: var(--font-secondary);
        font-size: 16px;
        font-weight: 400;
        line-height: 30px;
        margin-top: 4px;
    }
}
/*--_year-of-expariance.scss end */

/* animation custom start*/
/* Zoom in image on scroll */
.animate--zoom-in {
  --zoom-in-ratio: 1;
}

.animate--zoom-in>img,
.animate--zoom-in>svg {
  transition: scale var(--duration-short) linear;
  scale: var(--zoom-in-ratio);
}

:root {
  --duration-announcement-bar: 250ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;
  --duration-extra-long: 600ms;
  --duration-extra-longer: 750ms;
  --duration-extended: 3s;
  --animation-slide-in: slideIn var(--duration-extra-long) ease forwards;
  --animation-fade-in: fadeInUp var(--duration-extra-long) ease forwards;
  --animation-zoom-in: zoomIn var(--duration-extra-longer) ease forwards;
  --animation-zoom-out: zoomOut var(--duration-extra-longer) ease forwards;
}

/* Animations */

@media (prefers-reduced-motion: no-preference) {

  .animate--ambient>img,
  .animate--ambient>svg {
    animation: animateAmbient 30s linear infinite;
  }

  @keyframes animateAmbient {
    0% {
      transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
    }

    100% {
      transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
    }
  }

  .tmp-scroll-trigger:is(.tmp-zoom-in, .zoom_out, .tmp-fade-in, .slide_in) {
    opacity: 0.01;
  }

  .tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen).tmp-zoom-in {
    animation: var(--animation-zoom-in);
    animation-delay: calc(var(--animation-order) * 75ms);
  }

  .tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen).zoom_out {
    animation: var(--animation-zoom-out);
    animation-delay: calc(var(--animation-order) * 75ms);
  }

  .tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen).tmp-fade-in {
    animation: var(--animation-fade-in);
    animation-delay: calc(var(--animation-order) * 75ms);
  }

  .tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen).slide_in {
    animation: var(--animation-slide-in);
    animation-delay: calc(var(--animation-order) * 75ms);
  }

  .tmp-scroll-trigger.tmp-scroll-trigger--design-mode.tmp-fade-in,
  .tmp-scroll-trigger.tmp-scroll-trigger--design-mode.slide_in,
  .tmp-scroll-trigger.tmp-scroll-trigger--design-mode .slider,
  .tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen).tmp-scroll-trigger--cancel {
    opacity: 1;
    animation: none;
    transition: none;
  }

  .tmp-scroll-trigger[animation-end] {
    opacity: 1;
    animation: none !important;
    transition: none;
  }

  /* .collection-tab__tab-content
      .tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen).tmp-zoom-in {
      animation-delay: calc(0.5s + var(--animation-order) * 75ms);
    } */
  .tmp-scroll-trigger.tmp-scroll-trigger--design-mode.slide_in {
    transform: translateY(0);
  }

  @keyframes slideIn {
    from {
      transform: translateY(1rem);
      opacity: 0.01;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes zoomIn {
    from {
      opacity: 0;
      transform: scale(1.05);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes zoomOut {
    from {
      opacity: 0;
      transform: scale(1);
    }

    to {
      opacity: 1;
      transform: scale(1.05);
    }
  }
}

@media screen and (max-width: 989px) {
  .tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen) .slider--tablet {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen) .slider--desktop {
    animation: var(--animation-slide-in);
  }
}

.tmp-scroll-trigger.tmp-scroll-trigger--design-mode.tmp-fade-in,
.tmp-scroll-trigger.tmp-scroll-trigger--design-mode.slide_in,
.tmp-scroll-trigger.tmp-scroll-trigger--design-mode .slider,
.tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen).tmp-scroll-trigger--cancel {
  opacity: 1;
  animation: none;
  transition: none;
}

.tmp-scroll-trigger.tmp-scroll-trigger--design-mode.slide_in {
  transform: translateY(0);
}

@keyframes slideIn {
  from {
    transform: translateY(2rem);
    opacity: 0.01;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0.01;
  }

  to {
    opacity: 1;
  }
}

@for $i from 0 through 50 {
  .animation-order-#{$i} {
    --animation-order: #{$i};
  }
}
/* animation custom end*/