@media (max-width: 991px) {
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(107deg, #000 17.06%, #08182D 89.94%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Centraliza os elementos verticalmente */
  }

  body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('img/background.webp') lightgray 50% / cover no-repeat;
    mix-blend-mode: color-dodge;
    opacity: 0.25;
    z-index: 0;
  }

  .container {
    width: calc(100% - 60px); /* Subtract left and right margins */
    height: calc(100% - 60px); /* Subtract top and bottom margins */
    margin: 0;
    bottom: 30px;
    left: 30px;
    right: 30px;
    top: 30px;
    text-align: center; /* Centraliza o texto */
    color: white;
    z-index: 1;
    display: flex;
    flex-direction: column; /* Organiza os elementos verticalmente */
    align-items: center;
    gap: 20px; /* Espaçamento entre os elementos */
  }

  .logo {
    position: relative;
    margin: 40px auto 20px auto; /* Centraliza e adiciona margem inferior */
    width: 120px; /* Ajusta o tamanho do logo */
    z-index: 2;
    order: 1; /* Primeiro elemento */
  }

  .coming-soon {
    position: relative;
    margin: 50px auto 0 auto; /* Centraliza e adiciona margem superior */
    width: 100%;
    order: 2; /* Segundo elemento */
  }

  .reserved {
    position: absolute; /* Fixa o elemento */
    bottom: 0; /* Coloca no fundo da página */
    left: 0;
    width: 100%; /* Garante que ocupe toda a largura */
    text-align: center; /* Centraliza o texto */
    margin: 0; /* Remove margens extras */
  }

  h1 {
    margin: 0 0 16px 0;
    color: #FFF;
    font-family: Roboto;
    font-size: 2rem; /* Reduz o tamanho da fonte no mobile */
    font-weight: 700;
  }

  p {
    margin: 6px 0 10px 0;
    color: #8C8C8C;
    font-family: Roboto;
  }

  .p-bold {
    color: #C4C4C4;
    font-weight: 600;
  }

  canvas {
    display: none; /* Esconde o canvas no mobile, se necessário */
  }
}

@media (min-width: 992px) { /* Adjust the min-width as needed */
  .logo {
    position: absolute;
    left: 60px; /* This will only apply to larger screens */
    margin: 20px;
    width: 150px;
    z-index: 1;
  }
  .coming-soon {
    position: absolute;
    bottom: 0;
    left: 60px; /* This will only apply to larger screens */
    margin: 20px;
  }
    .reserved {
    position: absolute;
    top: 0;
    right: 18px;
    margin-top: 10px;
  }
}