@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: Gilroy;
  src: url(/assets/font/Gilroy-Regular.ttf);
}
* {
  font-family: "Inter", sans-serif;
  scroll-behavior: smooth;
}
body {
  background-size: 100% 100%;
}
.homepage {
  background-image: url(../images/svg/body-bg.svg);
}
.affiliate {
  background-image: url(../images/svg/affiliate-bg.svg);
}
.service {
  background-image: url(../images/svg/service-bg.svg);
}
/* accordion */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-content.open {
  max-height: 500px;
  transition: max-height 0.3s ease-in;
}

.chevron {
  transition: transform 0.3s ease;
}

.chevron.rotate {
  transform: rotate(180deg);
}

.accordion-item {
  transition: border-radius 0.3s ease;
}
.font-gilroy {
  font-family: Gilroy, sans-serif !important;
}
/* BACK TO TOP */
.back-to-top {
  right: calc((100vw - 1500px) / 2);
  pointer-events: none;
  transform: translateY(200%);

  @media (max-width: 1536px) {
    right: 16px;
  }
}

.back-to-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.button-shadow {
  box-shadow: 0px 4px 27.2px 0px #0098fd66;
}

.reviews-box-shadow {
  box-shadow: 0px 4px 15.5px 0px #00000014;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: #0098FD;
  border-radius: 6px;
}

#menuToggleButton {
  position: relative;

  span {
    transition: all 0.3s ease;
  }

  &.active {
    span:nth-child(1) {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      transform: translateY(-50%) rotate(45deg);
    }

    span:nth-child(2) {
      opacity: 0;
      width: 100%;
    }

    span:nth-child(3) {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      transform: translateY(-50%) rotate(-45deg);
    }
  }
}