@font-face {
    font-family: 'xirod';
    src: url("xirod.ttf");
  }
  
  
    /* overflow-y: hidden; */

    .pg-btn{
      text-align: center;
      margin-top: 500px;
  }
  
  
  
  
  .button {
      background-color: #4CAF50; /* Green */
      border: none;
      color: white;
      padding: 10px 25px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 14px;
      margin: 4px 2px;
      transition-duration: 0.4s;
      cursor: pointer;
      border-radius: 20px;
    }
    
    .button1 {
      background-color: transparent; 
      color: white; 
      border: 2px solid #4CAF50;
    }
  
    .button1:hover {
      background-color: #4CAF50;
      color: white;
    }


  
  #map {
    margin:0;
    border-radius:5px;
    top: 13vw;
    left:35%;
    width:450px;
    height:250px;
  
    -webkit-box-shadow: 0px 0px 10px 2px rgba(241, 6, 116, 0.75);
    -moz-box-shadow: 0px 0px 10px 2px rgba(241, 6, 116, 0.75);
    box-shadow: 0px 0px 10px 2px rgba(241, 6, 116, 0.75);
  }
  .sign5 {
    position: absolute;
    display: flex;
    justify-content: center;
    margin: 0;
   
    
    top: 115%;
    align-items: center;
    background-image: radial-gradient(
      ellipse 50% 35% at 50% 50%,
      #6b1839,
      transparent
    );
    transform: translate(-50%, -50%);
   ;
  
    left: 50%;
   
    font-family: "Clip";
    text-transform: uppercase;
    font-size: 14px;
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
    animation: shine 2s forwards, flicker 3s infinite;
  }
  .sign4 {
    position: absolute;
    display: flex;
    justify-content: center;
    margin: 0;
   
    
    top: 110%;
    align-items: center;
  
  
    background-image: radial-gradient(
      ellipse 50% 35% at 50% 50%,
      #6b1839,
      transparent
    );
    transform: translate(-50%, -50%);
   ;
  
    left: 50%;
   
    font-family: "Clip";
    text-transform: uppercase;
    font-size: 14px;
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
    animation: shine 2s forwards, flicker 3s infinite;
  }
  .sign1 {
    position: absolute;
    display: flex;
    justify-content: center;
    margin: 0;
    
    
    top: 80%;
    align-items: center;
    font-size: 40px;
  
    background-image: radial-gradient(
      ellipse 50% 35% at 50% 50%,
      #6b1839,
      transparent
    );
    transform: translate(-50%, -50%);
    letter-spacing: 1;
    padding: 50px;
    left: 50%;
   
    font-family: "Clip";
    text-transform: uppercase;
    font-size: 2em;
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
    animation: shine 2s forwards, flicker 3s infinite;
  }
  .sign3 {
    position: absolute;
    display: flex;
    justify-content: center;
    margin: 0;
   
    
    top: 100%;
    align-items: center;
  
  
    background-image: radial-gradient(
      ellipse 50% 35% at 50% 50%,
      #6b1839,
      transparent
    );
    transform: translate(-50%, -50%);
   ;
    
    left: 50%;
   
    font-family: "Clip";
    text-transform: uppercase;
    font-size: 23px;
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
    animation: shine 2s forwards, flicker 3s infinite;
  }

  .sign2 {
    position: absolute;
    display: flex;
    justify-content: center;
    margin: 0;
   
    
    top: 90%;
    align-items: center;
  
  
    background-image: radial-gradient(
      ellipse 50% 35% at 50% 50%,
      #6b1839,
      transparent
    );
    transform: translate(-50%, -50%);
    
    
    left: 50%;
   
    font-family: "Clip";
    text-transform: uppercase;
    font-size: 23px;
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
    animation: shine 2s forwards, flicker 3s infinite;
  }
  .sign {
    position: absolute;
    display: flex;
    justify-content: center;
    margin: 0;
  
   
    align-items: center;
    
  
    background-image: radial-gradient(
      ellipse 50% 35% at 50% 50%,
      #6b1839,
      transparent
    );
    transform: translate(-50%, -50%);
  
    left: 50%;
    top: 10%;
    font-family: 'xirod';
    text-transform: uppercase;
    font-size: 3em;
    color: #ffe6ff;
    text-shadow: 
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
    animation: shine 2s forwards, flicker 3s infinite;
  }
  body {
    background-color: #141114;
    background-image: linear-gradient(335deg, black 23px, transparent 23px),
      linear-gradient(155deg, black 23px, transparent 23px),
      linear-gradient(335deg, black 23px, transparent 23px),
      linear-gradient(155deg, black 23px, transparent 23px);
    background-size: 58px 58px;
    background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
  }
  
  
  
  @keyframes blink {
    0%,
    22%,
    36%,
    75% {
      color: #ffe6ff;
      text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
        -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
        0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
    }
    28%,
    33% {
      color: #ff65bd;
      text-shadow: none;
    }
    82%,
    97% {
      color: #ff2483;
      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: #6b1839;
      text-shadow: none;
    }
    100% {
      color: #ffe6ff;
      text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
        -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
        0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
    }
  }
  
  @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 only screen and (max-width: 1100px)
  {
    #map{
      width: 400px;
      height: 250px;
      top:11vw;
    }
    .sign{
      font-size: 2em;
    }
  
    @media only screen and (max-width: 1050px)
  {
    #map{
      width: 400px;
      height: 250px;
    }
    .sign{
      font-size: 2em;
    }
  }
  @media only screen and (min-width: 1000px) {
    #map {
      width: 400px;
      height: 250px;
      top:17vw;
      left: 0;
      margin-left: 34%;
      font-size: 3em;
    }
    
  }
  
  @media only screen and (max-width: 850px)
  {
    #map{
      width: 360px;
      height: 250px;
      left: 29%;
      top:14vw;
    }
    .sign1{
      top:72%;
    }
    .sign2{
      top:84%;
    }
    .sign3{
      top:93%;
    }
    .sign4{
      top:105%;
    }

    .pg-btn{
      margin-top: 450px;
    }
  }

  @media only screen and (max-width: 700px)
  {
    #map{
      width: 360px;
      height: 250px;
      left: 22%;
      top:15vw;
    }
    .sign{
      left: 48%;
    top: 9%;
    }
    .sign1{
      top:68%;
      left: 47%;
    }
    .sign2{
      left:47%;
      top:80%;
    }
    .sign3{
      top:90%;
      left:48%;
    }
    .sign4{
      top:100%;
      left:47%;
    }
  }
  @media only screen and (max-width: 650px)
  {
    #map{
      width: 350px;
      height: 250px;
      left: 22%;
      top:14vw;
    }
    .sign{
      left: 48%;
    top: 9%;
    font-size: 30px;
    }
    .sign1{
      top:66%;
      left: 47%;
      font-size: 28px;
    }
    .sign2{
      left:47%;
      top:76%;
      font-size: 20px;
    }
    .sign3{
      top:86%;
      left:48%;
      font-size: 20px;
    }
    .sign4{
      top:95%;
      left:47%;
    }
  }
  @media only screen and (max-width: 605px)
  {
    #map{
      width: 295px;
      height: 230px;
      left: 20%;
      top:15vw;
    }
    .sign{
      left: 45%;
    top: 7%;
    font-size: 24px;
    }
    .sign1{
      top:64%;
      left: 44%;
      font-size: 28px;
    }
    .sign2{
      left:44%;
      top:74%;
      font-size: 20px;
    }
    .sign3{
      top:84%;
      left:44%;
      font-size: 20px;
    }
    .sign4{
      top:93%;
      left:44%;
    }


  }
  @media only screen and (max-width: 500px)
  {
    #map{
      width: 270px;
      height: 220px;
      left: 19%;
      top:18vw;
    }
    .sign{
      left: 45%;
    top: 7%;
    font-size: 22px;
    }
    .sign1{
      top:60%;
      left: 47%;
      font-size: 25px;
    }
    .sign2{
      left:45%;
      top:70%;
      font-size: 16px;
    }
    .sign3{
      top:79%;
      left:46%;
      font-size: 16px;
    }
    .sign4{
      top:88%;
      left:45%;
    }
  }
  @media only screen and (max-width: 425px)
  {
    #map{
      width: 248px;
      height: 220px;
      left: 19%;
      top:18vw;
    }
    .sign{
      left: 50%;
    top: 7%;
    font-size: 20px;
    }
    .sign1{
      top:58%;
      left: 49%;
      font-size: 19px;
    }
    .sign2{
      left:48%;
      top:67%;
      font-size: 14px;
    }
    .sign3{
      top:76%;
      left:46%;
      font-size: 14px;
    }
    .sign4{
      top:84%;
      left:48%;
    }
  }
  @media only screen and (max-width: 415px)
  {
    #map{
      width: 248px;
      height: 220px;
      left: 19%;
      top:18vw;
    }
    .sign{
      left: 48%;
    top: 9%;
    font-size: 17px;
    }
    .sign1{
      top:62%;
      left: 49%;
      font-size: 16px;
    }
    .sign2{
      left:48%;
      top:71%;
      font-size: 14px;
    }
    .sign3{
      top:82%;
      left:48%;
      font-size: 14px;
    }
    .sign4{
      top:92%;
      left:48%;
    }
  }
  @media only screen and (max-width: 395px)
  {
    #map{
      width: 248px;
      height: 220px;
      left: 19%;
      top:23vw;
    }
    .sign{
      left: 49%;
    top: 8%;
    font-size: 19px;
    }
    .sign1{
      top:62%;
      left: 49%;
      font-size: 16px;
    }
    .sign2{
      left:48%;
      top:71%;
      font-size: 14px;
    }
    .sign3{
      top:82%;
      left:48%;
      font-size: 14px;
    }
    .sign4{
      top:92%;
      left:48%;
    }
  }
  @media only screen and (max-width: 385px)
  {
    #map{
      width: 248px;
      height: 220px;
      left: 19%;
      top:23vw;
    }
    .sign{
      left: 49%;
    top: 8%;
    font-size: 17px;
    }
    .sign1{
      top:62%;
      left: 49%;
      font-size: 16px;
    }
    .sign2{
      left:48%;
      top:71%;
      font-size: 14px;
    }
    .sign3{
      top:82%;
      left:45%;
      font-size: 14px;
    }
    .sign4{
      top:92%;
      left:48%;
    }
  }
  @media only screen and (max-width: 350px)
  {
    #map{
      width: 248px;
      height: 220px;
      left: 16%;
      top:27vw;
    }
    .sign{
      left: 48%;
    top: 9%;
    font-size: 17px;
    }
    .sign1{
      top:62%;
      left: 51%;
      font-size: 16px;
    }
    .sign2{
      left:55%;
      top:74%;
      font-size: 14px;
    }
    .sign3{
      top:82%;
      left:48%;
      font-size: 14px;
    }
    .sign4{
      top:92%;
      left:53%;
    }
  }
  @media only screen and (max-width: 353px)
  {
    #map{
      width: 248px;
      height: 220px;
      left: 16%;
      top:28vw;
    }
    .sign{
      left: 48%;
    top: 9%;
    font-size: 17px;
    }
    .sign1{
      top:62%;
      left: 51%;
      font-size: 16px;
    }
    .sign2{
      left:52%;
      top:73%;
      font-size: 14px;
    }
    .sign3{
      top:82%;
      left:50%;
      font-size: 14px;
    }
    .sign4{
      top:92%;
      left:52%;
    }
  }
  @media only screen and (max-width: 345px)
  {
    #map{
      width: 235px;
      height: 220px;
      left: 16%;
      top:28vw;
    }
    .sign{
      left: 48%;
    top: 6%;
    font-size: 17px;
    }
    .sign1{
      top:62%;
      left: 51%;
      font-size: 16px;
    }
    .sign2{
      left:52%;
      top:73%;
      font-size: 14px;
    }
    .sign3{
      top:82%;
      left:48%;
      font-size: 14px;
    }
    .sign4{
      top:92%;
      left:52%;
    }
  }
  @media only screen and (max-width: 337px)
  {
    #map{
      width: 235px;
      height: 220px;
      left: 16%;
      top:24vw;
    }
    .sign{
      left: 50%;
    top: 7%;
    font-size: 16px;
    }
    .sign1{
      top:62%;
      left: 51%;
      font-size: 16px;
    }
    .sign2{
      left:52%;
      top:73%;
      font-size: 14px;
    }
    .sign3{
      top:82%;
      left:48%;
      font-size: 14px;
    }
    .sign4{
      top:92%;
      left:52%;
    }
  }
  @media only screen and (max-width: 330px)
  {
    #map{
      width: 235px;
      height: 220px;
      left: 16%;
      top:24vw;
    }
    .sign{
      left: 48%;
    top: 7%;
    font-size: 15px;
    }
    .sign1{
      top:62%;
      left: 51%;
      font-size: 16px;
    }
    .sign2{
      left:52%;
      top:73%;
      font-size: 14px;
    }
    .sign3{
      top:82%;
      left:50%;
      font-size: 14px;
    }
    .sign4{
      top:92%;
      left:52%;
    }
  }
  @media only screen and (max-width: 300px)
  {
    #map{
      width: 230px;
      height: 220px;
      left: 10%;
      top:29vw;
    }
    .sign{
      left: 48%;
    top: 6%;
    font-size: 13px;
    }
    .sign1{
      top:62%;
      left: 51%;
      font-size: 16px;
    }
    .sign2{
      left:52%;
      top:75%;
      font-size: 14px;
    }
    .sign3{
      top:86%;
      left:52%;
      font-size: 14px;
    }
    .sign4{
      top:97%;
      left:52%;
    }
  }
  @media only screen and (max-width: 260px)
  {
    #map{
      width: 220px;
      height: 220px;
      left: 7%;
      top:29vw;
    }
    .sign{
      left: 42%;
    top: 6%;
    font-size: 14px;
    }
    .sign1{
      top:62%;
      left: 51%;
      font-size: 16px;
    }
    .sign2{
      left:52%;
      top:75%;
      font-size: 14px;
    }
    .sign3{
      top:86%;
      left:52%;
      font-size: 14px;
    }
    .sign4{
      top:97%;
      left:52%;
    }
  }
  @media only screen and (max-width: 250px)
  {
    #map{
      width: 200px;
      height: 220px;
      left: 7%;
      top:34vw;
    }
    .sign{
      left: 43%;
    top: 6%;
    font-size: 13px;
    }
    .sign1{
      top:62%;
      left: 51%;
      font-size: 16px;
    }
    .sign2{
      left:52%;
      top:75%;
      font-size: 14px;
    }
    .sign3{
      top:86%;
      left:52%;
      font-size: 14px;
    }
    .sign4{
      top:97%;
      left:52%;
    }
  }