/* 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: smooth;
}
body {
  background-color: black;
  color: #fff;
  font-family: poppins;
  scroll-behavior: smooth;
  transition: all 0.4s easy;
  overflow-x: hidden;
}

/* NAVBAR */
nav,
nav * {
  position: relative;
  z-index: 30;
}
section:nth-of-type(2) {
  margin-top: -5.5rem;
}

#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;
}