@font-face {
  font-family: 'Mattone';
  src: url('/assets/fonts/Mattone-Regular.woff2') format('woff2'),
       url('/assets/fonts/Mattone-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
.hero-title {
  font-family: 'Outfit', sans-serif;
}

.about-us h2 {
  color: #717171;
  font-weight: 600;
}

/* Base text */
.about-us .hover-text {
  color: #000;
  position: relative;
  display: inline-block;
  transition: 0.4s ease;
  cursor: pointer;

  /* Responsive font size */
  font-size: clamp(32px, 6vw, 76px);
  line-height: 1.1;
}

/* Background image clip on hover */
.about-us .hover-text:hover {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 200% auto;
  background-position: 0% center;
  animation: bgMove 3s linear infinite;
}

/* Different images */
.about-us .bg-nature:hover {
  background-image: url('/assets/img/green-tea-main.webp');
}

.about-us .bg-science:hover {
  background-image: url('/assets/img/ashwagandha-main.webp');
}

.about-us .bg-everyday:hover {
  background-image: url('/assets/img/vitamin-main.webp');
}

/* Animation */
@keyframes bgMove {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.animate-header {
  animation: headerSlide 0.8s ease forwards;
}

@keyframes headerSlide {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.commitment-quality .natural:hover {
  background-image: url('/assets/img/quality/100natural.png');
  color: white;
  background-size: cover;
  background-position: center;
}

.commitment-quality .uncompromised:hover {
  background-image: url('/assets/img/quality/qualitybgimage.webp');
  color: white;
  background-size: cover;
  background-position: center;
}

.commitment-quality .vegetarian:hover {
  background-image: url('/assets/img/quality/vegetarianbgimage.webp');
  color: white;
  background-size: cover;
  background-position: center;
}

.commitment-quality .soy-Free:hover {
  background-image: url('/assets/img/quality/soyfreebg.webp');
  color: white;
  background-size: cover;
  background-position: center;
}

.blogVerticalSwiper .swiper-slide {
    height: auto !important;
  }
.testimonialSwiper .swiper-wrapper {
  transition-timing-function: linear !important;
}
  .font-archivo {
    font-family: 'Archivo Black', sans-serif;
  }

  .trapezoid {
  --p: 50px; /* controls top cut */
  height: 180px;
  width: 100%;
  top: -20px;
  clip-path: polygon(49% 9%, 100% 9%, 100% 53%, 71% 53%, 67% 39%, 27% 40%, 24% 55%, 0 56%, 0% 35%, 0 10%);
  background-color: #F7F7F7;
}

@media (max-width: 640px) {
  .informationvideo video {
    height: 100vh;
  }
}