.main-header-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: top 0.3s, background-color 0.3s;
  z-index: 1000;
}
.main-header-box.active {
  background-color: #fff !important;
}
.color-orange {
	color: #E67700;
	text-decoration: underline;
}

canvas#collisionCanvas {
  display: block;
  background: #000;
}
.heading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: #333;
  z-index: 1;
}
.subtext {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  color: #555;
  z-index: 1;
}



.main-infinite-slider {
  width: 100%;
  position: relative;
}
.main-infinite-slider div.inner-slider {
  position: relative;
  animation: marquee 75s linear infinite;
}

.main-infinite-slider-logo div.inner-slider {
  position: relative;
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}




main#content {
	z-index: 1;
	position: relative;
	margin-bottom: 468px;
	box-shadow: 0px 0px 50px 0px #dcdcdc;
}
div.elementor.elementor-location-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 0;
}



.iphone-mockup {
            width: 300px;
            height: 630px;
            background: #000;
            border-radius: 40px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 5px solid #111;
	margin-left: auto;
        }

        /* Top notch */
        .notch {
            width: 120px;
            height: 25px;
            background: #222;
            border-radius: 12px;
            position: absolute;
            top: 14px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2;
        }

        /* CSS-Only Camera */
        .camera {
            width: 12px;
            height: 12px;
            background: radial-gradient(circle, #666, #111);
            border-radius: 50%;
            box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.2);
            position: absolute;
            left: 85%;
            transform: translateX(-50%);
        }

        /* Small Dot Sensor */
        .sensor {
            width: 5px;
            height: 5px;
            background: radial-gradient(circle, #666, #222);
            border-radius: 50%;
            position: absolute;
            left: 10px;
        }

        /* Power Button */
        .power-button {
            width: 4px;
            height: 50px;
            background: #222;
            position: absolute;
            right: -8px;
            top: 130px;
            border-radius: 2px;
        }

        /* Volume Buttons */
        .volume-buttons {
            position: absolute;
            left: -8px;
            top: 120px;
        }

        .volume-buttons div {
            width: 4px;
            height: 40px;
            background: #222;
            margin: 10px 0;
            border-radius: 2px;
        }
        .screen {
            width: 96%;
            height: 98%;
            background: #000;
            position: absolute;
            top: 1%;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 25px;
            overflow: hidden;
            z-index: 1;
        }

        .screen video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }


.line-animate-box.animated.fadeInUp h4 span {
	
}
.line-animate-box h4 span {
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #000; /* Adjust text color */
	text-decoration: none !important;
}

.line-animate-box h4 span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px; /* Adjust underline position */
    width: 100%;
    height: 4px; /* Adjust underline thickness */
    background-color: #C03030; /* Adjust underline color */
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease-in-out;
	transition-delay: 1s;
}

.line-animate-box.animated.fadeInUp h4 span::after {
    transform: scaleX(1);
    transform-origin: left;
}
























@media (max-width: 1172px) {
main#content {
	margin-bottom: 460px;
}
}
@media (max-width: 1151px) {
main#content {
	margin-bottom: 460px;
}
}
@media (max-width: 1024px) {
main#content {
	margin-bottom: 400px;
}
}

@media (max-width: 767px) {
main#content {
	margin-bottom: 330px;
}
.iphone-mockup {
	margin-left: auto;
	margin-right: auto;
        }
}
@media (max-width: 751px) {
main#content {
	margin-bottom: 330px;
}
}
@media (max-width: 616px) {
main#content {
	margin-bottom: 330px;
}
}