/* assets/css/style.css */

/* Responsive YouTube background video */
.video-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

/* Mobile Portrait (vertical phone) — fill height, crop sides */
@media (orientation: portrait) {
    .video-iframe {
        width: 177.78vh;
        /* 16:9 ratio */
        height: 100vh;
    }
}

/* Desktop & Landscape — fill width, crop top/bottom */
@media (orientation: landscape) {
    .video-iframe {
        width: 100vw;
        height: 56.25vw;
        /* 9/16 ratio */
    }
}

/* Optional: subtle hover glow for social buttons */
.social-btn:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}


/* Background Animation Effects */
@keyframes float {

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

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

@keyframes float-slow {

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

    50% {
        transform: translateY(25px);
    }
}

@keyframes gradient-move {
    0% {
        transform: translateX(-15%) translateY(-10%);
    }

    50% {
        transform: translateX(10%) translateY(10%);
    }

    100% {
        transform: translateX(-15%) translateY(-10%);
    }
}

.animate-gradient {
    animation: gradient-move 12s ease-in-out infinite alternate;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-slow {
    animation: float-slow 9s ease-in-out infinite;
}

/* Floating Effects */
@keyframes smoothFloat {

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

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

.animate-float-icon {
    animation: smoothFloat 6s ease-in-out infinite;
}

/* Testimonials Slider */
.testimonial-slide {
    display: none;
}

.testimonial-slide.active {
    display: block;
}

/* Glow Line Animation */
@keyframes pulseLine {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.animated-line {
    animation: pulseLine 2s ease forwards;
}

.testimonial-slide {
    min-height: 240px;
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.testimonial-slide.active {
    display: block;
    opacity: 1;
}
    /* <!-- Floating Animation CSS --> */
@keyframes float {

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

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

.animate-float {
    animation: float 5s ease-in-out infinite;
}

.animate-float-delay {
    animation: float 7s ease-in-out infinite;
}