body {font-family: Arial, sans-serif;
      background-image: url('https://imagens-minhapagina.netlify.app/fundo_pc.png');
      background-position: center;
      margin: 0;
      padding: 0;}

     audio{
       
        width: 10%;
        position: fixed;
      }
      #audio > h6{
        margin-left: 2vw;
        position: fixed;
        margin-top: auto;
        color: red;
      }
   

      .pulsar {
  color: white;
  background-color:#00f;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 5vh;
  padding: 14px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 35px;
  font-weight: bold;
  animation: pulse 1.5s infinite;
  animation-direction: reverse;  
}


@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(21, 6, 232, 0.863); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(9, 48, 240, 0.776); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(60, 69, 240, 0); }
}

      header {display: flex;
      justify-content: center;
      gap: 2vw;
      background-color: rgba(100, 146, 255, 0.91);
      color: white;
      padding: 15px;
      font-size: 22px;
      font-weight: bold;}

      #logu{
        background: #fff;
        width: 10vw;
        border-radius: 30%;
      }

      h4{
        text-align: center;
        margin: 3vh;
        background: rgba(255, 255, 255, 0.6);
        color: #00f;
      }
      table{
        color: #fff;
        height: 50vh;
        justify-self: center;
        text-align: center;
        font-size: 2vw;
        background: rgba(100, 146, 255, 0.6);
      }

      table, th, tr, td{
        border: 1px dashed #000;
      }

      button:hover{
        cursor: pointer;
        background: local;
      }
      
      a:hover{
        cursor: pointer;
      }
      .caixa{
        justify-self: center;
        justify-items: center;
        background: rgba(100, 146, 255, 0.6);
        border-radius: 10%;
        width: auto;
      }

      .caixa > h3{
        color: #fff
      }

      form{
        display: flex;
        flex-direction: column;
        padding: 5vh;
      }

    .container {display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin:5vh;
    }

    .produto {background: white;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      width: 220px;
      text-align: center;
      padding: 15px;}

    .produto img {width: 100%;
      border-radius: 10px;}

    .produto h3 {font-size: 18px;
      margin: 10px 0;}

      h3{
        text-transform: capitalize;
        text-align: center;
      }

    .produto p {font-size: 16px;
      color: #333;}

    .produto button {background-color: #0d6efd;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: bold;
      transition: 0.3s;}

      video{
        width: 100%;
        
      }

    .produto button:hover {background-color: #094bd1;}
  

    #carrinho {background: white;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      margin: 20px;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);}

    #carrinho h2 {color: #0d6efd;}

    #itensCarrinho {margin-bottom: 15px;}

    #total {font-weight: bold;
      font-size: 18px;}

    #finalizar {background-color: #25D366;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;}

    #finalizar:hover {background-color: #1ebf59;}

    footer{
      text-align: center;
      color: #fff;
       width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 5vh;
    }

    footer > a{
      color: #000;
      font-size:xx-large;
    }

    footer > a>  img{
      width: 50px;
    }


    h5{
      text-align: center;
      position:absolute;
      width: 100%;
      margin-top: 10vh;
      color: #000;
    }

    h4{
      font-size: 4vw;
    }

    p{
      display: flex;
      flex-direction: column;
      align-content: center;
    }

    #whatsapp{
      width: 8vw;
    }

    video{
      border-radius: 10px;
      margin-top: 4vh;
    }

.carousel {width: 100%;
  overflow: hidden;}

.carousel-track {display: flex;
  gap: 15px;
  animation: scroll 5s linear infinite;
  will-change: transform;}

@keyframes scroll {from {transform: translateX(0);}
  to {transform: translateX(-95%);}}

.produto {min-width: 200px;
  background: #fff;
  padding: 20px;
  text-align: center;}

a{text-decoration: none;}

@media(min-width: 344px) and (max-width: 1024px){


*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
  background-image: url('https://imagens-minhapagina.netlify.app/fundo_dispositivo.png');
}

  header{font-size: 3vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 5vw;
    width: auto;
  }

    audio{
       
        width: 30%;
        position: fixed;
      }
      #audio > h6{
        margin-left: 5vw;
        position: fixed;
      }

  .pulsar{
    font-size:7vw;
    margin-top: 2vh;
    align-items: center;
    background-color: #00f
  }

  #logu{
    background: #fff;
    width:20vw;
    height: auto;
  }

  #grade{
    justify-content: center;
    width: 100%;
    padding-left: 1vw;
    padding-right: 1vw;
  }

  table{
    font-size: medium;
     height: auto;
     padding: 1vw;
  }

  h4{
    font-size: 5vw
  }

form{
  margin-bottom: 5vh;
}


  footer{
    display: flex;
    justify-content: space-around; 
    font-size: small;
    
  }

  footer > a{
    color: #000;
    font-size: small;
  }

  footer > a> img{
    width: 30px;
  }

  h5{
    text-align: center;
    background-color: rgba(100, 100, 100, 0.5);
    color: #fff;
    margin-top: 
  }

}