@charset "UTF-8";
/* snippet-banner-full-viewport-video START */
#snippet-banner-full-viewport-video {
    height: 100vh;
    background: var(--bs-primary) url('/public/images/banner.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.1), rgba(0, 0, 0, 0.0));
    }
    .fill-body {
        fill: var(--bs-body-bg);
    }
    .btn:hover {
        background: var(--bs-primary);
        color: #fff!important;
    }
    .typewrite-h, .buttons {
        padding: 25px 0;
    }
    .text-banner {
      position: absolute;
      bottom: 70px; /* ajustează după preferință */
      left: 0;
      width: 100%;
      text-align: center;
      z-index: 10;
    }
}
@media (max-width: 768px) {
    #snippet-banner-full-viewport-video {
        height: auto;
        padding-bottom: 75px;
        .text-banner {
            bottom: 0;
            top: 20px;
            position: relative; 
            font-size: 2rem;
        }
    }
}
/* Adding/removing aspect ratios, you get better viewed video but with empty spaces either on the sides or top/bottom; change according to the content of the video and desired result */
/*@media (min-aspect-ratio: 16/9) {
    #banner-video-vid {
        width: 100% !important;
        height: auto !important;
    }
}
@media screen and (min-width: 1290px) and (max-width: 1700px) {
    #banner-video-vid {
        width: 100% !important;
        height: auto !important;
    }
}*/
@media (max-aspect-ratio: 16/9) {
    #banner-video-vid {
        width: auto !important;
        height: 100% !important;
    }
}

/* start text animation */
.typewrite-h {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.typewrite-h .typewrite {
    position: relative;
    display: inline-block;
    min-height: 2.5rem;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}

.typewrite-h .typewrite .wrap {
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInOut 4s ease-in-out infinite;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.typewrite-h .text-white {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards 1s;
    white-space: nowrap;
    font-size: 2rem;
    font-weight: 300;
}

h2.fw-light {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards 0.5s;
    min-height: 2rem;
}

h2.fw-light .tagline {
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInOut 4s ease-in-out infinite;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
        transform: translateY(20px);
    }
    5%, 95% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* end text animation */

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