body,
h1,
h2,
h3,
h4,
h5,
h6,
a,
input,
textarea,
label,
button,
table,
li {
  font-family: "Poppins", sans-serif;
}

:root {
  --primary-color: #c0022d;
  --secondary-color: #5a0115;
}
html {
  scroll-behavior: smooth;
}

body {
  background-color: #000;
  overflow-x: hidden !important;
}
/* Tokoyo Font */
@font-face {
  font-family: "Tokyo2097";
  src: url("fonts/Tokyo2097.eot");
  src:
    url("../fonts/Tokyo2097.eot") format("embedded-opentype"),
    url("../fonts/Tokyo2097.woff2") format("woff2"),
    url("../fonts/Tokyo2097.woff") format("woff"),
    url("../fonts/Tokyo2097.ttf") format("truetype"),
    url("../fonts/Tokyo2097.svg#Tokyo2097") format("svg");
}

@keyframes colorShift {
  0% {
    color: #00be90;
  }
  33% {
    color: yellow;
  } /* Yellow */
  66% {
    color: red;
  } /* Red */
  100% {
    color: rgb(0, 47, 255);
  }
}
/* Circular Rotation */
@keyframes circularmotion {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Circular Rotation */
@keyframes updown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
/* Circular Rotation */
@keyframes rocket {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-10px, -10px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.animate-rocket {
  animation: rocket 3s infinite linear;
}
.animate-updown {
  animation: updown 3s infinite linear;
}
.animate-color-change {
  animation: colorShift 10s infinite linear;
}

.font-tokoyo {
  font-family: "Tokyo2097";
}

.circular-animation {
  animation: circularmotion 10s infinite linear;
}

/* Portfolio */
.tab-btn {
  @apply px-8 py-3 rounded-full border border-gray-800 text-gray-400 font-bold uppercase text-xs tracking-widest transition-all duration-300 hover:border-[var(--primary-color)] hover:text-white;
}

.active-tab {
  @apply bg-[var(--primary-color)] border-[var(--primary-color)] text-white shadow-[0_0_20px_rgba(255, 0, 0, 0.3)];
}

.portfolio-item.hidden {
  display: none;
}

.package-details {
  height: 250px;
  overflow-y: scroll;
  padding-top: 20px;
  padding-bottom: 20px;
}
.package-details::-webkit-scrollbar {
  width: 6px;
  background-color: var(--secondary-color);
  border-radius: 10px;
}
.package-details::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 10px;
}