* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  /* --blue: #003a81; */
  --blue: #1f2f55;
  --black: #131313;
  --para: #232323;
  --white: #fff;
  --bg: #dbeafe;
  --red: #c22f46;
}

body {
  font-family: 'Satoshi', sans-serif;
  background-color: #f9fafc;
}

/* hero  */

.exact-blue {
  clip-path: polygon(0 0, 42% 0, 100% 22%, 100% 100%, 0 100%);
  border-radius: 2px;
  border: none;
}
.exact-red {
  clip-path: polygon(0 0, 62% 0, 100% 22%, 100% 100%, 0 100%);
  border-radius: 2px;
  border: none;
}

/* about  */

.vision-section {
  height: 70vh;
}

.visionSwiper {
  height: 100%;
}

.slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background: #f3f4f6;
}

/* 🔥 PROGRESS BAR */
.progress-wrapper {
  position: absolute;
  bottom: 4px;
  left: 60px;
  width: 260px;
  z-index: 99;
}

.progress-track {
  width: 100%;
  height: 4px;
  background: rgba(0,0,0,0.2);
  overflow: hidden;
}

.vision-progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: red;
}


/* faingajsnd */
.lux-card{
  @apply relative bg-white/60 backdrop-blur-xl border border-white/40
  rounded-2xl p-7 text-center shadow-xl
  transition duration-500 hover:-translate-y-3 hover:shadow-[0_20px_50px_rgba(0,0,0,0.18)];
}

.lux-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  padding:1px;
  background:linear-gradient(120deg,#c22f46,transparent,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}

.lux-card span{
  @apply block text-4xl font-bold text-[#1f2f55];
}

.lux-card p{
  @apply mt-2 text-sm text-gray-600;
}

/* for footer */
.clip-diagonal-white {
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
}

.clip-diagonal-red {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 60%);
}

/* @media (max-width: 768px) {
  .exact-blue {
    clip-path: polygon(0 0, 75% 0, 100% 18%, 100% 100%, 0 100%);
  }
} */


  #counter-plus::after {
  content: "+";
}
