/*Zerando CSS*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /*BODY*/
  body {
   scroll-behavior: smooth;
   height: 100%;
   width: auto;
  }

    
  
  /*Responsividade Notebooks e Computadores*/
    @media screen and (max-width: 9880px) {
      body {
        margin-top: 80px;
       }
      .fundo {
        float: right;
        display: none;
        visibility: collapse;       
      }
      .log {
        display: none;
      }



      section{
        width: 100%; 
        background-color: #75a9d7;
        padding: 1%;
        margin: 1% 1% 0 0;
      }
      .align-center{
        width: 100%;
        display: flex;
        gap: 155px;
        padding: 0 15% 0 15%;
        background-color: green;
      }
      
      .aling {
        display: flex;
        gap: 1vw;
      } 
  
      .informativo{
        padding:1%;
        overflow: hidden;
        background-color: blue;
        width: 100%;
        display: inline-block;
      }
      .informativo img{
        float:left;
        width: 50%;
      }
      
      .produtos{
        display: inline;
        padding: 1%;
        width: 100%;
        background-color: red;
        overflow: hidden;
      }
      .produtos img{
        width: 100%;
      }
      
    }


    /*Responsividade Tables e Celulares*/
      @media screen and (max-width: 999px) {
        /*Body e alinhamento*/
          .fundo{
            background: url("./img/fundo1.jpg") no-repeat;
            background-size: cover;
            background-position: center;
            top: 0; 
            height: 50vh;
            display: flex;
            justify-content: center;
            align-items: center;
            justify-items: center;
          } 
          .nav-aling{
            display: flex;
            justify-content: space-around;
            align-items: center;
            gap: 25vw;
          }
          .fundo {
            float: none;
            visibility: unset;       
          }
        /**/
        
        /*MAIN Conteúdo principal*/
          section{
            /*   width: 100vw; */
              background-color: #75a9d7;
              padding: 1%;
              margin: 1% 1% 0 0;
            }
            .align-center{ 
              display: flex;
              justify-content: center;
              align-items: center;
              justify-items: center;
              background-color: green;
            }
            .aling {
              display: inline-block;
              gap: 1vw;
            } 
            .informativo{
              padding:1%;
              overflow: hidden;
              background-color: blue;
              width: 100%;
              display: inline-block;
            }
            .informativo img{
              float:left;
              width: 50%;
            }            
            .produtos{
              display: inline-block;
              padding: 1%;
              width: 390px;
              background-color: red;
              overflow: hidden;
            }
            .produtos img{
              width: 100%;
            }
        /**/

      }

    /**/
          
/*HEADER GERAL*/

/*Tamanho e alinhamento icone sacola*/
  .log2{
    margin-left: 30px;
  }

  .log2 img{
    width: 50px;
  }
/**/


/*ALINHAMENTO GERAL nav-bar*/
  /*NAV-BAR PCS E NOTEBOOKS*/
  .nav-aling{
    display: flex;
    justify-content: space-around;
    align-items: center;
    }

  .nav-bar {
    position: fixed;
    top: 0;
    background: bisque;
    margin: 0;
    top: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
     height: 75px;
  }
  .nav-list {
    list-style: none;
    display: flex;
  }
          
  .nav-list li {
    letter-spacing: 3px;
    margin-left: 32px;
  }
  /**/


  /*NAV-BAR MOBILE*/        
      .mobile-menu {
        display: none;
        cursor: pointer;
      }
          
      .mobile-menu div {
        width: 32px;
        height: 2px;
        background: #fff;
        margin: 8px;
        transition: 0.3s;
      }
  

      
  @media (max-width: 999px) {
    body {
      overflow-x: hidden;
    }
    .logo{
      display: none;
    }

    .log {
      align-items: center;
      display: block;
      width: 50px;
    }

    .nav-list {
      position: absolute;
      top: 8vh;
      right: 0;
      width: 100vw;
      height: 92vh;
      background: bisque;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      transform: translateX(100%);
      transition: transform 0.3s ease-in;
    }
    .nav-list li {
      margin-left: 0;
      opacity: 0;
    }
    .mobile-menu {
      display: block;
    }
  }
  
  .nav-list.active {
    transform: translateX(0);
  }
  
  @keyframes navLinkFade {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .mobile-menu.active .line1 {
    transform: rotate(-45deg) translate(-8px, 8px);
  }
  
  .mobile-menu.active .line2 {
    opacity: 0;
  }
  
  .mobile-menu.active .line3 {
    transform: rotate(45deg) translate(-5px, -7px);
  }


  .nav-bar{
    position: fixed;
    display: flex;
    top: 0;  
    width: 100%;
    height: 75px;
    align-items: center;
    background: bisque;
    justify-content: space-around;
  }