/* Banner da página inicial */

.containerBannerIndex{
    container: bannerIndex / inline-size;
}

.bannerIndex{ 
    position: relative;
    height: 26rem;
    padding: 8rem 5%;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.bannerIndex .textos{
    width: min(50ch, 100%);
}

.bannerIndex .destaque{
    color: var(--douradoc);
    font-size: 2.5rem;
}

.bannerIndex .fundo{
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
}

.bannerIndex .fundo .bannerVideo{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.bannerIndex .fundo::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, rgba(0,0,0,0.9), rgba(0,0,0,0));
    z-index: 1;
}

@container bannerIndex (max-width: 900px){

    .bannerIndex{       
        height: 18rem;      
    }

    .bannerIndex .fundo::before{
        background-image: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(0,0,0,0.6));
    }

}

/* Grupo setas */

.grupoSetas{
    display: flex;
    width: clamp(1.2rem, 2vw, 1.4rem);   
}

.grupoSetas svg{
    width: 100%;
}

.grupoSetas svg *{
    opacity: 0;
    stroke: white;
}

.grupoSetas:hover svg *{
    stroke: var(--douradoc);
}

.grupoSetas .seta0{
    animation: gruposetas 1.5s ease alternate infinite;
}

.grupoSetas .seta1{
    animation: gruposetas 1.5s 0.3s ease alternate infinite;
}

.grupoSetas .seta2{
    animation: gruposetas 1.5s 0.6s ease alternate infinite;
}

@keyframes gruposetas{
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

/*Página de Login */

.pagLogin{
    container: pagLogin / inline-size;
    display: flex;
    flex-grow: 1;
}

.pagLogin .secLogin{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex-grow: 1;
}

.pagLogin .direito{
    padding: clamp(1.5rem, 2.5vw, 3rem);
    display: flex;
    align-items: center;
    background-color: var(--cinza250);
}

@container pagLogin (max-width: 1200px){

    .pagLogin .secLogin{
        display: flex;
        flex-direction: column;
    }

    .pagLogin .imgEsquerda{
        height: 15vw;
    }

    .pagLogin .direito{        
        align-items: flex-start;
        flex-grow: 1;
    }
}

/* Página de contato */

.pagContato{
    container: pagContato / inline-size;
}

.pagContato .divisao{
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 1.5rem;
}

@container pagContato (max-width: 950px){

    .pagContato .divisao{
        grid-template-columns: 1fr;  
    }

    .pagContato .ladoEsquerdo{
        border-bottom: var(--bordapadrao);
        padding-bottom: 1.5rem;
    }

}