#servicos.section-page {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: 100px;
  gap: 32px;
  width: 1200px;

  > .title {
    align-items: center;
    display: flex;
    gap: 16px;
  }

  > .content {
    display: grid;
    grid-template-areas:
      "entrar-em-contato faturas pagamento-pix app-opponet"
      "entrar-em-contato boleto opponews localizacao";
    grid-template-columns: calc(25% - 16px) calc(25% - 16px) calc(25% - 16px) calc(
        25% - 16px
      );
    width: 100%;
    gap: 24px;

    > .item {
      align-items: center;
      background-color: white;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 16px;
      transition: 200ms ease-out;
      > .title {
        align-items: center;
        justify-content: center;
        display: flex;
        gap: 8px;
        width: fit-content;
      }

      > .p2 {
        color: #1c026c;
        text-align: center;
      }

      > .email-input {
        background-color: white;
        border: 1px solid #1c026c;
        border-radius: 24px;
        display: flex;
        padding: 0px 8px;
        > input {
          background-color: transparent;
          border: 0;
          color: #1c026c;
        }
        > input::placeholder {
          color: rgb(145, 160, 255);
        }
        > input:focus {
          outline: none;
        }
      }
    }

    >.item.disabled{
      opacity: 0.3;
    }

    > .item:not(.entrar-em-contato):not(.disabled) {
      cursor: pointer;
    }

    > .item:not(.entrar-em-contato):not(.disabled):hover {
      transform: translateY(-16px);
    }

    >.item:hover{
      background-color: #f3eeff;
    }

    > .entrar-em-contato {
      grid-area: entrar-em-contato;

      >p{
        max-width: 70%;
      }
      
      >button{
        box-shadow: none;
        margin-top: 8px;
      }
      
      > .title > h5 {
        color: #a91900;
      }
    }

    >.entrar-em-contato:hover{
      
      background-color: white;
    }

    > .faturas {
      grid-area: faturas;
    }

    > .pagamento-pix {
      grid-area: pagamento-pix;
    }

    > .pagamento-pix,
    .faturas,
    .boleto {
      > .title {
        > h5 {
          color: #00790c;
        }
      }
      > p.p2 {
        color: #004106;
      }
    }

    > .pagamento-pix:hover,
    .faturas:hover,
    .boleto:hover {
      background-color: hsl(125, 100%, 97%);
    }

    > .app-opponet {
      grid-area: app-opponet;
      > .title > h5 {
        color: var(--Azul);
      }
    }

    > .boleto {
      grid-area: boleto;
    }

    > .opponews {
      grid-area: opponews;
      > .title > h5 {
        color: var(--Azul);
      }
    }

    > .localizacao {
      grid-area: localizacao;
      > .title > h5 {
        color: var(--Azul);
      }
    }
  }

  @media (max-width: 1300px) {
    box-sizing: border-box;
    padding: 0px 40px;

    > .content {
      grid-template-areas:
        "entrar-em-contato faturas pagamento-pix"
        "entrar-em-contato boleto app-opponet"
        "opponews localizacao .";

      grid-template-columns: repeat(3, calc(33% - 16px));
    }
  }

  @media (max-width: 800px) {
    > .content {
      grid-template-areas:
        "entrar-em-contato faturas"
        "entrar-em-contato pagamento-pix"
        "boleto app-opponet"
        "localizacao opponews";
      grid-template-columns: repeat(2, calc(50% - 32px));
    }
  }

  @media (max-width: 600px) {
    > .content {
      display: flex;
      flex-direction: column;
    }
  }
}