html {
  scroll-behavior: smooth;
}

body { font-family: arial ; background-color: #FFFFFF;}

p { font-size: 18px;}

.titulo_1 { font-size: 30px; font-weight: bold;}

.limite_maximo { max-width: 1464px; margin: auto;}

.input_nome { 
    font-size:  18px; font-weight: bold; width: 400px; text-align: center;
    background: #E8E8E8; border: 2px solid #5B5B5E; border-radius: 10px; padding: 16px ;
    margin: auto; display: block ; margin-top: 40px; margin-bottom: 60px ;
}

.card_poder { background-color: #5B5B5E; color:white; width: 260px; height: 350px; margin: auto; display: flex;
      flex-direction: column; align-items: center; border-radius: 10px; padding-left: 16px; padding-right: 16px;
      font-size: 18px;  
;}

    .card_poder p { font-size: 18px; line-height: 22px;} 
    .card_poder .hero_img { display: block; margin: auto;  margin-top: -30px; margin-bottom: 10px ;}

    .card_poder.selecionar,
    .card_poder:hover { border: 4px solid #FDB813; padding-left: 14px; padding-right: 14px; transition: all ease-in-out 0.12s;}

    .card_poder .btn .hero_img { margin: 0px; width: 18px; height: 18px; margin-right: 10px;}

    .card_poder:not(.selecionar) .btn img{ opacity: 0; height: 0; width: 0;}

    .card_poder .btn { 
        display: flex; align-items: center; justify-content: center;
    } 

    .card_poder img { transition: all 0.2s ease-in-out;}

    .card_poder.selecionar .hero_img , 
    .card_poder:hover .hero_img { 
        transform: scale(130%) translateY(-30px) ;  transition: all 0.2s ease-in-out;}


    .card_poder .btn { background-color: #FDB813; border: 1px solid #D7D7D7; border-radius: 10px; text-align: center; padding: 10px
      ; color: #000000; font-weight: bold; font-size: 18px; margin-top: 10px; width: 170px;
    ;}

    .card_poder .selecionar img { width: 22px; height: 22px; margin-right: 8px;}

    .card_poder .btn.selecionar { background-color: #000000; color: #FDB813; border: 3px solid #FDB813;}

    .pagination { justify-content: center; }


#loader { 
  position: fixed; inset: 0; background: white; display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 1; transition: opacity 0.5s ease;
}

.pulse {
  animation: pulseAnim 1.5s ease-in-out infinite;
}

@keyframes pulseAnim {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}

#loader.fade-out {
  opacity: 0;
}


.btn_central { margin: auto;     display: flex; align-items: center; justify-content: center; }

.button.voltar_btn { background-color: #1E8897; width: 100%; color:white; text-align: left ;font-weight: bold ; justify-content: flex-start; 
    padding-left: 30px; border-radius: 10px;}

.button.voltar_btn:hover { color: white;  }

.bloco { min-height: 115px;}

.limite_box {
     max-width: 601px; 
     /* height: 918px; */
      margin: auto;
}

.fundo_escolhido { background-position: 0 -15px; width: 100%; height: 100%; background-size: cover; position: relative;}

    .fundo_escolhido.gigante    { background-image: url(../imgs/fundo/gigante.png)}
    .fundo_escolhido.mestre     { background-image: url(../imgs/fundo/mestre.png)}
    .fundo_escolhido.guardiao   { background-image: url(../imgs/fundo/guardiao.png)}
    .fundo_escolhido.inventor   { background-image: url(../imgs/fundo/inventor.png)}
    .fundo_escolhido.inspirador { background-image: url(../imgs/fundo/inspirador.png)}
    
    /* .foto_holder { 
        height: 350px; width: 350px; border-radius: 10px; background-size: cover;
        margin-left: auto; margin-right: auto; top: 300px; position: relative;
    } */



.has-radius { border-radius: 8px; }

.paragrafo { font-size: 16px;}

/* .foto_holder > div {
    width: inherit;
    height: inherit;
    background-size: cover;
    margin: 0px;
    background-position: center;
} */

.foto_holder {
    height: 400px;
    /* width: 310px; */
    width: 365px;
/* 
    height: 420px;
    width: 420px; */

    border-radius: 10px;
    background-size: cover;
    margin-left: auto;
    margin-right: auto;
    top: 264px;
    position: relative;
}
.foto_holder > div {
    width: inherit;
    height: inherit;
    background-size: contain;
    margin: 0px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px; overflow: hidden;;
}

.logo_holder{ bottom: 0px; width: inherit; position: absolute; display: flex;align-items: center; justify-content: center;;}

    .logo_holder > div, 
    .logo_holder img{ width: 320px; height: 320px ;}

    .logo_holder.maior > div,
    .logo_holder.maior img{ width: 600px; height: 600px ;}

    .logo_holder > div { background-size: cover ;}

        .fundo_escolhido.gigante     .logo_holder div  { background-image: url(../imgs/escudos/gigante@2x.png)}
        .fundo_escolhido.mestre      .logo_holder div  { background-image: url(../imgs/escudos/mestre@2x.png)}
        .fundo_escolhido.guardiao    .logo_holder div  { background-image: url(../imgs/escudos/guardiao@2x.png)}
        .fundo_escolhido.inventor    .logo_holder div  { background-image: url(../imgs/escudos/inventor@2x.png)}
        .fundo_escolhido.inspirador  .logo_holder div  { background-image: url(../imgs/escudos/inspirador@2x.png)}
        


.navbar-item img {
    max-width: 100px;    max-height: 100px;
}
 
.pagination {
  display: flex;  list-style: none;  padding-left: 0;  justify-content: center;  gap: 4px;}

    .pagination li a {
        display: block;  padding: 0.5em 0.9em;  color: #444;  background-color: #f9f9f9;  
        border: 1px solid #ddd;  text-decoration: none;  border-radius: 4px; 
        transition: background-color 0.2s, color 0.2s;}

    .pagination li:hover a { background-color: #f5ae25; color: white; border-color: #f5ae25; }

    .pagination li.active a { background-color: #f5ae25; color: white; border-color: #f5ae25; font-weight: bold; }

@media(min-width: 1390px) and (max-width: 1700px){
    .card_poder { 
        width: 250px;
    }
}

@media(min-width: 1282px) and (max-width: 1390px){
    .card_poder { 
        width: 250px;
    }
}

@media(min-width: 1000px) and (max-width: 1281px){
    .card_poder { 
        width: auto; padding-left: 10px; padding-right: 10px;
    }
}
@media( max-width: 1000px ){
  .input_nome { width: 100%; ;}

  .card_poder { margin-bottom: 100px ; }
}