/* CSS styles */
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    .banner {
      position: relative;
      width: auto;
      height: 350px;
      padding: 20px;
      color: black;
      text-align: center;
    }

    .banner::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* <!-- ############### ALTERACAO ###############  --> */
      background-image: url('../images/banner.png');
      background-size: cover;
      background-size: 100% 100%;
      background-position: center;
      opacity: 0.4;
      z-index: -1;
    }
    
    .banner h1 {
      font-size: 50px;
      margin-bottom: 10px;
      color: black;
      font-family: 'Jost', sans-serif;
    }

    .banner p {
      font-size: 16px;
      font-family: 'Jost', sans-serif;
    }

    .grid-container-1 {
      /*display: grid;*/
      display: grid;
      grid-template-columns: 1fr 2fr;
      background-color: white; 
    }

    .grid-container-2 {
      /*display: grid;*/
      display: grid;
      grid-template-columns: 1fr 2fr;
      background-color: #d1d1d1; 
    }

    .product-image {
      max-width: 100%;
      max-height: 100%;
      /*height: auto;*/
      height: fit-content;
      align-self: center;
    }

    .product-details {
      display: flex;
      flex-direction: column;
      align-self: center;
      margin-left: 20px;
    }

    .product-name {
      font-weight: bold;
      margin-bottom: 5px;
    }

    .product-description {
      margin-bottom: 10px;
    }

    .product-price {
      font-weight: normal;
    }

    .product-qtd {
      font-weight: bold;
    }

    .quantity-dropdown {
      margin-top: 5px;
    }

    .total-value {
      font-weight: bold;
    }

    .mostra-pedido {
      display: grid;
      justify-content: center;
      align-items: center;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 20px;
      background-color: #197706;
      color: #fff;
      text-decoration: none;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-family: Arial, sans-serif;
      font-size: 14px;
      
    }

    .btn img {
      width: 40px; /* Adjust the width as needed */
      height: 40px; /* Adjust the height as needed */
      margin-right: 5px;
    }

    .btn:hover {
      background-color: #217dbb;
    }

    
    .footer {
      background-color: #f2f2f2;
      padding: 10px;
      text-align: center;
      position: relative;
      left: 0;
      bottom: 0;
      width: 100%;
    }