/* Css acampadentro
 2024 */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Circular+Std:wght@700&display=swap');      

body {
   font-family: 'Circular Std', sans-serif;
}

.container {
   display: grid; 
   gap: 10px;
   grid-template-columns: 1fr; 
   grid-template-rows: 0fr 0fr 0fr 0fr;
   grid-template-areas:  
       "header"
       "conteudo"
       "botao"
       "footer";
}

.header #header-container {
   grid-area: header;
   width: 100%;
}

.principal {
   display: flex;
   width: 100%;
   justify-content: center;
}

.conteudo {
   grid-area: conteudo;
   width: 65%;
   margin-left: 25%;
   margin-right: 25%;
}

.texto1, .texto2, .foto {
   display: flex;
   flex-direction: column;
   /*text-align: start;*/
}

.card_img {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.card_img img {
   display: flex;
   max-width: 100%;
   align-items: center;
   border-radius: 10px;
}

.botao {
   grid-area: botao;
   display: flex;
   align-items: center;
   justify-content: center;
}

.botao button {
   background: rgba(168, 115, 65, 0.8);
   border-radius: 6px;
   padding: 8px;
   cursor: pointer;
   color: #fff;
   border: none;
   font-size: 1rem; 
   margin-top: 50px;
}

.footer #footer-container {
   grid-area: footer;
   background-color: rgb(34, 34, 34);
}

h1 {
   font-family: 'Circular Std', sans-serif;
   margin: 0;
   font-size: 25px; 
   color: #585858;
   margin-bottom: 15px;
   text-align: center;
}

h2 {
   font-family: 'Circular Std', sans-serif;
   display: flex;
   color: #585858;
   font-size: 12px;
   text-decoration: none;
}

h3 {
   font-family: 'Circular Std', sans-serif;
   text-align: center;
   color: #585858;
   font-size: 12px;
   text-decoration: none;
}

p {
   font-family: 'Circular Std', sans-serif;
   font-size: 20px;
   color: #000; 
   margin-bottom: 10px;
   text-align: start;
}

/* Media queries para dispositivos menores */
@media screen and (max-width: 1050px) {
   .container {
      display: flex;
      flex-direction: column;
   }
   
   .nav img {
      width: 100px;
   }
   
   .conteudo {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-left: 20px;
      margin-right: 20px;
      max-width: 95%;
      min-width: 95%;
   }

   .media {
      display: flex;
      flex-direction: column;
   }

   #footer {
      display: flex;
      text-align: center;
      margin-top: 0px;
      background-color: #f0f0f0;
      width: 100%;
   }

   h2 {
      font-weight: 1;
      margin: 0rem;
      font-size: 10px;
      color: rgb(0, 0, 0);
   }
   
   p {
      text-align: start;
   }
}