@font-face {
  font-family: Clip;
  src: url("https://acupoftee.github.io/fonts/Clip.ttf");
}

.sign {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 50%;
  margin-top: -15%;
  background-image: radial-gradient(
    ellipse 50% 35% at 50% 50%,
    #fa0202,
    transparent
  );
  transform: translate(-50%, -50%);
  letter-spacing: 2;
  left: 50%;
  top: 50%;
  font-family: "Clip";
  text-transform: uppercase;
  font-size: 6em;
  color: #ffe6ff;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #fc2222,
    -0.2rem 0.1rem 1rem #fc2222, 0.2rem 0.1rem 1rem #fc2222,
    0 -0.5rem 2rem #f51111, 0 0.5rem 3rem #fa0202;
  animation: shine 2s forwards, flicker 3s infinite;
}

@keyframes blink {
  0%,
  22%,
  36%,
  75% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #fc2222,
      -0.2rem 0.1rem 1rem #fc2222, 0.2rem 0.1rem 1rem #fc2222,
      0 -0.5rem 2rem #fa0202, 0 0.5rem 3rem #fa0202;
  }
  28%,
  33% {
    color: #fc2222;
    text-shadow: none;
  }
  82%,
  97% {
    color: #fa0202;
    text-shadow: none;
  }
}

.flicker {
  animation: shine 2s forwards, blink 3s 2s infinite;
}

.fast-flicker {
  animation: shine 2s forwards, blink 10s 1s infinite;
}

@keyframes shine {
  0% {
    color: #fa0202;
    text-shadow: none;
  }
  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #fc2222,
      -0.2rem 0.1rem 1rem #fc2222, 0.2rem 0.1rem 1rem #fc2222,
      0 -0.5rem 2rem #fa0202, 0 0.5rem 3rem #fa0202;
  }
}

@keyframes flicker {
  from {
    opacity: 1;
  }

  4% {
    opacity: 0.9;
  }

  6% {
    opacity: 0.85;
  }

  8% {
    opacity: 0.95;
  }

  10% {
    opacity: 0.9;
  }

  11% {
    opacity: 0.922;
  }

  12% {
    opacity: 0.9;
  }

  14% {
    opacity: 0.95;
  }

  16% {
    opacity: 0.98;
  }

  17% {
    opacity: 0.9;
  }

  19% {
    opacity: 0.93;
  }

  20% {
    opacity: 0.99;
  }

  24% {
    opacity: 1;
  }

  26% {
    opacity: 0.94;
  }

  28% {
    opacity: 0.98;
  }

  37% {
    opacity: 0.93;
  }

  38% {
    opacity: 0.5;
  }

  39% {
    opacity: 0.96;
  }

  42% {
    opacity: 1;
  }

  44% {
    opacity: 0.97;
  }

  46% {
    opacity: 0.94;
  }

  56% {
    opacity: 0.9;
  }

  58% {
    opacity: 0.9;
  }

  60% {
    opacity: 0.99;
  }

  68% {
    opacity: 1;
  }

  70% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.95;
  }

  93% {
    opacity: 0.93;
  }

  95% {
    opacity: 0.95;
  }

  97% {
    opacity: 0.93;
  }

  to {
    opacity: 1;
  }
}

  
  @media (max-width: 991px) {
    .sign  {
      font-size: 36px;
    }
  }
  
  @media (max-width: 991px) {
    .sign span br {
      display: none;
    }
  }
  
  @media (max-width: 1199px) {
    .sign span h1 {
      font-size: 90px;
    }
  }
  
  @media (max-width: 414px) {
    .sign span h1 {
      font-size: 40px;
    }
  }
  
  
			
				
  /* Button used to open the contact form - fixed at the bottom of the page */
  .open-button {
    background-color: #555;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    position: fixed;
    bottom: 23px;
    right: 28px;
    width: 280px;
  }
  
  /* The popup form - hidden by default */
  .form-popup {
    display: none;
    position: fixed;
    bottom: 0;
    right: 15px;
    border: 3px solid #f1f1f1;
    z-index: 9;
  }
  
  /* Add styles to the form container */
  .form-container {
    max-width: 300px;
    padding: 10px;
    background-color: white;
  }
  
  /* Full-width input fields */
  .form-container input[type=text], .form-container input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
  }
  
  /* When the inputs get focus, do something */
  .form-container input[type=text]:focus, .form-container input[type=password]:focus {
    background-color: #ddd;
    outline: none;
  }
  
  /* Set a style for the submit/login button */
  .form-container .btn {
    background-color: #04AA6D;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom:10px;
    opacity: 0.8;
  }
  
  /* Add a red background color to the cancel button */
  .form-container .cancel {
    background-color: red;
  }
  
  /* Add some hover effects to buttons */
  .form-container .btn:hover, .open-button:hover {
    opacity: 1;
  }
  





.btn1{
  position: absolute;
  top: 280px;
  left: 45px;
  color: red;
  font-size: 13px bold;
  cursor: pointer;
  text-align: center;
}


.overlayx {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensure overlay is on top of other content */
}

.overlayx-content {
  width: 990px; /* Define your width */
  height: 398px; /* Define your height */
  background: #fff; /* Background color of overlay content */
  padding: 0px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
}

.overlayx img {
  max-width: 100%; /* Ensure image fits within overlay */
  max-height: 100%;
}

.close {
  position: absolute;
  top: -2px;
  color:#ff0000;
  right: 3px;
  cursor: pointer;
  font-size: 45px;
}