.popup {
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: rgba(255, 255, 255, 0.97);
    margin: 0 auto 0 auto;
    box-shadow: 0px 2px 5px 0px rgba(50, 50, 105, 0.15),
                inset 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
    z-index: 999999999999999999999999;
    padding: 0%;
    display: none; /* hide the popup by default */
    backdrop-filter: blur(4px); /* apply blur effect to background */
    }
    
    .popup-content {
      width: 100%;
      height: 94%;
      border-radius: 20px;
      overflow: hidden;
      z-index: 99999999999999;
    }


    .close-container{
      position: relative;
      justify-content: center;
      align-items: center;
      width: max-content;
      height: max-content;
      margin-right: 65px;
      cursor: pointer;
      float: right;
      padding: .3%;
      padding-bottom: 1%;
    }
    
  
  
    .leftright{
      height: .62em;
      width: 2.9em;
      position: relative;
      margin-top: .25rem;
      background-color: var(--grey);
      border-radius: 2px;
      transform: rotate(45deg);
      transition: transform .3s ease-in;
      right: 3.5%;
    }
    
    
    
    .rightleft{
      height: .62em;
      width: 2.9em;
      position: relative;
      margin-top: -.60rem;
      background-color: var(--grey);
      border-radius: 2px;
      transform: rotate(-45deg);
      transition: transform .3s ease-in;
      right: 3.5%;
    }
    
  
    .close{
      margin: 60px 0 0 5px;
      position: absolute;
    }
    
  
  
    .close-container:hover .leftright{
      transform: rotate(-45deg);
      background-color: var(--hover-button-color);
    }
  
  
    .close-container:hover .rightleft{
      transform: rotate(45deg);
      background-color: var(--hover-button-color);
    }
    

    .popup-navbar {
      position: fixed;
      top: 0;
      width: 100vw;
      height: 120px;
      align-content: center;
      background-color: rgba(0, 0, 0, 0);
      border-radius: 20px;
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
      overflow: hidden;
      z-index: 1;
      margin: 0 auto;
      left: 0;
      right: 0;
    }
    
    /* End Pop Up Window*/ 
















    .wrapper {
      display: table;
      height: 100vh; width: 100%;
      overflow: hidden;
    }

    .stage {
      display: table-cell;
      vertical-align: middle;
      overflow: hidden;
    }

    .tabled, .middled {
      text-align: center;
      margin: 0 auto;
      overflow: hidden;
    }

    .thin { font-weight: 300; }
.thick { font-weight: 900; }

.wrapper a {
  text-transform: uppercase;
  font-size: 36px;
  color: var(--grey);
  text-decoration: none;
  position: relative;
  display: block;
}

.wrapper p {
  font-weight: 100;
  font-size: 80%;
  margin: 1px;
}

[class^="link-"] {
  display: inline-block;
  margin: 2em;
  z-index: 1;
}


/* linktwo */
.link-2 a:hover {
  color: var(--hover-button-color);
}

.link-2 a:before {
  content: '';
  border-bottom: solid 1px #ff5a5f;
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  
  opacity: 0;
}

.link-2 a:hover:before {
  opacity: 1.0;
}

.link-2 a, .link-2 a:before {
  -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease;
}

.separator{
    color: var(--grey); /* Same color as your links for consistency */
    font-size: 40px; /* Same size as your links */
    padding: 0 10px !important; /* Add some space around the separator */
}

.show-on-small-screen{
  display: contents;
}

.hide-on-small-screen {
  display: contents;
}


.wrapper *{
  padding: 0;
  font-family: sans-serif;
}








@media screen and (min-width: 11in) and (max-width: 15in) {



  .popup {
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: rgba(255, 255, 255, 0.97);
    margin: 0 auto 0 auto;
    box-shadow: 0px 2px 5px 0px rgba(50, 50, 105, 0.15),
                inset 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
    z-index: 999999999999999999999999;
    padding: 0%;
    display: none; /* hide the popup by default */
    backdrop-filter: blur(4px); /* apply blur effect to background */
    }
    
    .popup-content {
      width: 100%;
      height: 94%;
      border-radius: 20px;
      overflow: hidden;
      z-index: 99999999999999;
    }


    .close-container{
      position: relative;
      justify-content: center;
      align-items: center;
      width: max-content;
      height: max-content;
      margin-right: 55px;
      cursor: pointer;
      float: right;
      padding: .3%;
      padding-bottom: 1%;
    }
    
  
  
    .leftright{
      height: .56em;
      width: 2.61em;
      position: relative;
      margin-top: .25rem;
      background-color: var(--grey);
      border-radius: 2px;
      transform: rotate(45deg);
      transition: transform .3s ease-in;
      right: 3.5%;
    }
    
    
    
    .rightleft{
      height: .56em;
      width: 2.61em;
      position: relative;
      margin-top: -.60rem;
      background-color: var(--grey);
      border-radius: 2px;
      transform: rotate(-45deg);
      transition: transform .3s ease-in;
      right: 3.5%;
    }
    
  
    .close{
      margin: 60px 0 0 5px;
      position: absolute;
    }
    
  
  
    .close-container:hover .leftright{
      transform: rotate(-45deg);
      background-color: var(--hover-button-color);
    }
  
  
    .close-container:hover .rightleft{
      transform: rotate(45deg);
      background-color: var(--hover-button-color);
    }
    

    .popup-navbar {
      position: fixed;
      top: 0;
      width: 100vw;
      height: 120px;
      align-content: center;
      background-color: rgba(0, 0, 0, 0);
      border-radius: 20px;
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
      overflow: hidden;
      z-index: 1;
      margin: 0 auto;
      left: 0;
      right: 0;
    }
    
    /* End Pop Up Window*/ 




    .wrapper {
      display: table;
      height: 100vh; width: 100%;
      overflow: hidden;
    }

    .stage {
      display: table-cell;
      vertical-align: middle;
      overflow: hidden;
    }

    .tabled, .middled {
      text-align: center;
      margin: 0 auto;
      overflow: hidden;
    }

    .thin { font-weight: 300; }
.thick { font-weight: 900; }

.wrapper a {
  text-transform: uppercase;
  font-size: 32px;
  color: var(--grey);
  text-decoration: none;
  position: relative;
  display: block;
}

.wrapper p {
  font-weight: 100;
  font-size: 80%;
  margin: 1px;
}

[class^="link-"] {
  display: inline-block;
  margin: 1em;
  z-index: 1;
}


/* linktwo */
.link-2 a:hover {
  color: var(--hover-button-color);
}

.link-2 a:before {
  content: '';
  border-bottom: solid 1px #ff5a5f;
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  
  opacity: 0;
}

.link-2 a:hover:before {
  opacity: 1.0;
}

.link-2 a, .link-2 a:before {
  -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease;
}

.separator{
    color: var(--grey); /* Same color as your links for consistency */
    font-size: 40px; /* Same size as your links */
    padding: 0 10px !important; /* Add some space around the separator */
}

.show-on-small-screen{
  display: contents;
}

.hide-on-small-screen {
  display: contents;
}


.wrapper *{
  padding: 0;
  font-family: sans-serif;
}




}











/* Social icons container */
.social-icons {
    position: relative;
    margin-left: 75px;
    display: flex;
    gap: 15px; /* Space between the icons */
    z-index: 300;
  
  }
  
  /* Social icon styling */
  .social-icon {
    width: 44px; /* Adjust the size of the icons */
    height: 44px; /* Adjust the size of the icons */
    transition: transform 0.3s ease; /* Smooth hover effect */
    cursor: pointer; /* Changes cursor to pointer */
    opacity: .9;
  }
  
  .social-icon:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
  }
  
  
  
  
  
  @media screen and (min-width: 18in) and (max-width: 22in) {
  
/* Social icons container */
.social-icons {
  position: relative;
  margin-left: 45px;
  display: flex;
  gap: 15px; /* Space between the icons */
  z-index: 300;

}

/* Social icon styling */
.social-icon {
  width: 44px; /* Adjust the size of the icons */
  height: 44px; /* Adjust the size of the icons */
  transition: transform 0.3s ease; /* Smooth hover effect */
  cursor: pointer; /* Changes cursor to pointer */
  opacity: .9;
}

.social-icon:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
}
  }




  @media screen and (min-width: 15in) and (max-width: 18in) {
  
    /* Social icons container */
    .social-icons {
      position: relative;
      margin-left: 45px;
      display: flex;
      gap: 15px; /* Space between the icons */
      z-index: 300;
    
    }
    
    /* Social icon styling */
    .social-icon {
      width: 44px; /* Adjust the size of the icons */
      height: 44px; /* Adjust the size of the icons */
      transition: transform 0.3s ease; /* Smooth hover effect */
      cursor: pointer; /* Changes cursor to pointer */
      opacity: .9;
    }
    
    .social-icon:hover {
      transform: scale(1.1); /* Slightly enlarge on hover */
    }
      }







      @media screen and (min-width: 11in) and (max-width: 15in) {
  
        /* Social icons container */
        .social-icons {
          position: relative;
          margin-left: 45px;
          display: flex;
          gap: 15px; /* Space between the icons */
          z-index: 300;
        
        }
        
        /* Social icon styling */
        .social-icon {
          width: 40px; /* Adjust the size of the icons */
          height: 40px; /* Adjust the size of the icons */
          transition: transform 0.3s ease; /* Smooth hover effect */
          cursor: pointer; /* Changes cursor to pointer */
          opacity: .9;
        }
        
        .social-icon:hover {
          transform: scale(1.1); /* Slightly enlarge on hover */
        }
          }
  
  
  


  
    @media screen and (min-width: 6in) and (max-width: 10in) {
  
  
    /* Social icons container */
    .social-icons {
      position: absolute;
      top: 25px;
      left: 25px;
      display: flex;
      gap: 10px; /* Space between the icons */
      z-index: 300;
    
    }
    
    /* Social icon styling */
    .social-icon {
      width: 38px; /* Adjust the size of the icons */
      height: 38px; /* Adjust the size of the icons */
      transition: transform 0.3s ease; /* Smooth hover effect */
      cursor: pointer; /* Changes cursor to pointer */
      opacity: .9;
    }
  
  }
  
    @media screen and (min-width: 0in) and (max-width: 5in) {
  
  
        /* Social icons container */
    .social-icons {
      display: flex;
      position: absolute;
      width: 100%;
      bottom: -80%;
      justify-content: center;
      align-items: center;
      left: 0;
      z-index: 0;
    
    }
    
    /* Social icon styling */
    .social-icon {
      width: 38px; /* Adjust the size of the icons */
      height: 38px; /* Adjust the size of the icons */
      transition: transform 0.3s ease; /* Smooth hover effect */
      cursor: pointer; /* Changes cursor to pointer */
      opacity: .9;
    }
  
    }