@import url("https://fonts.googleapis.com/css2?family=Inter");
@import url("https://fonts.googleapis.com/css2?family=Zain:ital,wght@0,200;0,300;0,400;0,700;0,800;0,900;1,300;1,400&display=swap");

:root {
  --primary: #163723;
  --secondary: #8dd831;
  --black: #2a2a2a;
  --background: white;
  --orange: #fdc700;
}

* {
  scroll-behavior: smooth;
  font-family: "Inter", sans-serif;
}

body {
  background: var(--background);
  color: var(--black);
}

.heading__font {
  font-family: "Zain", sans-serif;
}

.hero__bg {
  background: url("../images/banners/hero-banner.webp") no-repeat center;
  background-size: cover;
}

.hero__overly {
  background: linear-gradient(
    0deg,
    rgba(9, 18, 12, 0.911) 0%,
    rgba(0, 0, 0, 0.12) 100%
  );
}

.shiny-btn {
  position: relative;
  overflow: hidden;
}

.shiny-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: shine 4s ease-in-out infinite;
}

@keyframes shine {
  0% {
    left: -75%;
  }
  25% {
    left: 125%;
  }
  100% {
    left: 125%;
  }
}

[data-tab-button].active img {
  /* override the transparent border */
  border-color: var(--orange) !important;
}
[data-tab-button].active p {
  /* switch the text color */
  color: var(--orange) !important;
}

svg {
  flex: none;
}