/* Reset & Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
  font-family: "IBM Plex Sans", sans-serif;
}

/* Scrollbar Styling for Webkit Browsers */
::-webkit-scrollbar {
  width: 12px !important;
  height: 12px !important;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 10px !important;
  border: 3px solid var(--scrollbar-border);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
  background: var(--scrollbar-corner);
}

html {
  scroll-behavior: smooth;
}

a:active,
a:focus,
a:hover,
button:active,
button:focus,
button:hover,
input:active,
input:focus,
input:hover,
select:active,
select:focus,
select:hover,
textarea:active,
textarea:focus,
textarea:hover {
  border: none;
  box-shadow: none !important;
  outline: none;
}

input:active,
input:focus,
input:hover,
select:active,
select:focus,
select:hover,
textarea:active,
textarea:focus,
textarea:hover {
border: 1px solid var(--scrollbar-thumb)!important;
}

.section {
  width: 100%;
  height: 200px;
  background: #000;
  color: white;
  display: flex;
  position: relative;
 
}

.block {
  display: flex;
  position: relative;
}

.relative {
  position: relative;
}

.container {
  height: 100%;
  max-width: 1200px !important;
  display: block;
  z-index: 1;
  overflow: hidden !important;
}


/* Infinite Animations */
.infinite-bounce {
  animation: bounce 1.4s ease-in-out infinite;
}

.infinite-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.infinite-shake {
  animation: shake 1.2s ease-in-out infinite;
}

.infinite-rotate {
  animation: rotateInfinite 3s linear infinite;
}

.infinite-wiggle {
  animation: wiggle 1.5s ease-in-out infinite;
}

.infinite-blink {
  animation: blink 1.4s step-start infinite;
}

.infinite-spin {
  animation: spin 2.5s linear infinite;
}

/* Scroll-triggered Base */
.hidden-on-scroll {
  transform: translateY(50px) scale(0.8) rotate(0deg);
  transition: transform 0.8s ease-out;
}

/* Scroll Animations (no opacity) */
.slide-up {
  animation: slideUp 0.9s ease-out forwards;
}

.slide-up-out {
  animation: slideUpOut 0.9s ease-out forwards;
}

.slide-down {
  animation: slideDown 0.9s ease-out forwards;
}

.slide-down-out {
  animation: slideDownOut 0.9s ease-out forwards;
}

.zoom-in {
  animation: zoomIn 0.8s ease-in forwards;
}

.zoom-out-reverse {
  animation: zoomOutReverse 0.8s ease-in forwards;
}

.flip-x {
  animation: flipX 1s ease-in-out forwards;
}

.flip-x-out {
  animation: flipXOut 1s ease-in-out forwards;
}

.flip-y {
  animation: flipY 1s ease-in-out forwards;
}

.flip-y-out {
  animation: flipYOut 1s ease-in-out forwards;
}

.rotate {
  animation: rotateOnce 1.5s linear forwards;
}

/* --- KEYFRAMES --- */

/* Infinite */
@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {

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

  50% {
    transform: scale(1.05);
  }
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

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

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

@keyframes wiggle {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(3deg);
  }

  75% {
    transform: rotate(-3deg);
  }
}

@keyframes blink {

  0%,
  100% {
    visibility: visible;
  }

  50% {
    visibility: hidden;
  }
}

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

  to {
    transform: rotate(360deg);
  }
}

/* Scroll/Trigger Based */
@keyframes slideUp {
  from {
    transform: translateY(50px);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slideUpOut {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(50px);
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-50px);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slideDownOut {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50px);
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.8);
  }

  to {
    transform: scale(1);
  }
}

@keyframes zoomOutReverse {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0.8);
  }
}

@keyframes flipX {
  from {
    transform: rotateX(90deg);
  }

  to {
    transform: rotateX(0);
  }
}

@keyframes flipXOut {
  from {
    transform: rotateX(0);
  }

  to {
    transform: rotateX(90deg);
  }
}

@keyframes flipY {
  from {
    transform: rotateY(90deg);
  }

  to {
    transform: rotateY(0);
  }
}

@keyframes flipYOut {
  from {
    transform: rotateY(0);
  }

  to {
    transform: rotateY(90deg);
  }
}

@keyframes rotateOnce {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    width: inherit;
    height: inherit;
    z-index: -1;
    object-fit: cover;
  }