body {
    overflow-x: hidden!important;
    color: var(--color6)!important;
}
/* Efeitos imagens e botões */
.irregulares {border-radius:0 45% 0 45%}
.irregularesb {border-radius:0 50% 50% 50%}
.borda-leftb {border-left:10px solid var(--color3t)}
.meia-lua {border-radius:50% 0 0 50%;border-left:15px solid var(--color3t)}
.borda-meio-circulo {border-radius:50% 0 50% 50%;border-left:5px solid var(--color3t);border-bottom:20px solid var(--color3t)}
.borda-dupla {border:2px solid #fff;padding:12px 22px;box-shadow:0 0 0 1px #28c76f;}
.grayscale {filter: grayscale(100%);opacity: .7;transition: .3s ease;}

/* Links gerais */
a,a:link,a:visited {color: var(--color6);text-decoration: none;}
a:hover,a:focus {color: var(--color6);text-decoration: none; }
a:active {color: var(--color6);text-decoration: none;}

/* Depoimentos Gerenciado */
.depoimento-card input {display: none;}
.card-content {width: 60px;height: 60px;border: 1px solid #e1e1e1;border-radius: 10px;display: flex;align-items: center; justify-content: center;transition: .3s ease;cursor: pointer;}
/* estado padrão */
/* quando selecionado */
.depoimento-card input:checked + .card-content .grayscale {filter: grayscale(0);opacity: 1;transform: scale(1.05);}
/* destaque do card ativo */
.depoimento-card input:checked + .card-content {border-color: #d1d1d1;box-shadow: 0 4px 12px rgba(0,0,0,.08);}

/* Oculta o radio Layout*/
.template-option input { display: none;}
/* Card */
.card-option {cursor: pointer; transition: all 0.3s ease;}
/* Imagem começa em grayscale */
.card-option img { width: 100%; filter: grayscale(100%); opacity: 0.7;transition: all 0.3s ease;}
/* Hover melhora um pouco */
.template-option:hover .card-option img { filter: grayscale(40%); opacity: 0.9;}
.template-option input:checked + .card-option img {filter: grayscale(0%); opacity: 1;transform: scale(1.02);}

/* Botões do WhatsApp para capa */
/* Estado padrão */
.modelo2 {
    background-color: var(--color7) !important; /* fundo padrão */
    color: #fff !important;                     /* texto branco */
    border: 1px solid transparent !important;  /* sem borda */
}

/* Quando selecionado */
#modBotao2:checked + .modelo2 {
    background-color: #6c757d !important;      /* cor cinza */
    color: #fff !important;
    border: 1px solid #6c757d !important;
    transition: all 0.3s ease;
}

/* Opcional: animação suave ao mudar */
.modelo2 {
    transition: all 0.3s ease;
}


/* Desktop (>= 768px, por exemplo) */
@media (min-width: 768px) {
    .logo-abertura {
        max-height: 170px; /* mobile */
        flex: 0 0 auto;
    }

    .logo-topo {
        max-height: 170px; /* mobile */
        flex: 0 0 auto;
    }    
}

@media (max-width: 768px) {
    .logo-abertura {
        max-width:70%; 
        max-height: 140px; /* mobile */
        flex: 0 0 auto;

    }

    .logo-topo {
        max-width: 280px;
        flex: 0 0 auto;
        max-height: 60px;
    }    
}


/* Botão Whatsapp */
.btn-whatsapp {
    background-color: var(--color7);
    border:none;
    color: #fff !important;
    padding: 10px 15px;
    position:relative;
    box-sizing:border-box;
    transition:all 400ms ease    
}

.btn-whatsapp:before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:100%;
    background:linear-gradient(90deg,transparent,var(--color5t),transparent);
    transition:all 0.5s ease
}
.btn-whatsapp:hover:before {
    width:100%
}


/* Botão página */
.btn-pagina {
    color:var(--color5) !important;
    border:none;
    background-color:var(--color2);
    padding: 10px 15px;
    position:relative;
    box-sizing:border-box;
    transition:all 400ms ease       
}

.btn-pagina:before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:100%;
    background:linear-gradient(90deg,transparent,var(--color5t),transparent);
    transition:all 0.5s ease
}
.btn-pagina:hover:before {
    width:100%
}

.btn-pagina-vazado {
    border:solid 1px var(--color1);
    background:transparent;
    color:var(--color1);
    padding: 10px 15px;
    position:relative;
    box-sizing:border-box;
    transition:all 400ms ease;
    cursor: pointer; /* cursor normal, não pointer */


}
.btn-pagina-vazado:hover,.btn-btn-pagina-vazado:focus,.btn-btn-pagina-vazado.focus,.btn-btn-pagina-vazado:active,.btn-btn-pagina-vazado.active {
    background-color:var(--color1);
    color:var(--color5)
}

.btn-pagina-vazado-branco {
    border:solid 1px var(--color5);
    background:transparent;
    padding: 10px 15px;
    color:var(--color5)
}
.btn-pagina-vazado-branco:hover,.btn-btn-pagina-vazado-branco:focus,.btn-btn-pagina-vazado-branco.focus,.btn-btn-pagina-vazado-branco:active,.btn-btn-pagina-vazado-branco.active {
    background-color:var(--color5);
    color:var(--color1);
    border: solid 1px var(--color1);
}

.border-botao {
    border: solid 1px rgba(255, 255, 255, 0.2);
}


/* Botão Whatsapp Flutuante */
#btn_flutuante_whatsapp{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:9999;
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:all .3s ease;
}

/* quando visível */
#btn_flutuante_whatsapp.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.whatsapp{
    position:relative;
}

.whatsapp-text{
    margin-right:-22px;
    transform:translateX(40px);
    opacity:0;
    transition:all .3s ease;
    white-space:nowrap;
    border-radius: 25px 0 0 25px;
    color: var(--color5);
    background-color: var(--color7);
    padding: 7px 30px 7px 10px;
}

.whatsapp-icon{
    height:68px;
    width:68px;
    border-radius:50%;
    padding:5px;
    z-index:2;
}

/* quando passar o mouse */
.whatsapp:hover .whatsapp-text{
    transform:translateX(0);
    opacity:1;
}


/* Garante que o carousel tenha contexto para posicionamento absoluto */
#carouselComoTeAjudo {
    position: relative;
}

/* Desloca as bolinhas para baixo */
#carouselComoTeAjudo .carousel-indicators {
    bottom: -30px; /* ajuste a distância para baixo */
}

/* Personaliza bolinhas */
#carouselComoTeAjudo .carousel-indicators button {
    background-color: #cccccc; /* cor padrão */
    width: 14px;
    height: 14px;
    border-radius: 50%;
    opacity: 1;
}

#carouselComoTeAjudo .carousel-indicators .active {
    background-color: var(--color1); /* cor da bolinha ativa */
}


/* ´ícones na sessão como te ajudo */
.icones { 
    max-width: 100px;
    height: 90px;
    }

* {
    font-optical-sizing: auto;
    font-weight:normal;
}


strong,
b {
    font-weight: Bold !important;
}

/* Desktop (≥992px) */
h1,.h1,.h1-custom { font-size: 2.5rem; line-height: 1.1;}
h2,.h2,.h2-custom { font-size: 2rem; line-height: 1.2;}
h3,.h3,.h3-custom { font-size: 1.45rem; line-height: 1.2;}
.display-1 {font-size: 4rem;}
.display-2 {font-size: 3.5rem;}
.display-3 {font-size: 3rem;}
.display-4 {font-size: 2.5rem;}
.display-5 {font-size: 2rem;}
.display-6 {font-size: 1.5rem;}
.frase2 {font-size: 1.5rem; line-height: 1.2;}

/* Tablets (≥768px e <992px) */
@media (max-width: 991.98px) {
h1,.h1,.h1-custom { font-size: 2.5rem; }
h2,.h2,.h2-custom { font-size: 2rem; }
h3,.h3,.h3-custom { font-size: 1.35rem; }
.display-1 {font-size: 3.0rem;}
.display-2 {font-size: 2.6rem;}
.display-3 {font-size: 2.2rem;}
.display-4 {font-size: 1.8rem;}
.display-5 {font-size: 1.4rem;}
.display-6 {font-size: 1.1rem;}
.frase2 {font-size: 1.3rem; }
}

/* Mobile (<768px) */
@media (max-width: 767.98px) {
h1,.h1,.h1-custom { font-size: 1.5rem; }
h2,.h2,.h2-custom { font-size: 1.3rem; }
h3,.h3,.h3-custom { font-size: 1.1rem; }

.frase2 {font-size: 1rem; }
}

h4,.h4,.h4-custom {
    font-size:1.1em;
    line-height:1.42857143;
    color:var(--color1);
    margin-left:30px;
    border-left:solid 5px var(--color2t);
    padding:12px 25px
}

h5,.h5,.h5-custom {
    font-weight:300;
    font-size:1.1em;
    line-height:1.42857143;
    color:var(--color5);
    background-color:var(--color1);
    padding:12px 25px;
    margin:0;
    border-radius:25px
}

h6,.h6,.h6-custom {
    font-weight:300;
    font-size:1.1em;
    line-height:1.42857143;
    color:var(--color5);
    background-color:var(--color2);
    padding:12px 25px;
    margin:0;
    border-radius:25px
}

/* Bolinhas numeradas sessão Pilar */
.pilar{
    height: 35px;
    width: 35px;
}
.pilar:hover,
.pilar:focus {
    background-color: var(--color9t) !important; /* mantém a mesma cor */
    color: var(--color5) !important; /* mantém o texto branco */
    box-shadow: none; /* remove efeito de foco padrão do Bootstrap */
}


.menu_rodape:hover,
.menu_rodape:focus {
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer; /* cursor normal, não pointer */
}


.menu-mobile-item{
    border-bottom: 1px solid var(--color5)!important; 
    background-color:var(--color1)!important;
}

.menu-mobile-item:hover{
    border-bottom: 1px solid var(--color5)!important; 
    background-color:var(--color1t)!important;
}

.slider-sem-dots .slick-dots{
    display: none !important;
}

li::marker {color:var(--color2);

}


/* Depoimentos */
.fundo-depoimentos {
    padding:40px 20px 20px 20px;
    min-height:300px
}
.circulo-letra-depoimentos {
    font-size:2.2em;
    height:60px;
    width:60px;
    border-radius:50%;
    border:none;
    position:absolute;
    margin-top: -30px;
    display: inline;
    margin-left: -30px;
}
.circulo-foto-depoimentos {
    height:60px;
    width:60px;
    border-radius:50%;
    border:none;
    position:absolute;
    margin-top: -30px;
    display: inline;
    margin-left: -30px;
    object-fit: cover;
}
.credito-data-depoimentos {
    font-size:.8em
}
.selo-depoimentos {
    width:26px;
    background:#fff;
    border-radius:50%;
    padding:3px;
    position:absolute;
    margin-left:15px;
    top:50px
}


/* remove seta original */
.accordion-sessoes .accordion-button::after{
    /* remove ícone original */
    background-image: none;
    width:20px;
    height:20px;

    /* cor da seta */
    background-color: var(--color8);

    /* máscara do SVG */
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");

    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");

    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;

    -webkit-mask-position:center;
    mask-position:center;

    -webkit-mask-size:contain;
    mask-size:contain;

    transition: transform .3s ease;
}




/* rotação ao abrir */
.accordion-sessoes .accordion-button:not(.collapsed)::after{
    transform: rotate(180deg);
}
.accordion-button:focus {
  box-shadow: none;
}

.accordion {
    --bs-accordion-active-bg: var(--color9t);
    --bs-accordion-btn-focus-border-color: var(--color9t);
   --bs-accordion-btn-focus-box-shadow: none;
   --bs-border-radius: 20px!important;
  --bs-accordion-active-color: none; /* sua cor aqui */
}

.accordion-item {
    border: none; /* remove todas as bordas */
    border-bottom: 1px solid var(--bs-accordion-border-color); /* mantém só a inferior */

}



/* Fundo listas ckeditor */
.Fundo_bolets_ckeditor ul {
    background-color: var(--colorfundobolets); /* fundo da lista */
    padding: 15px 20px;         /* espaçamento interno */
    border-radius: 8px;         /* cantos arredondados */
    list-style-position: inside; /* bullets dentro do bloco */
    margin-bottom: 1rem;        /* separação de outros elementos */
    margin-top: 1rem;
    border: solid 1px var(--colorfundobolets);  
    text-align: left !important;
}

.Fundo_bolets_ckeditor_pagina ul {
    background-color: #f9f9f9; /* fundo da lista */
    border: solid 1px #e9e9e9;  
    text-align: left !important;
    list-style-position: outside;
    padding-left: 35px;
    text-indent: 0;
    
}

.animacao-entrar, .bolets_ckeditor_animado ul li {
    animation: entrar 0.5s ease-out forwards;
    transform: translateY(10px); /* em vez de X */
    opacity: 0;
    animation-delay: calc(0.08s * var(--i));
    
}

/* Bulets em colunas */
.bolets_ckeditor_animado {
    container-type: inline-size;
}

@container (min-width: 991px) {
    .bolets_ckeditor_animado ul {
        columns: 2;
        column-gap: 30px;
        
    }
}


@keyframes entrar {
    from {transform:translateX(100%); opacity:0;}
    to {transform:translateX(0);opacity:1;    }
}


.sessao-animada {
    transform:translateY(80px);
    transition:all 0.8s ease-out;
}
.sessao-animada.visivel {
    transform:translateY(0);
}
    

.cke_editable {
    font-family: "Roboto", sans-serif !important;
}



.stroke {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5); /* espessura e cor do contorno */
}


.color-radio {
    display: none;
}

.color-label {
    cursor: pointer;
    display: inline-block;
}

.color-box {
    display: block;
    width: 35px;
    height: 35px;
    border-radius: 4px;
    margin: 0 auto;
    border: 1px solid var(--color4);
    transition: 0.2s ease;
    display:inline-block;
}

/* destaque da selecionada */
.color-radio:checked + .color-box {
    border: 3px solid #000;
    transform: scale(1.1);
}

.color-label {
    display:inline-block;
    cursor:pointer;
}

.color-picker-overlay {
    position: absolute;
    inset: 0;              /* ocupa todo o label */
    width: 35px;
    height: 35px;
    opacity: 0;            /* invisível */
    cursor: pointer;
    border: none;
    padding: 0;
}

/* Cor personalizada */
.custom-color {
    position:relative;
}

.custom-color input[type="color"] {
    position:absolute;
    inset:0;
    width:35px;
    height:35px;
    opacity:0;
    cursor:pointer;
}


/* Configurações do menu */
 
/* Menu inicialmente oculto (fora da tela) */
#mainMenu{
    position: fixed;
    top:-100px;
    left:0;
    width:100%;
    z-index:9999;
    transition: top .3s ease;
}

/* inicia visível */
#mainMenu.menu-visivel {
    top: 0;
}

/* inicia oculto */
#mainMenu.menu-oculto {
    top: -100px;
}

/* Estilo base da seta (fechado, apontando para baixo) */
.menu-arrow {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-left: 2px solid var(--color1);  /* cor da seta */
  border-bottom: 2px solid  var(--color1);
  transform: rotate(-45deg);         /* seta apontando para baixo */
  transition: transform 0.3s, border-color 0.3s;
  margin: 0 auto;
}

/* Sombra em texto */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}


.navbar{
    --bs-navbar-padding-y: 0 !important;
}
/* Quando o menu estiver aberto, rotaciona a seta para cima */
.navbar-toggler.open .menu-arrow {
  transform: rotate(135deg);       /* seta apontando para cima */
  border-color: var(--color1);     /* cor diferente se quiser */
}

/* Hover da seta */
.navbar-toggler:hover .menu-arrow {
  border-color: var(--color1);
}
/* Cor de fundo do botão */
.navbar-toggler {
  background-color: none; /* cor do fundo */
  border: none;              /* opcional: remove borda */
  padding: 8px 12px;         /* opcional: melhora área do botão */
  border-radius: 4px;        /* opcional: cantos arredondados */
}
/* Cor de fundo quando o menu estiver aberto */
.navbar-toggler.open {
  background-color: none;
}

/* Efeito visualização */
.navbar-toggler {
  border: 0;
  box-shadow: none;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
  outline: 0;
  box-shadow: none;
}

.nav-link:hover{
    font-weight:700;
}

/* Mobile */
@media (max-width: 768px) {
.nav-link-mobile{
    font-weight:700;
    color: var(--color5)!important;
  }
    
.nav-link-mobile:hover{
    font-weight:700;
    color: var(--color6)!important;
  }
}

.logo_gerenciador {max-width: 80%; max-height: 120px;}

/* Tamanho logo navbar mobile */
.logo-menu {height: 60px; max-width: 180px;}


/* Seleção do modelo do botão do WhatsAPP no formulário de contato */
.opcao-botao{
  cursor:pointer;
}
.opcao-botao input{
  display:none;
}
.opcao-botao img{
  width:70px;
  filter: grayscale(100%);
  opacity:0.6;
  transition:0.2s;
}

/* quando selecionado */
.opcao-botao input:checked + img{
  filter: grayscale(0);
  opacity:1;
  transform: scale(1.05);
}

/* hover opcional */
.opcao-botao:hover img{
  opacity:0.9;
}


/* Cores Redes Sociais oficiais */
.facebook{ color:#1877F2; }
.instagram{ color:#E4405F; }
.youtube{ color:#FF0000; }
.linkedin{ color:#0A66C2; }
.tiktok{ color:#000000; }

/* animação */
.redessociais{
    display:inline-block;
    transition: transform .3s ease;
}

/* hover no link */
a:hover .redessociais{
    transform: scale(1.3);
}

/* Medida exição mapa rodapé */
.ratio-exibicao-mapa {
  --bs-aspect-ratio: 30%;
}

/* Mobile */
@media (max-width: 768px) {
  .ratio-exibicao-mapa {
    --bs-aspect-ratio: 56.25%; /* 16:9 */
  }
}

/* Galeria de vídeos */
.video-box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    cursor: pointer;
}

.video-box.short {
    aspect-ratio: 9 / 16;
}

/* quando o vídeo está tocando */
.video-box.playing {
    padding-top: 48px; /* altura da barra do YouTube */
}

.video-box img {
    object-fit: cover;
}

.video-box iframe {
    object-fit: contain;
}

.video-box img,
.video-box iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Tamanho fotos galeria */
.foto-galeria {
    height: 250px;
    width: 100%;
    object-fit: cover;
}

/* Tamanho fotos blog */
.foto-blog-preview {
    height: 220px;
    width: 220px;
    object-fit: cover;
}

/* Tamanho fotos blog */
.foto-blog-pagina {
    max-height: 480px;
    max-width: 100%;
}

/* Fotos sessões mobile */
.fotos-pagina-mobile {
    max-height: 450px;
    max-width: 100%;
}


/* Modal galeria de fotos */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    padding: 10px;                     /* aumenta o “tamanho do botão” */
    border-radius: 50%;                /* deixa circular */
    background-size: 50%;  
}
/* Para todas as imagens dentro do carousel do modal */
.carousel-img-limit .carousel-item img {
    max-height: 90vh;       /* altura máxima = 90% da tela */
    width: auto;            /* largura automática para manter proporção */
    margin: 0 auto;         /* centraliza horizontalmente */
    object-fit: contain;    /* mantém proporção da imagem */
    display: block;
}

.carousel, .carousel-item, .carousel-inner {
    width: 100vw;
}

.carousel-item img {
    object-fit: cover; /* Cobre toda a tela sem distorcer */
    width: 100%;
    height: 100%;
}

.slick-list,.slick-slider,.slick-track {
    display:block;
    position:relative
}
.blue h3,.slick-dots li,.slick-list,.slick-slider,.slick-track {
    position:relative
}
.slick-slider {
    box-sizing:border-box;
    user-select:none
}
.slick-list {
    overflow:hidden;
    margin:0;
    padding:0
}
.slick-dots li button:focus,.slick-list:focus,.slick-next2:focus,.slick-next:focus,.slick-prev2:focus,.slick-prev:focus {
    outline:0
}
.slick-list.dragging {
    cursor:pointer
}
.slick-slide,.slick-slide img,.slick-slider .slick-list,.slick-track {
    transform:translate3d(0,0,0)
}
.slick-track {
    left:0;
    top:0
}
.slick-track:after,.slick-track:before {
    content:"";
    display:table
}
.slick-track:after {
    clear:both
}
.slick-loading .slick-slide,.slick-loading .slick-track {
    visibility:hidden
}
.slick-slide {
    float:left;
    height:auto;
    min-height:1px;
    display:none
}
.slick-dots {
    bottom:0;
    list-style:none;
    display:block;
    text-align:center;
    padding:0;
    width:100%
}
.slick-dots li button:before {
    content:'•';
    width:20px;
    height:20px;
    color:#000;
    opacity:.25;
    position:absolute;
    top:0;
    left:0;
    content:'•';
    font-size:35px;
    line-height:10px;
    text-align:center;
    color:var(--color5t)
}

.slick-dots li {
    display:inline-block;
    height:20px;
    width:20px;
    margin:0 5px;
    padding:0;
    cursor:pointer
}
.slick-dots li button {
    border:0;
    background:0 0;
    display:block;
    height:20px;
    width:20px;
    outline:0;
    line-height:0;
    font-size:0;
    color:transparent;
    padding:5px;
    cursor:pointer
}
.slick-dots li.slick-active button:before {
    opacity:.75;
}

.slider .slick-track{
    display:flex;
}

.slider .slick-slide{
    height:auto;
    display:flex;
}

.slider-separado .slick-slide > div{
    width:100%;
    border-radius: 15px;
}

.slider-separado  .slick-slide{
    padding: 0 15px; /* espaço entre os slides */
}

.slider-separado  .slick-list{
    margin: 0 -15px; /* compensa o padding lateral */
}


/* Ebook */
.ebook-item{
    position: relative;
}

.ebook-img{
    position: relative;
    width: 230px;
    height: 347px;
    margin: auto;
}

.img-ebook-base,
.img-ebook-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
}

.img-ebook-overlay{
    z-index:2;
}

.img-ebook-base{
    z-index:1;
}

/* Topo' */
#mainMenu{
    position:fixed;
    top:-100px;
    left:0;
    width:100%;
    z-index:5;
    transition:top .35s ease;
}

/* Abertura hiperlink destaque */
.foto-faixa-abertura {
    width:50vw;
    object-position:top center;
    object-fit:cover
}

/* Abertura hiperlink destaque */
.foto-faixa-abertura_mob {
    width:100%;
    object-position:top center;
    object-fit:cover;
}

/* vídeo full home */
.hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;   /* 👈 faltava isso */
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}

.video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1;

  opacity: 0;
  transition: opacity 0.8s ease;
}

.video-bg.loaded {
  opacity: 1;
}