html {
    scroll-behavior: smooth;
  }
  
  body {
    background-color: #f5fcff;
    font-family: 'PT Sans', sans-serif;
  }
  
  ::-webkit-scrollbar {
    width: 12px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: rgb(255, 241, 223);
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #00878A;
    border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #7BBDD6;
  }
  
  * {
    margin: 0px;
    box-sizing: border-box;
  }
  
  nav {
    z-index: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    font-family: 'Questrial', sans-serif;
    background-color: #cce8ff;
    padding-top: 1%;
    padding-bottom: 1%;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
  }

  .logo {
    z-index: 1;
  }
  
  .nav-links {
    display: flex;
    justify-content: space-around;
    width: 35%;
  }
  
  .nav-links li{
    list-style: none;
  }
  
  .nav-links a{
    color: #00878A;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 18px;
  }
  
  .nav-links a:hover{
    color: #7BBDD6;
    transition: 0.5s;
    border-bottom: 1px solid rgb(117, 96, 69);
  }
  
  .burguer div{
    width: 25px;
    height: 3px;
    margin: 5px;
    background-color: rgb(23, 36, 59);
  }
  
  .burguer {
    display: none;
  }
  
  .nav-active{
    transform: translateX(0%);
  }
  
  /* The sidebar menu */
.direita {
    height: auto; /* Full-height: remove this if you want "auto" height */
    width: 800px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 0; /* Stay on top */
    top: 15%; /* Stay at the top */
    right: 0;
    padding-right: 100px;
    padding-left: 20px;
    background-color: #f5fcff; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px;
    font-size: 25px;
    font-family: 'PT Sans', sans-serif;
    color: #00878A;
  }

  .esquerda {
    margin-top: 8%;
    margin-left: 250px; /* Same as the width of the sidebar */
    padding: 0px 10px;
    margin-right: 800px;
  }

  .esquerda img {
      border: rgb(255, 241, 223) solid 4px;
  }

  .pequeno {
      margin-top: 30px;
  }

  .pequeno img{
    width: 180px;
    margin: 20px 20px 0px 0px;
    border: rgb(255, 241, 223) solid 4px;
  }

  .row > .column {
    padding: 8px;
  }
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .column {
    width: 205px;
    float: left;
  }
  
  /* The Modal (background) */
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
    opacity: 98%;
  }

  /* Modal Content */
  .modal-content {
    position: relative;
    background-color: black;
    margin: auto;
    padding: 0;
    width: 65%;
    text-align: center;
    opacity: 100%;
  }
  
  /* The Close Button */
  .close {
    color: white;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
  }
  
  .mySlides {
    display: none;
  }
  
  .cursor {
    cursor: pointer;
  }
  
  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: rgb(255, 241, 223);
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }

  .prev {
    left: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover,
  .next:hover {
    background-color: #f5fcff;
    transition: 0.5s;
    color: #00878A;
  }
  
  img {
    margin-bottom: -4px;
  }
  
  .caption-container {
    text-align: center;
    background-color: black;
    padding: 2px 16px;
    color: white;
  }
  
  .demo {
    opacity: 0.6;
  }
  
  .active,
  .demo:hover {
    opacity: 1;
  }
  
  img.hover-shadow {
    transition: 0.3s;
  }
  
  .hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  
  .redes {
    text-align: center;
    width: 100%;
    position: sticky;
    top: 0;
    float: left;
  }
  
  .icones {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 15px;
    padding-right: 15px;
    width: 70px;
    position: sticky;
    border-radius: 50%;
  }
  
  footer {
    background-color: rgb(255, 241, 223);
    padding: 3% 0 3% 0;
    text-align: center;
    font-family: 'PT Sans', sans-serif;
    color: #00878A;
    margin-top: 10%;
    z-index: 2;
  }
  
  footer .rodape {
    font-size: 17px;
    padding-top: 2%;
  }
  
    @media screen and (max-width:1700px) {
    .nav-links {
      width: 40%;
    }
  
    .empresa {
      font-family: 'PT Sans', sans-serif;
      margin-left: 15%;
      margin-right: 25%;
      margin-top: 3%;
      height: 100%; 
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  
    .imagembotao .melhor {
      position: absolute;
      top: 45%;
      margin-left:39%;
      margin-right: 35%;
      text-align: center;
      color: #00878A;
      font-size: 60px;
      font-family: 'Questrial', sans-serif;
    }

    .direita {
        height: auto; /* Full-height: remove this if you want "auto" height */
        width: 500px; /* Set the width of the sidebar */
        position: fixed; /* Fixed Sidebar (stay in place on scroll) */
        z-index: 0; /* Stay on top */
        top: 13%; /* Stay at the top */
        right: 0;
        padding-right: 50px;
        padding-left: 20px;
        background-color: #f5fcff; /* Black */
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 25px;
        font-size: 18px;
        font-family: 'PT Sans', sans-serif;
        color: #00878A;
      }
    
      .esquerda {
        margin-top: 12%;
        margin-left: 50px; /* Same as the width of the sidebar */
        margin-right: 600px;
      }
    
      .esquerda img {
          border: rgb(255, 241, 223) solid 2px;
          width: 700px;
      }
    
      .pequeno {
          margin-top: 30px;
      }
    
      .pequeno img{
        width: 150px;
        margin: 10px 10px 0px 0px;
        border: rgb(255, 241, 223) solid 4px;
      }
    }

    @media screen and (max-width:882px) {
      body {
        overflow-x: hidden;
      }
      
      .nav-links {
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        padding-right: 2px;
      }
    
      .categorias img {
        width: 75px;
        border-radius: 50%;
        border: rgb(117, 96, 69) 4px solid;
      }
    
      .imagembotao {
        height: 100%;
        width: auto;
        z-index: 0;
      }
    
      .nav img {
        width: 15px;
        padding-left: 2px;
      }
    
      nav {
        z-index: 1;
        display: flex;
        align-items: center;
        min-height: 8vh;
        font-family: 'Questrial', sans-serif;
        background-color: #cce8ff;
        padding-top: 1%;
        padding-bottom: 1%;
        position: fixed; /* Set the navbar to fixed position */
        top: 0; /* Position the navbar at the top of the page */
        width: 100%; /* Full width */
      }
    
      .nav-links a{
        color: #00878A;
        text-decoration: none;
        letter-spacing: 2px;
        font-weight: bold;
        font-size: 12px;
      }
  
      .divisoria h2 {
        font-size: 30px;
        margin-top: 30%;
      }
  
      .produtos img{
        width: 210px;
      }

      .direita {
        height: auto; /* Full-height: remove this if you want "auto" height */
        width: 300px; /* Set the width of the sidebar */
        position: static; /* Fixed Sidebar (stay in place on scroll) */
        z-index: 0; /* Stay on top */
        top: 17%; /* Stay at the top */
        margin-left: 10%;
        margin-top: 30%;
        padding-left: 0px;
        background-color: #f5fcff; /* Black */
        overflow-x: hidden; /* Disable horizontal scroll */
        padding: 25px 0px 0px 0px;
        font-size: 15px;
        text-align: center;
        font-family: 'PT Sans', sans-serif;
        color: #00878A;
      }
    
      .esquerda {
        margin-left: 25px; /* Same as the width of the sidebar */
        margin-right: 25px;
      }
    
      .esquerda img {
          border: rgb(255, 241, 223) solid 2px;
          width: 300px;
          margin-top: 10%;
      }

      .column {
        width:140px;
        float: left;
      }
      
      .modal-content {
        position: relative;
        background-color: black;
        margin: auto;
        padding: 0;
        width: 90%;
        text-align: center;
        opacity: 100%;
        margin-top: 25%;
      }

      .prev,
      .next {
      cursor: pointer;
      position: absolute;
      top: 65%;
      width: auto;
      padding: 16px;
      margin-top: -50px;
      color: rgb(255, 241, 223);
      font-weight: bold;
      font-size: 20px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
      -webkit-user-select: none;
      }

      footer {
        background-color: rgb(255, 241, 223);
        padding: 3% 0 3% 0;
        text-align: center;
        font-family: 'PT Sans', sans-serif;
        color: #00878A;
        margin-top: 30%;
        z-index: 2;
      }

      footer .rodape {
        font-size: 15px;
        padding-top: 2%;
      }
    }