/*FOI ADICIONADO NO header.css*/
/* header(navbar) */
/* Define o estilo do cabeçalho */
header {
    width: 100%; /* O cabeçalho ocupa toda a largura da página */
    padding: 20px 2%; /* Espaçamento interno no topo e na base, e margem lateral de 2% */
    position: fixed; /* Fixa o cabeçalho no topo da página durante o scroll */
    top: 0; /* Alinha o cabeçalho ao topo */
    left: 0; /* Alinha o cabeçalho à esquerda */
    transition: 1s; /* Transição suave de 1 segundo para mudanças */
    z-index: 1; /* Define a prioridade de sobreposição */
}

/* Define o layout do container dentro do cabeçalho */
header .container {
    display: flex; /* Usa flexbox para organizar o conteúdo */
    flex-direction: row; /* Alinha os itens em uma linha */
    justify-content: flex-start; /* Alinha o conteúdo à esquerda */
    align-items: center; /* Centraliza verticalmente o conteúdo */
}

/* Estilo aplicado ao cabeçalho durante o scroll */
header.scrolling {
    padding: 10px 2%; /* Reduz o padding para ocupar menos espaço */
    background-color: #fff; /* Define o fundo branco durante o scroll */
}

/* Links dentro do cabeçalho ao rolar a página */
header.scrolling a {
    color: black; /* Altera a cor dos links para preto */
    font-weight: 500; /* Deixa o texto um pouco mais grosso */
}

/* Estilo específico para o botão de login durante o scroll */
header.scrolling .button-login-item {
    color: white; /* Altera a cor para branco */
}

/* Estilos para o menu secundário */
.s-menu {
    padding: 1rem 0; /* Espaçamento interno acima e abaixo */
    width: 100%; /* Largura total */
    text-align: center; /* Centraliza o texto */
    position: relative; /* Define uma posição relativa para possíveis posicionamentos */
}

/* Lista dentro do menu secundário */
.s-menu ul {
    display: flex; /* Exibe os itens em linha */
    flex-direction: row; /* Organiza os itens horizontalmente */
    margin-right: 100px; /* Margem à direita */
}

/* Barra de navegação principal */
.nav-bar {
    display: flex; /* Usa flexbox para organizar os elementos */
    justify-content: space-between; /* Espaça os elementos entre as extremidades */
}

/* Configurações de logo */
.logo {
    display: flex; /* Usa flexbox para centralizar o conteúdo */
    align-items: center; /* Centraliza verticalmente a logo */
}

/* Configura o tamanho da imagem da logo */
.logo_imagem {
    width: 300px; /* Largura da imagem */
    height: 80px; /* Altura da imagem */
}

/* Lista de navegação */
.nav-list {
    display: flex; /* Exibe os itens em linha */
    align-items: center;
    margin-right: 10rem; /* Centraliza os itens verticalmente */
}

/* Lista dentro da navegação */
.nav-list ul {
    display: flex; /* Exibe itens em linha */
    justify-content: center;
    align-items: center; /* Centraliza os itens */
    list-style: none; /* Remove os marcadores de lista */
}

/* Espaçamento entre itens de navegação */
.nav-item {
    margin: 0 15px; /* Adiciona espaço lateral entre os itens */
}

/* Estilo dos links de navegação */
.nav-link {
    text-decoration: none; /* Remove a linha sob os links */
    font-size: 1.15rem; /* Aumenta o tamanho do texto */
    color: #fff; /* Define a cor branca */
    font-weight: 500; /* Deixa o texto um pouco mais grosso */
}

/* Botão de login */
.login-button {
    display: flex; /* Usa flexbox para centralizar o botão */
    align-items: center;
    width: 150px; /* Centraliza o botão verticalmente */
}

/* Estilo do botão de login */
.login-button button {
    border: none; /* Remove a borda */
    background-color: #250C80; /* Cor de fundo azul escuro */
    padding: 15px; /* Espaçamento interno no botão */
    border-radius: 5px;
    width: 150px; /* Bordas arredondadas */
}

/* Link dentro do botão de login */
.login-button button a {
    text-decoration: none; /* Remove a linha sob o texto */
    color: #fff; /* Define a cor branca para o texto */
    font-weight: 500; /* Define o peso do texto */
    font-size: .9rem; /* Define o tamanho do texto */
}

/* Menu móvel, escondido por padrão */
.mobile-menu {
    display: none; /* Esconde o menu móvel */
}

/* Ícone do menu móvel, escondido por padrão */
.mobile-menu-icon {
    display: none; /* Esconde o ícone do menu móvel */
}

/* estilos da foto de background */
.home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background-image:linear-gradient(rgba(68, 68, 68, 0.5), rgba(87, 85, 85, 0.5)), url(/assets/imagens/main-image-sslab-final.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 80vh;
    width: 100%;
}

/* titulo estatico */
.titulo-animado {
    font-size: 4rem;
    font-weight: 500;
    margin: 0 auto;
    color: white;
}

/* classe do titulo animado */
.animated {
    font-size: 4rem;
    font-weight: 500;
    color: #250C80;
}
/* remover classe do texto animado */
.animated-disable {
    opacity:0;
}

/* posicionamento do texto e dos botões */
main .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5rem;
    padding-top: 10rem;
    margin-left: 40px;
}
/*ATE AQUI FOI ADICIONADO NO header.css*/



/* MAIN BANNER */
/* botões de saiba mais e consulte valores */

.button-item {
    background-color: white;
    height: 80px;
    width: 200px;
    margin: 0 auto;
    font-size: 1rem;
    border-radius: .2rem;
    color: white;
    background-color:#250C80 ;
    cursor: pointer;
}


.button-item:hover{
    height: 90px;
    width: 250px;
    transition: .5s;
    font-size: 22px;
    cursor: pointer;
}

.button-item-transparente {
    background-color: white transparent;
    height: 80px;
    width: 200px;
    margin: 0 10px 0 40px;
    color: white;
    border: 2px solid white;
    border-radius: .2rem;
    background: rgba(150,150,150,.50);
    font-size: 18px;
    cursor: pointer;
    transition: .5s; 
}

.button-item-transparente:hover{
    height: 90px;
    width: 250px;
    transition: .5s;
    font-size: 22px;
    cursor: pointer;
}



/* CONTEUDO DO MAIN */
.main-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-items: flex-start;
    align-items: center;
    gap: 20px;
}

.main-title {
    flex-wrap: wrap;
    font-size: 2.5rem;
    font-weight: 500;
    color: #250C80;
    padding: 40px;
}

.main-image {
    width: 1228px;
    height: 400px;
    margin: auto;
}

.main-subtitle {
    font-size: 40px;
    font-weight: 400;
    padding: 40px;
    color: #250C80;
}

.main-text {
    flex-wrap: nowrap;
    margin: 0 auto;
    width: 1200px;
}

#container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    padding: 20px;
}

.content-img {
    margin-top: 40px;
    width: 100%;
    height: 800px;
}

.content {
    display: none;
}

.content.show {
    display: flex;
}

.tab-btn {
    padding: 20px;
    background-color: transparent;
    border-radius: 10px;
    margin-right: 50px;
    border: none;
    cursor: pointer;
}


/* banner com contato */
.banner {
    content: "";
    background-image: url(/assets/imagens/call-center1.png);
    min-height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    margin-bottom: 200px;
}

.title-banner {
    display: flex;
    text-align: center;
    justify-content: center;
    font-size: 60px;
    padding-top: 200px;
    font-weight: 400;
    color: white;
}

.text-banner {
    display: flex;
    text-align: center;
    justify-content: center;
    margin-top: 20px;
    font-weight: 400;
    color: white;
}

.button-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.button-banner a {
    text-align: center;
    margin: auto;
    background-color: #250C80;
    text-decoration: none;
    color: white;
    width: 200px;
    height: 30px;
    border-radius: 5px;
    padding: 5px;
    font-weight: 500;
}

.button-banner a:hover {
    background-color: #331c8a;
    transition: .5s ease-in-out;
    margin-top: 1px;
}



/* cards funcionalidades */
.container-func {
    padding: 50px;
}

.cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}


.cards-func {
    display: flex;
    flex-direction: row;
    gap: 20px;
}



.card-title {
    flex-wrap: wrap;
    font-size: 48px;
    font-weight: 500;
    color: #250C80;
    margin-top: 40px;
}

.card-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: #C4C5CE;
}

.cards-item {
    width: 200px;
    height: 200px;
    background-color: #D9D9D9;
    border-radius: 10px;
}

.cards-item:hover {
    width: 210px;
    height: 210px;
    transition: .1s ease-in-out;
    box-shadow: 5px 15px #888888;
}

.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

.card-text {
    text-align: center;
    padding: 10px;
}

.fa-file-circle-plus,.fa-money-bill,.fa-shield-halved,.fa-network-wired {
    color: #250C80;
}


/* estilos dos cards redes sociais */
.redes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 65vh;
}

.title-redes {
    text-align: center;
    font-size: 40px;
    color: #250C80;
    font-weight: 500;
}

.text-redes {
    text-align: center;
    font-size: 15px;
    font-weight: 300;
}

.cards-redes {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80px auto 200px auto;
    gap: 35px;
}

.cards-redes-item {
    width: 250px;
    height: 250px;
}

.cards-redes-item:hover {
    opacity: 0.7;
    transition: 1s;
    width: 251px;
    height: 251px;
}



/* estilos do roda-pé (ADICIONADO EM footer.css)*/
.roda-pe {
    background-color: #250C80;
    height: 40vh;
    display: flex;
    flex-direction: row;
    justify-content:center;
    align-items: flex-start;
    padding-top: 40px;
    color: white;
}

.contato {
    margin-left: 400px;
    margin-right: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.titulo {
    margin-bottom: 10px;
}

.endereco {
    font-size: 1rem;
}


.numero {
    font-size: 1rem;
    font-weight: 600;
}


.politica {
    font-size: 1rem;
    font-weight: 600;
    text-decoration: underline white;
    text-decoration-thickness: .1rem;
    margin-bottom: 30px;
}

.redes-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    
}

.redes-footer h2{
    display: flex;
    flex-direction: column;
    margin-left: 7px;
    margin-bottom: 5px;
}

.redes-sociais {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.fa-brands {
    margin-right: 1rem;
    color: white;
}

.button-footer-item {
    border:3px solid white;
    border-radius: 25px;
    padding: 15px;
    font-weight: bold;
    color: white;
}

.copyright {
    display: flex;
    flex-direction: row;
    margin-top: 30px;
}




/* Design responsivo*/
@media screen and (max-width: 767px) {

    * {
        box-sizing: border-box;
      }

    .content-img {
        margin-top: 40px;
        width: 100%;
        height: 400px;
    }
    
    .content {
        display: none;
    }

    .content.show {
        display: flex;
    }
    #container {
        display: flex;
        flex-direction:column;
        align-items:normal;
        padding: 20px;
    }

    .icon {
        width: 40px;
        height: 40px;
        transition: .1s ease-in-out;
    }
    

    .nav-item {
        display: none;
    }

    .nav-link {
        color: #000;
    }

    .login-button {
        display: none;
    }

    .mobile-menu-icon {
        display: block;
    }

    .mobile-menu-icon button{
        background-color: transparent;
        border: none;
        cursor: pointer;
    }

    .mobile-menu ul {
        display: flex;
        flex-direction: column;
        text-align: center;
        padding-bottom: 1rem;
        
    }

    .mobile-menu .nav-item {
        display: block;
        padding-top: 1.2rem;
        
    }

    .mobile-menu .login-button {
        display: block;
        padding: 1rem 2rem;
    }

    .mobile-menu .login-button button {
        width: 100%;
    }
    
    .open {
        display: block;
        background-color: white;
        transition: .0s ease;
    }

    .logo_imagem {
        width: 150px;
        height: 50px;
    }

    .titulo-animado {
        font-size: 40px;
    }
    
    .animated {
        font-size: 40px;
        color: #250C80;
    }

    .home {
        background-image:linear-gradient(rgba(68, 68, 68, 0.5), rgba(87, 85, 85, 0.5)), url(/assets/imagens/mulher\ da\ capa.jpg);
        height: 80vh;
        width: 100vw;
    }


    .button-item {
        height: 50px;
        width: 90px;
        font-size: 12px;
    }
    
    
    .button-item-transparente {
        background-color: white transparent;
        height: 50px;
        width: 160px;
        font-size: 12px;
        margin-left: 5px;
    }

    .main-content {
        flex-direction: column;
        width:100%;
    }

    
    .tab-buttons {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .img_teste{
        width: 50px;
        height: 10px;
    }

    .main-title {
        font-size: 20px;
        font-weight: 500;
        color: #250C80;
    }

    .tab-btn {
        margin-right: 0;
    }

    .main-image {
        width: 95%;
        height: 100%;
        margin: auto;
    }

    .main-subtitle {
        font-size: 20px;
    }

    .main-text {
        font-size: 15px;
        width: 90%;
    }

    .container-func {
        width: 100%;
    }

    .card-title {
        font-size: 2rem;
        text-align: center;
    }

    .card-subtitle {
        font-size: 1rem;
    }

    .cards-func {
        display: flex;
        flex-direction: column;
    }

    .banner {
        width: 100%;
        height: 90px;
    }

    .title-banner {
        align-items: center;
        font-size: 2rem;
    }

    .text-banner {
        margin: 10px;
        font-size: .8rem;
    }

    .redes {
        width: 100%;
        height: 100%;

    }

    .title-redes {
        font-size: 2rem;
    }

    .text-redes {
        font-size: 1rem;
    }

    .cards-redes {
        display: flex;
        flex-direction: column;

    }

    .cards-redes-item {
        width: 200px;
        height: 200px;
    }

    .roda-pe {
        width: 100%;
        height: 50vh;
        display: flex;
        flex-direction: column;
    }

    .contato {
        width: 100%;
        margin: 0;
        align-items: center;
    }

    .redes-footer {
        width: 100%;
        margin: 0;
        align-items: center;
    }

    .redes-footer h2 {
        margin-top: 20px;
    }

    .redes-sociais {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 15px;
    }

    .copyright p {
        font-size: .9rem;
    }

  }

  @media screen and (max-width: 1366px) {
    .button-login {
        margin: 0 auto auto 250px;

    }

  }

  @media screen and (max-width: 1024px) {
    
    
    .logo_imagem {
        width: 150px;
        height: 50px;
    }

    
    .s-menu {
        padding: 1rem 0;
        width: 100%;
        text-align: center;
        position: relative;
    }
    
    .s-menu ul {
        margin-right: 10px;
    }
    
    /* posicionamento dos links ancoras */
    .s-menu__item {
        margin-left: 1rem;
    }
    
    /* estilos dos links ancoras */
    .s-menu__item a{
        font-weight: 400;
        font-size: 20px;
        transition: .4s;
        color: white;
    }
    
    /* hover do links ancoras */
    .s-menu__item a:hover{
        font-weight: 500;
        font-size: 21px;
        transition: .4s;
    }
    
    /* estilos do botão de login */
    .button-login {
        margin: 0 auto auto 200px;

    }
    
    .button-login-item {
        color: white;
    }

  }