@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi_Complete/Fonts/WEB/fonts/Satoshi-Regular.woff2') format('woff2'),
        url('../fonts/Satoshi_Complete/Fonts/WEB/fonts/Satoshi-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Integral";
    src: url("https://db.onlinewebfonts.com/t/f1fcc5aed1e20fc0cdb9f8a7573625bd.eot");
    src: url("https://db.onlinewebfonts.com/t/f1fcc5aed1e20fc0cdb9f8a7573625bd.eot?#iefix")format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/f1fcc5aed1e20fc0cdb9f8a7573625bd.woff2")format("woff2"),
        url("https://db.onlinewebfonts.com/t/f1fcc5aed1e20fc0cdb9f8a7573625bd.woff")format("woff"),
        url("https://db.onlinewebfonts.com/t/f1fcc5aed1e20fc0cdb9f8a7573625bd.ttf")format("truetype"),
        url("https://db.onlinewebfonts.com/t/f1fcc5aed1e20fc0cdb9f8a7573625bd.svg#Integral CF Regular")format("svg");
}

/* Usage example */
body {
    font-family: 'Satoshi', sans-serif;
}

.fontaddintegral {
    font-family: 'Integral', sans-serif;
}

.product-img-effect:hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease, margin-top 0.3s ease;
    transform: scale(1) rotate(.1deg);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    margin-top: 4px;
}

/* Our happy Customers Slider jQuery default style changed by custom css */
/* Mobile: Show single card fully visible */
.slider-for .slick-slide {
    filter: blur(0);
    opacity: 1;
}

/* Large screens: Blur everything by default */
@media (min-width: 1024px) {
    .slider-for .slick-slide {
        filter: blur(1px);
        opacity: 0.5;
        transition: filter 0.3s, opacity 0.3s;
    }

    /* Make only the 3 center cards fully visible */
    .slider-for .slick-center {
        filter: blur(0);
        opacity: 1;
    }

    /* Remove blur from the card before and after center */
    .slider-for .slick-center+.slick-slide,
    .slider-for .slick-center~.slick-slide.slick-cloned:first-of-type,
    .slider-for .slick-slide.slick-active:has(+ .slick-center),
    .slider-for .slick-center~.slick-slide:has(+ .slick-cloned) {
        filter: blur(0);
        opacity: 1;
    }
}

/* Slick Gap */
.slider-for .slick-track {
    display: flex;
    gap: 10px;
}

@media (min-width: 1024px) {
    .slider-for .slick-track {
        gap: 20px;
    }
}

/* Custom CSS for the typed js */
.typed-cursor {
    font-weight: bold;
    font-size: 30px;
    color: #000;
}

/* Typing GSAP */
  .typingText {
    background: linear-gradient(90deg, #000000, #310109, #5a0029);
    background-size: 200% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    font-weight: 600;
    animation: shine 3s linear infinite;
  }

  @keyframes shine {
    to {
      background-position: 200% center;
    }
  }