@import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --dark-surface: #27272a;
}

html {
  scroll-behavior: smooth;
}

body {
  /* font-family: "Varela Round", sans-serif; */
  font-family: "Urbanist", sans-serif;
}

/* Remove arrows in Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hero {
  background: url(../../assets/images/new-image/background.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.hidden-change {
    opacity: 0;
}

.faded {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(40%);
    transition: all 1s ease;
} 

.fade-in {
    opacity: 0;
    filter: blur(5px);
    transition: all 1s ease;
} 

.fade-left {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(40%);
    transition: all 1s ease;
}

.fade-right {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-40%);
    transition: all 1s ease;
}

.fade-down {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(-40%);
    transition: all 1s ease;
} 

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

.reveal {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

.expose {
  opacity: 1;
  filter:blur(0)
}

/* .image-group img {
  filter: grayscale(100%);
} */

.logo-slider {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slide-track {
  display: flex;
  width: calc((150px + 2rem) * 12); /* adjust if needed */
  animation: scroll 20s linear infinite;
}

.logo-slider:hover .slide-track, .scroll-main_container:hover .slide-track-two, .scroll-main_container:hover .slide-track-three {
  animation-play-state: paused;
}



.slide-track-two {
  width: calc((350px + 2rem) * 6);
  animation: scroll 40s linear infinite;
}

.slide-track-three {
  width: calc((350px + 2rem) * 10);
  animation: scroll 40s linear infinite;
}

.value-div {
  margin-right: 2rem;
}

.logo {
  width: 150px;
  height: 60px;
  object-fit: contain;
  margin-right: 2rem;
}

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


.card-area::-webkit-scrollbar {
  display: none;
}

#service-image {
    opacity: 0;
    transition: opacity .6s ease-in-out;
}
#service-image.show {
    opacity: 1;
}

.transparent {
  height: 200px;
  bottom: 0;
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(243, 243, 245, 0) 0%,
    rgba(243, 243, 245, 0.3) 47.99%,
    #f3f3f5 100%
  );
  z-index: 3;
}

/* Remove arrows in Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.frosted-card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.72),
    rgba(255, 255, 255, 0.68)
  );

  /* use Tailwind utilities for blur in markup; add explicit rules for broader support */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
}

@supports not (
  (-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))
) {
  .frosted-card {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.92),
      rgba(255, 255, 255, 0.9)
    );
    border: 1px solid rgba(0, 0, 0, 0.04);
  }
}

.logo-stack-child img {
  width: 100%;
  height: auto;
}

button:not(:disabled):active {
  animation: scalingOut 0.5s ease-in-out;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.payroll {
  display: block;
}

.preloader {
  animation: scalingOut 1s ease-in-out infinite;
}

.safe-h-screen {
  height: calc(var(--vh, 1vh) * 100);
}

.animate-scale {
  animation: scaleInOut 1s ease-in-out;
}

.animate-scale-two {
  animation: scaleInOutSecond 0.3s ease-in-out;
}

.animate-scale-out {
  animation: scaleOut 0.3s ease-in-out;
}

.active-menu svg {
  fill: #fb2c36;
}

.active-menu span {
  color: #fb2c36;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-in {
  animation: slideInRight 0.3s ease-out forwards;
}

.infiniteScale {
  animation: scaling 2s ease-out infinite;
}

.recent::-webkit-scrollbar {
  display: none;
}

td,
th {
  /* border-bottom: 1px solid #dddddd; */
  text-align: left;
  padding: 20px 10px;
}

th {
  font-weight: 700;
  /* background: gray;
  color: white; */
  padding: 10px 10px;
}

.second-card {
  background-repeat: no-repeat;
  background-size: 50%, cover;
  background-position: right center, center center;
}

@keyframes scaleInOut {
  0% {
    transform: scale(0.8);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes scaling {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes scaleInOutSecond {
  0% {
    transform: scale(0.6);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes scaleOut {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.6);
  }
}

@keyframes scalingOut {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.96);
  }

  100% {
    transform: scale(1);
  }
}

.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.step-content {
  overflow: hidden;
}

.cover {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  /* border: 1px solid rgba(255, 255, 255, 0.3); */
}