:root {
   --cor-botao: #00548c;
   --cor-hover: rgb(219, 219, 1);
   --cor-popup: rgba(255, 255, 255, 0.9);
   --text-popup: red;
}

.background-container {
   position: relative;
   background: url("../image/quietumplus-gb-pc.webp") no-repeat center top;
   background-size: cover;
   height: 100vh;
   /* filter: blur(4px); */
}

.popup {
   position: fixed;
   top: 45%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: var(--cor-popup);
   border: 3px solid #00548c;
   border-radius: 15px;
   color: white;
   padding: 2rem;
   z-index: 1000;
   opacity: 0;
   transform: scale(0);
   transition: opacity 1ms ease-in-out, transform 1ms ease-in-out;
   max-width: 800px;
}

.popup.visible {
   opacity: 1;
   transform: scale(1) translate(-50%, -50%);
   animation: pulse-grow 1.5s ease-in-out forwards;
}

@keyframes pulse-grow {
   0% {
      transform: translate(-50%, -50%) scale(0);
   }

   100% {
      transform: translate(-50%, -50%) scale(1);
   }
}

.popup .popup-content {
   text-align: center;
}

.popup .popup-content p {
   cursor: pointer;
   font-size: 2rem;
   font-weight: bold;
   text-align: end;
}

.popup .popup-content .popup-image {
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 2rem;
}

.popup .popup-content .popup-image h3 {
   font-size: 3.5rem;
   color: #000;
   width: 100%;
}

.popup .popup-content .popup-image h3 span {
   color: #00548c;
}

.popup .popup-content .popup-image img {
   width: 180px;
   margin: 1rem 0;
}

.popup .popup-content .cta {
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
}

.popup .popup-content .cta p {
   font-size: 2.4rem;
   color: #000;
   font-weight: normal;
}

.popup .popup-content .cta p span {
   font-size: 2.4rem;
   font-weight: bold;
   color: #00548c;
   user-select: text;
   cursor: text;
}

.popup .popup-content .cta input {
   border: 1px solid #000;
   border-radius: 10px;
   font-size: 1.8rem;
   margin-bottom: 1rem;
   padding: 0.5rem;
   width: 80%;
}

.popup .popup-content .cta .btn {
   background-color: var(--cor-botao);
   border-radius: 10px;
   color: #fff;
   display: inline-block;
   font-size: 2rem;
   font-weight: bold;
   padding: 0.7rem 2rem;
   width: fit-content;
}

.popup .popup-content .cta .btn:hover {
   transform: scale(1.05);
}

.btn:hover,
.btn:focus {
   background-color: var(--cor-hover);
   color: #000;
}

.footer {
   text-align: center;
   background-color: transparent;
   color: gray;
   font-size: 1.3rem;
   margin: auto;
   margin-top: 1rem;
   max-width: 1200px;
}

.footer p {
   padding: 1rem;
}

.footer nav {
   padding: 1rem;
}

.footer nav a {
   color: gray;
   font-size: 1.5rem;
}

@media (max-width: 1024px) {
   .background-container {
      background: url("../image/quietumplus-bg-t.webp") no-repeat center top;
      background-size: cover;
      height: 100vh;
   }

   .popup {
      width: 80%;
   }

   .popup .popup-content .popup-image {
      flex-direction: column-reverse;
   }

   .popup .popup-content .popup-image img {
      width: 200px;
   }
}

@media (max-width: 450px) {
   .background-container {
      background: url("../image/quietumplus-bg-m.webp") no-repeat center top;
      background-size: cover;
      height: 100vh;
   }

   .popup {
      width: 300px;
      border: 2px solid #00548c;
   }

   .popup .popup-content .popup-image h3 {
      font-size: 2rem;
   }

   .popup .popup-content .popup-image img {
      width: 100px;
   }

   .popup .popup-content .cta p {
      font-size: 1.8rem;
      text-align: center;
   }

   .popup .popup-content .cta input {
      font-size: 1.5rem;
      width: 100%;
   }

   .popup .popup-content .cta p span {
      font-size: 1.8rem;
   }

   .popup .popup-content .cta .btn {
      background-color: #00548c;
      font-size: 1.8rem;
      padding: 0.8rem;
      width: 100%;
   }
}