/* CSS Document */
/* NEW TIMER */
.flip-clock-wrapper ul {
	background: #f9a811 !important;
}
.flip-clock-wrapper ul li a div.up:after {
	background-color: #B1770C !important;
	background-color: rgba(0, 0, 0, 0.1) !important;
}
.flip-clock-wrapper ul li a div div.inn {
	color: #000 !important;
	font-family: fira sans extra condensed,Impact,sans-serif !important;
	text-shadow: 0 1px 1px rgba(0,0,0,0) !important;
	background-color: #f9a811 !important;
}
.flip-clock-dot {
	background: #B1770C !important;
}
.featuresItem__icon span::before {
    position: absolute;
    top: 50%;
    right: 0;
    width: 4px;
    height: 4px;
    background: linear-gradient(134.85deg, #1e64cd -4.75%, #90028c 80.59%);
    -webkit-transform: translateY(-45%) rotate(45deg);
    transform: translateY(-45%) rotate(45deg);
    content: "";
}
.featuresItem__icon span {
    position: absolute;
    top: 50%;
    left: calc(100% - 2px);
    width: 340px;
    height: 1px;
    background: linear-gradient(134.85deg, #1e64cd -4.75%, #90028c 80.59%);
}
.featuresItem__icon span.rev {
    left: unset;
    right: calc(100% - 2px);
}
.featuresItem__icon span.rev::before {
    right: unset;
    left: 0;
}
@media(max-width:1023px) {
	.featuresItem__icon span {
		display:none;
	}
}
.text-stroke {
	-webkit-text-stroke: 2px #775F00;
}
.glisten {
  position: relative;
  overflow: hidden;
	mask-size: cover; /* Ensure the mask covers the entire element */
  -webkit-mask-size: cover; /* WebKit version */
  mask-position: center; /* Ensure the mask is centered properly */
  -webkit-mask-position: center;
}
/* For scrolling down */
.glisten-active-down::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-30deg);
  animation: shineDown 4s forwards;
}

@keyframes shineDown {
  from {
    left: -150%;
  }
  to {
    left: 150%;
  }
}

/* For scrolling up */
.glisten-active-up::after {
  content: "";
  position: absolute;
  top: 0;
  left: 150%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-30deg);
  animation: shineUp 4s forwards;
}

@keyframes shineUp {
  from {
    left: 150%;
  }
  to {
    left: -150%;
  }
}
.bg-cta {
	position: absolute;
    inset: 0; /* Full container */
    overflow: hidden;
	background-image: url('../img/bg-cta.jpg'); /* Repeating background */
    background-size: cover; /* Start normal size */
    background-position: center;
    background-repeat: no-repeat;
	background-attachment: fixed;
}
.bg-modal {
	background-image: url('../img/bg-modal.jpg'); /* Repeating background */
    background-size: cover; /* Start normal size */
    background-position: center;
    background-repeat: no-repeat;
}
/* General Setup */
.bg-overlay {
	position: absolute;
    inset: 0; /* Full container */
	background: #131313;
	opacity: 0.5;
	z-index: 3;
}
/* First Animation */
.first-animation {
    position: absolute;
    inset: 0; /* Full container */
    background-image: url('../img/bg-top-plans.jpg'); /* Initial background */
    background-size: 100%; /* Start normal size */
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2; /* On top initially */
    animation: initial-scroll 120s linear forwards; /* One-time animation */
}
/* Infinite Animations - Container for Layers */
.bg-scroll-up {
    position: absolute;
    inset: 0; /* Full container */
    overflow: hidden;
}

/* Infinite Animations - Layers */
.bg-scroll-up::before,
.bg-scroll-up::after {
    content: '';
    position: absolute;
    inset: 0; /* Full container */
    background-image: url('../img/bg-top-plans.jpg'); /* Repeating background */
    background-size: 100%; /* Start normal size */
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    animation: continuous-scroll 120s linear infinite; /* Infinite animation */
    opacity: 1; /* Fully visible initially */
}

/* First Repeating Layer */
.bg-scroll-up::before {
    animation-delay: 0s; /* Start immediately */
}

/* Second Repeating Layer */
.bg-scroll-up::after {
    animation-delay: 42s; /* Start halfway into the first layer’s cycle */
}

/* Keyframes for Initial Animation (One-Time) */
@keyframes initial-scroll {
    0% {
        background-size: 100%; /* Start normal size */
        opacity: 1; /* Fully visible */
    }
    75% {
        opacity: 1; /* Stay fully visible until 175% size */
    }
    100% {
        background-size: 200%; /* Fully grown */
        opacity: 0; /* Fade out */
    }
}

/* Keyframes for Continuous Animation (Infinite) */
@keyframes continuous-scroll {
    0% {
        background-size: 100%; /* Start normal size */
        opacity: 1; /* Fully visible */
    }
    75% {
        opacity: 1; /* Stay fully visible until 175% size */
    }
    100% {
        background-size: 200%; /* Fully grown */
        opacity: 0; /* Fade out */
    }
}