/* ================================
   Estilos Gerais
================================ */
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #b1f3c9;
    color: #1f2937;
    line-height: 1.6;
  }
  .instituicao{
    color: #8eec77;
    font-size: 35px;
    text-shadow: 0 0 2px #f5f7f5;
  }
  .aluno{
    font-size: 20px;
color: #10b981;
margin-top: 0%;
text-shadow: 0 0 5px #073b07;
  }
  .professora{
color: pink;
margin-top: 0%;
text-shadow: 0 0 5px #00cc00;
  }
  h4{
    font-size: 35px;
    color: yellow;
     margin: 0 0 10px 0;
     text-shadow: 0 0 5px #00cc00;
    
  }
  .tema{
    color: #1f2937;
    margin: 0 0 10px 0;
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 50px;
    text-shadow: 0 0 5px #00cc00;
  }
  h2, h3 {
    margin: 0 0 10px 0;
    font-weight: 600;
    color: #fafafc;
  }

  .imagem1{
     margin-left: 30%;
  }
  .imagem2{
     margin-left: 18%;
    
  }
  .imagem3{
     margin-left: 5%;
    
  }
  .imagem4{
     margin-left: 3%;
    
  }

        .links a {
            color: #2832f8;
           
            font-size: 14px;
            text-shadow: 0 0 5px #00cc00;
            transition: transform 0.3s, text-shadow 0.3s;
        }
        .links a:hover {
            transform: translateX(5px);
            text-shadow: 0 0 8px #00cc00;
        }

  .prologo1{
    font-size: 50px;
    text-shadow: 0 0 10px #fde802;
    margin-left: 18%;
    color: rgb(29, 112, 5);
  }
  .prologo2{
    font-size: 40px;
    text-shadow: 0 0 5px #ebee0d;
   text-align: justify;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

     text-indent: 2em;
    padding-left: 3%;
    padding-right: 3%;
  }
h5{
  color: red;
}
  .video1{
    margin-left: 27%;
  }
  .video2{
    margin-left: 13%;
  }
   .video3{
    margin-left: 13%;
  }

  a {
    text-decoration: none;
    color: inherit;
  }
  
  .container {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
  }
  
  /* ================================
     Cabeçalho
  ================================ */
  .imagemTopo{
    border-bottom: 0px;
    margin-left: 100px;
    border: 0px;
  }
.imagemTopo2{
    margin-left: 40%;
  }

  header {
    background: #046317;
    color: white;
    padding: 20px;
    text-align: center;
    
  }
  
  header h1 {
    font-size: 2em;
  }
  
  /* ================================
     Botões
  ================================ */
  .btn{
    
    padding: 3px 5px;
    border-radius: 8px;
    border: none;
    background: #74eb86;
    color: white;
    font-size: 0.7em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    margin-left: 90%;
  }
  button {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    background: #147c23;
    color: white;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
  }
  
  button:hover, .btn:hover {
    background: #0e9e13;
    transform: translateY(-2px);
  }
  
  button:active, .btn:active {
    transform: translateY(0);
  }
  
  /* ================================
     Seções da Apresentação
  ================================ */
  .section {
    margin: 40px 0;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  
  .section.hidden {
    opacity: 0;
    transform: translateY(20px);
  }
  
  /* ================================
     Barra de Progresso
  ================================ */
  .progress-container {
    width: 100%;
    background: #e5e7eb;
    border-radius: 6px;
    margin: 20px 0;
    height: 10px;
  }
  
  .progress-bar {
    width: 0%;
    height: 100%;
    background: #2563eb;
    border-radius: 6px;
    transition: width 0.3s ease;
  }
  
  /* ================================
     Quiz Interativo
  ================================ */
  .quiz-card {
    background: #f3f4f6;
    padding: 15px;
    border-radius: 10px;
    margin: 15px 0;
  }
  
  .quiz-card h3 {
    margin-bottom: 10px;
  }
  
  .quiz-option {
    display: block;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .quiz-option:hover {
    background: #e5e7eb;
  }
  
  .quiz-option.correct {
    border-color: #10b981;
    background: #d1fae5;
  }
  
  .quiz-option.wrong {
    border-color: #ef4444;
    background: #fee2e2;
  }
  
  /* ================================
     Rodapé
  ================================ */
  footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    background: #f3f4f6;
    border-top: 2px solid #e5e7eb;
    font-size: 0.9em;
    color: #4b5563;
  }

  .tiny{
    color: rgb(69, 145, 238);
    font-size: 25px;
  }
  .tiny2{
    color: rgb(69, 145, 238);
    font-size: 25px;
  }
  .slide{
  color: rgb(56, 243, 9);
   font-size: 0.9em;
    text-shadow: 0 0 8px #f7f71d;

  }