@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0px;
    padding: 0px;
    font-family: "Poppins", sans-serif;
}

nav.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
  z-index: 1030;
  padding: 10px;
  justify-content: center;
}

body {
  margin-top: 120px; 
}

#carouselExampleAutoplaying {
  margin-top: 130px;
}

.navbar-nav {
  gap: 10px;
}

.navbar-nav .nav-link {
  padding: 10px; 
  text-decoration: none;
  color: black; 
  border-radius: 5px;
  text-align: end;
}

.navbar-nav .nav-link:hover {
  background-color: yellow;
}

.SobreAEmpresa{
  display: flex;
  padding: 50px 50px;
  gap: 30px;
  justify-content: center;
  align-items: center;

}

.TextoSobre p{
    line-height: 2em;
    text-align: justify;
}

.SobralContabilidade2000{
    width: 50%;
    height: 50%;
}

.ContadorFundador{
    display: flex;
    padding: 50px 50px;
    gap: 30px;
    justify-content: center;
    align-items: center;
}

.TextoContador{
    line-height: 2em;
    text-align: justify;
    display: flex;
    gap: 5px;
    flex-flow: column nowrap;
}

.TextoContador h2{
    font-size: 72px;
    background-color: yellow;
    text-align: center;
}

h1{
    text-align: center;
    background-color: yellow;
    padding: 5px;
    font-weight: 100;
    font-style: normal;
}

h2{
    text-align: center;
    background-color: yellow;
    padding: 5px;
    font-weight: 100;
    font-style: normal;
}

.caption{
  background-color: transparent;
  font-size: 64px;
  margin-bottom: 160px;
  text-shadow: 3px 3px 3px #00000077;
}

#ContadorEmDiadema{
  text-align: center;
  padding: 20px;
  margin: 20px;
}

.botoes-servicos{ 
  display: flex;
  padding: 10px;
  gap: 10px;
  justify-content: space-evenly;
  margin-bottom: 20px;
}

.botoes-servicos img{ 
  filter:grayscale(100%);
  opacity: 1;
  border-radius: 10px;
}

.botoes-servicos img:hover{ 
  filter:grayscale(0%);
  opacity: 1;
}

/* Estilizando container pai */

section#links{
  background-color: #000000;
}

/* Titulo Principal */

h2.title-links{
  text-align: center;
  background-color: #FFF200;
  color: #1F2C30;
  margin-bottom: 50px;
}

/* Div wrap */

.wrap{
  padding: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* estilizando as seções */

.box-links{
  padding: 10px 20px;
  flex-basis: 200px;
  flex-shrink: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Estilo das listas */

ul.links-group{
  margin-left: -32px;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: left;
  align-items: flex-start;
}

/* Subtitulos */

h3.box-links-title{
  color: #FFFFFF;
  font-weight: normal;
  padding: 5px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.212);
  border-radius: 5px;
}

/* Texto dos links */

/* clamp (min, ideal, max) */

ul.links-group li a {
  text-decoration: none;
  color: #FFFFFF;
  font-size: clamp(12px, 1.3vw, 16px);
  transition: color 0.6s ease, border-color 0.6s ease; /* animação */
  display: block;
  padding-bottom: 4px;
  border-bottom: 1px dotted #FFFFFF;
}

ul.links-group li a:hover {
  color:yellow; /* Cor levemente azul */
  border-bottom: 1px dotted yellow;
   }

/* Media Queries para telas menores que 768px */
@media (max-width: 768px) {
  .wrap{
     flex-direction: column;
     
    
    
  }

  ul.links-group{
    gap: 20px; /* gap maior para telas menores */
    align-items: center;
  
  }
}

.indicadores{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 50px 0px;
  gap: 20px;
}

.botoes-servicos{
  display: flex;
  gap:30px;
}

.AberturaEmpresas{
  display: flex;
  padding: 25px 200px;
  gap: 30px;
  justify-content: center;
}

.Personalização-Serviços{
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.Personalização-Serviços h3{
  text-align: center;
}

.Alinhamento-Serviços{
  line-height: 2.5em;
  text-align: justify;
}

footer{
  display: flex;
  padding: 100px;
  color:white;
  background-color: black;
  justify-content: space-between;
}

.Fale-Conosco{
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  margin: 20px 0px;
}

.contato{
  display: flex;
  justify-content: space-evenly;
  margin-top: 30px;
  flex-flow: row wrap;
}

footer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.footer-wrap{
 display: flex;
 gap: 50px;
 justify-content: space-around;
 align-items: center;
}

.footer-acess h4{
  text-align: center;
  margin-left: 40px;

}

.footer-social{
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: -5px;
}

div.icons{
  display: flex;
  justify-content: space-around;
}

footer p{
  margin-top: 50px;
  text-align: center;
}

@media(max-width: 786px){
  .footer-wrap{
    flex-direction: column;
  }
}

.blog {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.informativo {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.pdf-container {
  position: relative;
  padding-bottom: 56.25%; /* Proporção 16:9 */
  height: 0;
  overflow: hidden;
  margin: 20px 0;
  width: 100%;
}

.pdf-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

@media (max-width: 768px) {
  .pdf-container {
    padding-bottom: 75%; /* Proporção mais alta para telas menores */
  }
}

@media (max-width: 480px) {
  .pdf-container {
    padding-bottom: 100%; /* Proporção quadrada para telas muito pequenas */
  }
}

.e-books {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.e-book-capas,
.e-book-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

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

.e-book-capas img,
.e-book-resumo img {
  max-width: 100%;
  height: auto; /* Mantém a proporção */
}

@media (max-width: 768px) {
  .e-book-capas,
  .e-book-resumo {
    flex-direction: column; /* Empilha os itens */
    gap: 10px;
  }

  .e-book-capas img,
  .e-book-resumo img {
    width: 100%; /* Garante que a imagem ocupe toda a largura disponível */
  }
}

.baixar-e-books{
  margin: 0 auto;
}

#baixar-e-books{
  filter:grayscale(100%);
  border-radius: 20px;
}

#baixar-e-books:hover{
  filter:grayscale(0);
}


@media(max-width:768px){
  .SobreAEmpresa{
    flex-direction: column;
  }
  .SobralContabilidade2000{
    width: 100%;
  }
}

@media(max-width: 1200px){
  .ContadorFundador{
    flex-direction: column;
  }

  #foto-sobral{
    height: 500px;
    min-width: 400px;
  }

  .TextoContador h2{
    font-size: 48px;
  }
}

#img-serviços img {
  width: 100%;
  max-width: 300px;
  height: auto;
}


  @media (max-width: 768px) {
    .botoes-servicos#img-serviços {
      flex-direction: column;
      align-items: center;
      gap: 30px;
    }

    #img-serviços img {
      width: 380px;
      max-width: 500px;
    }
  }

.indicadores{
  flex-wrap: wrap;
}

.botoes-servicos#financeiros{
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

main#pagina-serviços{
  margin-top: 130px;
}

@media(max-width: 1200px){
  .AberturaEmpresas{
    flex-wrap: wrap;
  }

  .AberturaEmpresas img{
    order: 2;
  }
 
}
@media(max-width: 768px){
  .Personalização-Serviços h2, .Personalização-Serviços h3 .Personalização-Serviços p{
    max-width: 500px;
    min-width: 300px;
  }
}

.slider{
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: auto;
}

.slider .slide-track{
  animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250*17);
}

.slider .slide{
  height: 100px;
  width: 250px;
}

@keyframes scroll{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(calc(-250px*9));
  }
}

.slide a img{
  opacity: 0.5;
  filter: grayscale(100%);
}

.slide a img:hover{
  opacity: 1;
  filter: grayscale(0%);
}