*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body, a{
    font-family: Poppins;
    color: #454545;
    text-decoration: none;
  }
  header{
    padding-left: 70px;
    padding-right: 70px;
    box-shadow: #0000000f 0px 8px 18px;
  }
  .grid {
    display: flex;
    flex-wrap: wrap;
  }

  [class^="g-"] {
    box-sizing: border-box;
  }

  .g-1  {
    flex: 0 0 10%;
    width: 10%;
  }
  .g-2  {
    flex: 0 0 20%;
    width: 20%;
  }
  .g-3  {
    flex: 0 0 30%;
    width: 30%;
  }
  .g-4  {
    flex: 0 0 40%;
    width: 40%;
  }
  .g-5  {
    flex: 0 0 50%;
    width: 50%;
  }
  .g-6  {
    flex: 0 0 60%;
    width: 60%;
  }
  .g-7  {
    flex: 0 0 70%;
    width: 70%;
  }
  .g-8  {
    flex: 0 0 80%;
    width: 80%;
  }
  .g-9  {
    flex: 0 0 90%;
    width: 90%;
  }
  .g-10 {
    flex: 0 0 100%;
    width: 100%;
  }
    /* Alinhamento de texto */
  .text-left    { text-align: left; }
  .text-center  { text-align: center; }
  .text-right   { text-align: right; }
  .text-justify { text-align: justify; }

  /* Float */
  .left  { float: left; }
  .right { float: right; }
  .clear { clear: both; }

  /* Display */
  .block      { display: block; }
  .inline     { display: inline; }
  .inline-block { display: inline-block; }
  .flex       { display: flex; }
  .none       { display: none; }

  .d-none{
    display: none;
  }

  .h-100{
    height: 100%;
  }

  /* Margens */
  .m-auto  { margin: auto; }
  .m-0  { margin: 0; }
  .m-1  { margin: 4px; }
  .m-2  { margin: 8px; }
  .m-3  { margin: 16px; }
  .m-4  { margin: 24px; }

  .mt-0 { margin-top: 0px!important; }
  .mb-0 { margin-bottom: 0px!important; }
  .ml-0 { margin-left: 0px!important; }
  .mr-0 { margin-right: 0px!important; }
  .mt-1 { margin-top: 4px!important; }
  .mb-1 { margin-bottom: 4px!important; }
  .ml-1 { margin-left: 4px!important; }
  .mr-1 { margin-right: 4px!important; }
  .mt-2 { margin-top: 12px!important; }
  .mb-2 { margin-bottom: 12px!important; }
  .ml-2 { margin-left: 12px!important; }
  .mr-2 { margin-right: 12px!important; }
  .mt-3 { margin-top: 20px!important; }
  .mb-3 { margin-bottom: 20px!important; }
  .ml-3 { margin-left: 20px!important; }
  .mr-3 { margin-right: 20px!important; }
  .mt-4 { margin-top: 40px!important; }
  .mb-4 { margin-bottom: 40px!important; }
  .ml-4 { margin-left: 40px!important; }
  .mr-4 { margin-right: 40px!important; }

  /* Padding */
  .p-0  { padding: 0!important; }
  .p-1  { padding: 4px!important; }
  .p-2  { padding: 8px!important; }
  .p-3  { padding: 16px!important; }
  .p-4  { padding: 24px!important; }
  .pt-0 { padding-top: 0px!important; }
  .pb-0 { padding-bottom: 0px!important; }
  .pl-0 { padding-left: 0px!important; }
  .pr-0 { padding-right: 0px!important; }
  .pt-1 { padding-top: 4px!important; }
  .pb-1 { padding-bottom: 4px!important; }
  .pl-1 { padding-left: 4px!important; }
  .pr-1 { padding-right: 4px!important; }
  .pt-2 { padding-top: 12px!important; }
  .pb-2 { padding-bottom: 12px!important; }
  .pl-2 { padding-left: 12px!important; }
  .pr-2 { padding-right: 12px!important; }
  .pt-3 { padding-top: 20px!important; }
  .pb-3 { padding-bottom: 20px!important; }
  .pl-3 { padding-left: 20px!important; }
  .pr-3 { padding-right: 20px!important; }
  .pt-4 { padding-top: 50px!important; }
  .pb-4 { padding-bottom: 50px!important; }
  .pl-4 { padding-left: 50px!important; }
  .pr-4 { padding-right: 50px!important; }

  /* Font */
  .bold      { font-weight: bold; }
  .italic    { font-style: italic; }
  .uppercase { text-transform: uppercase; }
  .lowercase { text-transform: lowercase; }
  .capitalize { text-transform: capitalize; }

  /* Cores básicas */
  .bg-red { background-color: #E60303; }
  .bg-white { background-color: #FFFFFF; }
  .bg-gray { background-color: #F5F5F5; }
  .text-white { color: #fff; }
  .text-black { color: #000; }
  .text-gray  { color: #666; }

  /* Posição */
  .relative { position: relative; }
  .absolute { position: absolute; }
  .fixed    { position: fixed; }
  .static   { position: static; }

  /* Outros */
  .rounded     { border-radius: 8px; }
  .shadow      { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
  .border      { border: 1px solid #ccc; }
  .hidden      { visibility: hidden; }
  .visible     { visibility: visible; }
  
  /* Flex container */
  .flex { display: flex; }
  .flex-wrap { flex-wrap: wrap; }
  .flex-nowrap { flex-wrap: nowrap; }

  /* Justify Content */
  .justify-content-left     { justify-content: flex-start; }
  .justify-content-center   { justify-content: center; }
  .justify-content-right    { justify-content: flex-end; }
  .justify-content-between  { justify-content: space-between; }
  .justify-content-around   { justify-content: space-around; }
  .justify-content-evenly   { justify-content: space-evenly; }

  /* Align Items */
  .align-items-start    { align-items: flex-start; }
  .align-items-center   { align-items: center; }
  .align-items-end      { align-items: flex-end; }
  .align-items-stretch  { align-items: stretch; }
  .align-items-baseline { align-items: baseline; }

  /* Align Self */
  .align-self-start    { align-self: flex-start; }
  .align-self-center   { align-self: center; }
  .align-self-end      { align-self: flex-end; }
  .align-self-stretch  { align-self: stretch; }

  /* Flex Direction */
  .flex-row    { flex-direction: row; }
  .flex-column { flex-direction: column; }

  /* Gap (espaçamento entre itens) */
  .gap-0  { gap: 0; }
  .gap-1  { gap: 4px; }
  .gap-2  { gap: 8px; }
  .gap-3  { gap: 16px; }
  .gap-4  { gap: 24px; }

  /* Botoes */
  .btn{
    border-radius: 5px;
    padding: 10px 25px;
    font-size: 18px;
    display: inline-block;
  }
  .btn-red{
    background: #E60303;
    color: white;
  }
  .btn-gray {
    background-color: #454545; 
    color: white;
  }

  /**/
  .container{
    max-width: 1180px;
    width: 100%;
    margin: auto;
    padding: 20px 0;
  }
      /* Fundo escurecido */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999;
    }

    /* Janela do formulário */
    .form-container {
      background: white;
      padding: 30px;
      border-radius: 10px;
      width: 100%;
      max-width: 500px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      position: relative;
    }

    .form-container h2 {
      margin-top: 0;
    }

    /* Botão de fechar */
    .close-btn {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 20px;
      background: none;
      border: none;
      cursor: pointer;
    }

    /* Campos do formulário */
    .form-group {
      margin-bottom: 15px;
    }

    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }

    .form-group input,
    .form-group textarea {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .form-group textarea {
      resize: vertical;
    }

    .submit-btn {
      background-color: #28a745;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 5px;
      cursor: pointer;
    }
    #whatsapp-button {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 9999;
      /*background-color: #25d366;*/
      padding: 10px;
      border-radius: 50%;
      /*box-shadow: 0 2px 10px rgba(0,0,0,0.3);*/
      transition: transform 0.3s ease;
    }

    #whatsapp-button img {
      width: 40px;
      height: 40px;
    }

    #whatsapp-button:hover {
      transform: scale(1.1);
    }


    @media (max-width: 768px) {
      body{
        font-size: 18px;
      }
      .g-1,.g-2,.g-3,.g-4,.g-5,.g-6,.g-7,.g-8,.g-9,.g-10,.g-11,.g-12{
        flex: 0 0 100%;
        width: 100%;
      }
      .g-mb-1  {
        flex: 0 0 10%;
        width: 10%;
      }
      .g-mb-2  {
        flex: 0 0 20%;
        width: 20%;
      }
      .g-mb-3  {
        flex: 0 0 30%;
        width: 30%;
      }
      .g-mb-4  {
        flex: 0 0 40%;
        width: 40%;
      }
      .g-mb-5  {
        flex: 0 0 50%;
        width: 50%;
      }
      .g-mb-6  {
        flex: 0 0 60%;
        width: 60%;
      }
      .g-mb-7  {
        flex: 0 0 70%;
        width: 70%;
      }
      .g-mb-8  {
        flex: 0 0 80%;
        width: 80%;
      }
      .g-mb-9  {
        flex: 0 0 90%;
        width: 90%;
      }
      .g-mb-10 {
        flex: 0 0 100%;
        width: 100%;
      }
        /* Margens */
      .m-mb-auto  { margin: auto; }
      .m-mb-0  { margin: 0; }
      .m-mb-1  { margin: 4px; }
      .m-mb-2  { margin: 8px; }
      .m-mb-3  { margin: 16px; }
      .m-mb-4  { margin: 24px; }

      .mt-mb-0 { margin-top: 0px!important; }
      .mb-mb-0 { margin-bottom: 0px!important; }
      .ml-mb-0 { margin-left: 0px!important; }
      .mr-mb-0 { margin-right: 0px!important; }
      .mt-mb-1 { margin-top: 4px!important; }
      .mb-mb-1 { margin-bottom: 4px!important; }
      .ml-mb-1 { margin-left: 4px!important; }
      .mr-mb-1 { margin-right: 4px!important; }
      .mt-mb-2 { margin-top: 12px!important; }
      .mb-mb-2 { margin-bottom: 12px!important; }
      .ml-mb-2 { margin-left: 12px!important; }
      .mr-mb-2 { margin-right: 12px!important; }
      .mt-mb-3 { margin-top: 20px!important; }
      .mb-mb-3 { margin-bottom: 20px!important; }
      .ml-mb-3 { margin-left: 20px!important; }
      .mr-mb-3 { margin-right: 20px!important; }
      .mt-mb-4 { margin-top: 40px!important; }
      .mb-mb-4 { margin-bottom: 40px!important; }
      .ml-mb-4 { margin-left: 40px!important; }
      .mr-mb-4 { margin-right: 40px!important; }

      /* Padding */
      .p-mb-0  { padding: 0!important; }
      .p-mb-1  { padding: 4px!important; }
      .p-mb-2  { padding: 8px!important; }
      .p-mb-3  { padding: 16px!important; }
      .p-mb-4  { padding: 24px!important; }
      .pt-mb-0 { padding-top: 0px!important; }
      .pb-mb-0 { padding-bottom: 0px!important; }
      .pl-mb-0 { padding-left: 0px!important; }
      .pr-mb-0 { padding-right: 0px!important; }
      .pt-mb-1 { padding-top: 4px!important; }
      .pb-mb-1 { padding-bottom: 4px!important; }
      .pl-mb-1 { padding-left: 4px!important; }
      .pr-mb-1 { padding-right: 4px!important; }
      .pt-mb-2 { padding-top: 12px!important; }
      .pb-mb-2 { padding-bottom: 12px!important; }
      .pl-mb-2 { padding-left: 12px!important; }
      .pr-mb-2 { padding-right: 12px!important; }
      .pt-mb-3 { padding-top: 20px!important; }
      .pb-mb-3 { padding-bottom: 20px!important; }
      .pl-mb-3 { padding-left: 20px!important; }
      .pr-mb-3 { padding-right: 20px!important; }
      .pt-mb-4 { padding-top: 50px!important; }
      .pb-mb-4 { padding-bottom: 50px!important; }
      .pl-mb-4 { padding-left: 50px!important; }
      .pr-mb-4 { padding-right: 50px!important; }
      
      /* Justify Content */
      .justify-content-mb-left     { justify-content: flex-start!important; }
      .justify-content-mb-center   { justify-content: center!important; }
      .justify-content-mb-right    { justify-content: flex-end!important; }
      .justify-content-mb-between  { justify-content: space-between!important; }
      .justify-content-mb-around   { justify-content: space-around!important; }
      .justify-content-mb-evenly   { justify-content: space-evenly!important; }

      header {
          padding-left: 20px;
          padding-right: 20px;
      }
      .d-mb-block{
        display: block;
      }

      .abrirMenu{
        max-height: 200px!important;
        overflow: visible!important;
        background: white;
        opacity: 1!important;
      }
      .mb-hide-nav{
        padding: 0 20px;
        max-height: 0;
        overflow: hidden;
        transition: 0.5s ease;
        display: grid; 
        font-size: 22px;
        position: absolute;
        top: 68px;
        z-index: 100;
        background: white;
        width: 100%;
        left: 0;
        opacity: 0;
      }
      .slideshow-container img {
        content: url('../assets/slide-1-mb.png');
      }
      .title-banner {
          top: 78px !important;
          left: 20px !important;
          width: 100%!important;
          padding-right: 0px!important;
      }
      .title-banner .title {
        font-size: 35px!important;
      }
      .title-banner .sub-title {
        font-size: 25px!important;
        max-width: 80%!important;
      }
      .container {
          padding: 20px !important;
        }
      .grid.bg-red p{
        text-align: center;
        margin-bottom: 30px!important;
      }
      .bg-gray{
        text-align: center;
      }
      .contato a{
        line-height: 40px;
      }
    .service-card img {
        height: 120px!important;
      }
      footer p{
        font-size: 14px;
      }
    }