@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.cdnfonts.com/css/satoshi");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Satoshi", sans-serif;
  scroll-behavior: smooth;
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}
.SatoshiBlack {
  font-family: "SatoshiBlack";
}

.SatoshiBold {
  font-family: "SatoshiBold";
}
.headerBackground {
  background: linear-gradient(230.91deg, #e400ec08 15.3%, #4300f908 84%);
  border: 1px solid rgba(227, 0, 235, 0.5);
  backdrop-filter: blur(15px);
}

.text-gradient {
  background: linear-gradient(230.91deg, #E400EC 15.3%, #4300F9 84%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bg-gradient-purple-pink {
  background: linear-gradient(90deg, #e400ec 0%, #4300f9 100%);
}

.herobg {
  background-image: url("public/assets/images/heroBG.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  /* height: 100vh; */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.inHeroBg {
  /* background-image: url("public/assets/images/round_logos_laptop.png"); */
    background-image: url("public/assets/images/inercut.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.linear-gradient-custom {
  background: linear-gradient(
    143.2deg,
    rgba(226, 190, 255, 0.5) 4.15%,
    rgba(255, 255, 255, 0) 75.06%
  );
}

.linear-gradient-custom2 {
  background: linear-gradient(
    -143.2deg,
    rgba(226, 190, 255, 0.5) 4.15%,
    rgba(255, 255, 255, 0) 75.06%
  );
}

.linear-gradient-custom3 {
  background: linear-gradient(
    214.62deg,
    rgba(255, 255, 255, 0) 27.62%,
    rgba(226, 190, 255, 0.5) 98.61%
  );
}

.box {
  background: linear-gradient(
    138.21deg,
    rgba(217, 193, 241, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.box2 {
  background: linear-gradient(
    -138.21deg,
    rgba(217, 193, 241, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.subbox {
  background: linear-gradient(
    138.21deg,
    rgba(217, 193, 241, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.box3 {
  background: linear-gradient(
    150.52deg,
    rgba(226, 190, 255, 0.5) 1.35%,
    rgba(255, 255, 255, 0) 30.62%
  );
}

.gradient-text {
  background: linear-gradient(90deg, #e400ec 0%, #4300f9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@font-face {
  font-family: "SatoshiBlack";
  src: url("public/assets/fonts/Satoshi-Black.otf") format("ttf");
  font-display: swap;
}

@font-face {
  font-family: "SatoshiBold";
  src: url("public/assets/fonts/Satoshi-Bold.otf") format("ttf");
  font-display: swap;
}

@font-face {
  font-family: "Satoshimedium";
  src: url("public/assets/fonts/Satoshi-Medium.otf") format("ttf");
  font-display: swap;
}

@media only screen and (max-width: 767px) {
  .herobg {
    /* background-image: url("public/assets/images/heroBGMobile.png"); */
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    /* height: 100vh; */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }

  .inHeroBg {
    /* background-image: url("public/assets/images/round_logos.png"); */
      background-image: url("public/assets/images/cutimage_mobile.png");
    background-size: contain;
    background-position: center;
    height: 350px;
    background-repeat: no-repeat;
  }
}


@media (min-width: 1024px) {
  .width100 {
    width: 100%;
  }
  .paddingLeft
  {
    padding-left: 40px;
  }
}

.supportbg {
  background: linear-gradient(
    360deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(226, 190, 255, 0.5) 80%
  ) no-repeat;
    background-size: 100% 500px;
}

.fromgb {
  background: linear-gradient(
    180deg,
    rgba(226, 190, 255, 0.5) 30%,
    rgba(255, 255, 255, 0) 70%
  );
}

/* Tutorial CSS */
.box_bottom_left_gradient{
  background: linear-gradient(
    315deg,
    rgba(226, 190, 255, 0.5) 1.35%,
    rgba(255, 255, 255, 0) 30.62%
  );
}

.FAQQuestionMainBox svg {
  rotate: 0deg;
  transition: rotate 0.2s ease-in-out;
}

.FAQQuestionMainBox:has(.open) svg {
  rotate: 180deg;
}
/* Reverse direction of scroll animation */
@keyframes marquee1 {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0%);
  }
}

.leftToRight .slick-track {
  animation: marquee1 40s linear infinite;
}