body::selection {
  background-color: #bef264;
  color: #000;
}

/* BillPayment page css */
.feature-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.25rem;
  padding: 1.5rem;
  color: #e5e5e5;
  transition: all 0.3s ease;
}
.feature-card:hover {
  border-color: #a3e635;
  transform: translateY(-4px);
}
/* Home page css */

/* Hides scrollbar for a cleaner look */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
/* Simple fade-in animation for the details */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fadeIn {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Scroll bar */
.scale-section {
  transform: scale(var(--scale, 1));
  transition: transform 0.25s ease-out;
}
/* HR */
.reveal-hr {
  width: 0;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center; /* expand from center outward */
  transition:
    transform 0.8s ease,
    opacity 0.6s ease;
}

.reveal-hr.active {
  width: 86%;
  transform: scaleX(1); /* fully expanded */
  opacity: 1;
}

/* HTML,Body */
html {
  scroll-behavior: auto;
}
body {
  background-color: black;
  color: #fff;
  font-family: poppins;
  scroll-behavior: auto;
  transition: all 0.4s easy;
  overflow-x: hidden;
}

/* NAVBAR */
nav,
nav * {
  position: relative;
  z-index: 30;
}

#nav {
  background: rgba(13, 13, 13, 0.5); /* light dark tint */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.07);
}

.reveal-heading span {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
}

/* Carousel */

.owl-carousel .owl-item .img1 {
  display: block;
  margin: auto;
  width: 30%;
}
.owl-carousel .owl-item {
  text-align: center;
}
#owl-demo .item {
  background: #42bdc2;
  padding: 30px 0px;
  margin: 10px;
  color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

/* Dot container */
.owl-dots {
  text-align: center;
  margin-top: 40px !important;
}

/* Default dot */
.owl-dot span {
  width: 12px !important;
  height: 12px !important;
  display: block;
  background: white !important; /* neutral gray */
  border-radius: 50%;
  transition:
    background-color 0.3s ease,
    transform 0.25s ease;
}

/* Hover effect */
.owl-dot:hover span {
  background: #a3e635 !important; /* lime-400 */
  transform: scale(1.15); /* optional subtle pop */
}

/* Active dot */
.owl-dot.active span {
  background: #bef264 !important; /* lime-300 */
  transform: scale(1.15);
}

/* slightly dim rest of page while the section is pinned */
.page-dim::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.07);
  pointer-events: none;
  z-index: 40;
}

/* Marquee */

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

.animate-scroll-left {
  animation: scroll-left 40s linear infinite;
}

.animate-scroll-right {
  animation: scroll-right 40s linear infinite;
}

/* RINGS */

@keyframes orbit-cw {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes orbit-ccw {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes counter-rotate-cw {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes counter-rotate-ccw {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* UTILITIES */
.animate-orbit-cw {
  animation: orbit-cw linear infinite;
}
.animate-orbit-ccw {
  animation: orbit-ccw linear infinite;
}
.fix-rotation-cw {
  animation: counter-rotate-cw linear infinite;
}
.fix-rotation-ccw {
  animation: counter-rotate-ccw linear infinite;
}

.duration-30s {
  animation-duration: 9s;
}
.duration-40s {
  animation-duration: 13s;
}
.duration-60s {
  animation-duration: 18s;
}

.pe-gradient {
  background: linear-gradient(135deg, #5f259f 0%, #9d4fd6 100%);
}

/* RESPONSIVE CONTAINER 
           Handles the static resizing for different screen sizes.
        */
.orbit-container-responsive {
  width: 80vmin; /* width relative to viewport */
  height: 80vmin;
  /* Scale based on viewport size */
  transform: scale(calc(85vmin / 800));
  min-width: 300px;
  min-height: 300px;
}

@media (min-width: 1000px) and (min-height: 1000px) {
  .orbit-container-responsive {
    transform: scale(1);
  }
}

/* --- GLOBAL PAUSE INTERACTION --- */
.orbit-container-responsive:has(.pointer-events-auto:hover) .animate-orbit-cw,
.orbit-container-responsive:has(.pointer-events-auto:hover) .animate-orbit-ccw,
.orbit-container-responsive:has(.pointer-events-auto:hover) .fix-rotation-cw,
.orbit-container-responsive:has(.pointer-events-auto:hover) .fix-rotation-ccw {
  animation-play-state: paused;
}

/* HOME PAGE */
/* WHY choose KBILL floating css */

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}
@keyframes float-delayed {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
  animation: float-delayed 7s ease-in-out infinite;
  animation-delay: 1s; /* Starts slightly later for natural feel */
}

/* Responsive about us PAGE */


/* ---------- INTRO SECTION ---------- */
@media (max-width: 1024px) {
  .intro-section {
    max-width: 100%;
  }
}

/* ---------- MISSION / CONTENT STACKING ---------- */
@media (max-width: 1024px) {
  .mission-content {
    padding-right: 0;
  }
}

/* ---------- IMAGE GRID RESPONSIVENESS ---------- */
@media (max-width: 1024px) {
  .image-grid {
    margin-top: 3rem;
  }

  .image-grid .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .image-grid .-mt-8,
  .image-grid .lg\\:-mt-40 {
    margin-top: 0 !important;
  }
}

@media (max-width: 640px) {
  .image-grid .grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ---------- TEXT SCALING FIX ---------- */
@media (max-width: 768px) {
  h2 {
    line-height: 1.25;
  }

  p {
    font-size: 1rem;
    line-height: 1.75;
  }
}

/* ---------- WHAT WE DO GRID ---------- */
@media (max-width: 768px) {
  .what-we-do-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- WHY US GRID ---------- */
@media (max-width: 768px) {
  .why-us-grid {
    grid-template-columns: 1fr !important;
  }

  .why-us-grid ul {
    padding-left: 1rem;
  }
}