@charset "UTF-8";
/* snippet-banner-full-viewport-video START */
#snippet-banner-full-viewport-video {
    height: 55vh;
    /*hide this if you want the video instead of the image; background: var(--bs-secondary) url('/public/images/banner-bgr.jpg') no-repeat center /cover;*/
    overflow: hidden;
    /* Keep the position of the video with the min/max-aspect-ratios below for full videos but empty spaces on the sides or remove aspect-ratios and change video positioning to focus something in the video */
    #banner-video-vid {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: 100%;
      height: auto;
      z-index: 0;
      -ms-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
    }
    .bg-overlay {
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to bottom, rgba(0,0,0, 0.8), rgba(0, 0, 0, 0.2));
    }
    .fill-body {
        fill: var(--bs-body-bg);
    }
    .btn:hover {
        background: var(--bs-primary);
        color: #fff!important;
    }

    
}
@media (max-width: 768px) {
    #snippet-banner-full-viewport-video {
        height: auto;
        padding-bottom: 75px;
    }
}


.animated-heading {
    /* No animation on parent — just styling */
}

.animated-heading span {
    opacity: 0;
    display: inline-block;
    /* Ensure no layout shift */
}

/* Total cycle: 9s = 4s (staggered in) + 2s (hold) + 1s (fade out) + 2s (empty) */
/* Each word appears at 0s, 1s, 2s, 3s and stays until 6s, then fades out at 6–7s */

.word1 { animation: wordCycle 9s 0s infinite; }
.word2 { animation: wordCycle 9s 1s infinite; }
.word3 { animation: wordCycle 9s 2s infinite; }
.word4 { animation: wordCycle 9s 3s infinite; }

@keyframes wordCycle {
    /* 0%–0%: hidden (before start) */
    0% {
        opacity: 0;
    }
    
    /* Fade in over 1s (but this animation starts at different times per word) */
    0.01% {
        opacity: 0;
    }
    11.11% { /* 1s / 9s ≈ 11.11% */
        opacity: 1;
    }
    
    /* Stay visible until 6s mark (66.66% of 9s) */
    66.66% {
        opacity: 1;
    }
    
    /* Fade out from 6s to 7s (66.66% → 77.77%) */
    77.77% {
        opacity: 0;
    }
    
    /* Remain hidden until end of cycle (77.77% → 100%) */
    100% {
        opacity: 0;
    }
}

/* Individual span animations */
.delay1 {
    animation: fadeIn 1s 0s forwards;
}

.delay2 {
    animation: fadeIn 1s 1s forwards;
}

.delay3 {
    animation: fadeIn 1s 2s forwards;
}

.delay4 {
    animation: fadeIn 1s 3s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}



/* snippet-banner-full-viewport-video END */