@tailwind base;
@tailwind components;
@tailwind utilities;
/* Base Styles */
.p {
  line-height: 1.75;
  font-weight: 300;
  font-size: 1rem; /* 16px */
  color: #000000;
}

.h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
}

.h2 {
  font-size: 3rem;
  line-height: 1;
  font-weight: 600;
  background: -webkit-linear-gradient(#0e9304, #2b2b2b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-title {
  margin-bottom: 0.75rem;
  font-family: Sora, sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.25 !important;
}

/* Marquee Slider */
.slider {
  height: 100px;
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.slider::before,
.slider::after {
  position: absolute;
  /*background-image: linear-gradient(to right, rgba(43,43,43,1) 0%, rgba(43,43,43,0) 100%);*/
  content: "";
  height: 100%;
  width: 25%;
  z-index: 2;
  pointer-events: none;
}

.slider::before {
  left: 0;
  top: 0;
}

.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

/* Sliding Track */
.slide-track2 {
  width: calc(150px * 15);
  display: flex;
  animation: scroll2 35s linear infinite;
  justify-content: space-between;
}
.slide-track2 .slide img {
  filter: grayscale(100%) brightness(0.6); /* faded look */
  transition: all 0.3s ease-in-out;
}

.slide-track2 .slide img:hover {
  filter: grayscale(0%) brightness(1); /* original color */
}

/* Individual Slides */
.slide {
  width: 150px;
  height: 60px;
  display: grid;
  place-items: center;
  transition: 0.5s;
  cursor: pointer;
}

.slide:hover {
  transform: scale(0.8);
}

/* Slide Up Animation */
@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slideUp 0.5s ease-out;
}

/* Scroll Animations */
@keyframes scroll {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-150px * 10));
  }
}

@keyframes scroll2 {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-150px * 5));
  }
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
  .slide-track {
    width: calc(80px * 20);
  }

  .slide-track2 {
    width: calc(80px * 15);
  }

  .slide {
    width: 80px;
  }

  @keyframes scroll {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-80px * 10));
    }
  }

  @keyframes scroll2 {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-80px * 5));
    }
  }
}

/* styles.css (Custom styles) */
.tab-button {
  display: block;
  width: 100%;
  padding: 12px;
  text-align: left;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
}
.tab-button.active,
.tab-button:hover {
  background: #22c55e;
}
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}

.tab-button[aria-selected="true"] {
  background-color: #22c55e !important;
  color: white !important;
}

/* captcha for OTP based form */
#recaptcha-container {
  position: absolute;
  top: -10000px;
  left: -10000px;
}
.modal {
  position: fixed;
  z-index: 9999; /* make sure modal is above everything */
}
.modal .verifyOtpBtn {
  pointer-events: auto !important;
}

/* Form highlated in landing pages */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-8px);
  }
  40%,
  80% {
    transform: translateX(8px);
  }
}
.highlight {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); /* glow */
  animation: shake 0.5s ease;
}