/* Buttons Start Here */
.buttonglass {
    position: relative;
    color: rgba(255, 255, 255, 0.6);
    font-size: 20px;
    text-decoration:none;
font-family: Helvetica, Arial, sans-serif;
    padding: 0.5em 2em;
    margin: 0.5em;

    cursor: pointer;
    width: 200px;
    height: 60px;

    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;

    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
  
    outline: 0;
}

div.buttonglass {
  line-height: 20px;
  height: 25px;
  width: 200px;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}


buttonglass:active {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important; 
}



.glass {
    background: linear-gradient(
      to bottom,  
      rgba(180,180,180,0.8) 0%,
      rgba(180,180,180,0.5) 3%,
      rgba(180,180,180,0.1) 45%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.3) 28%,
      rgba(0,0,0,0.3) 60%,
      rgba(0,0,0,0.3) 65%,
      rgba(255,255,255,0.3) 90%,
      rgba(0,0,0,0.3) 95%,
      rgba(0,0,0,0.3) 100%
    ); /* W3C */
    border-color: rgba(0, 0, 0, 0.6);
    border-image: none;
    border-style: solid;
    border-width: 0px;
  
    box-shadow:
      0 1px 0 0 rgba(255, 255, 255, 0.4) inset,
      0 2px 6px rgba(0, 0, 0, 0.5),
      0 10px rgba(0, 0, 0, 0.05) inset;
}




.glass2 {
    background: linear-gradient(
      170deg,
      rgba(255,255,255,0.8) 0%,
      rgba(255,255,255,0.6) 20%,
      rgba(255,255,255,0.1) 50%,
      rgba(0,0,0,0.0) 50%,
      rgba(0,0,0,0.0) 100%
    ); /* W3C */
    border-color: rgba(255, 136, 0, 0.4);
    border-image: none;
    border-style: inset;
    border-width: 1px;
    /*
    box-shadow:
      0 1px 0 0 rgba(255, 255, 255, 0.4) inset,
      0 2px 6px rgba(0, 0, 0, 0.5),
      0 -4px 8px -1px rgba(255, 255, 255, 0.4) inset;
    */
}

.glass2:before {
  position: absolute;
  content: "";
  top: -2px;
  left: 2%;
  width: 96%;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.75) 15%,
    rgba(0,0,0,0.9) 50%,
    rgba(0,0,0,0.75) 85%,
    rgba(0,0,0,0) 100%
  );
  z-index: 1;
}

.glass2:after {
  position: absolute;
  content: "";
  top: 100%;
  left: 2%;
  width: 96%;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.5) 5%,
    rgba(0,0,0,0.9) 50%,
    rgba(0,0,0,0.5) 95%,
    rgba(0,0,0,0) 100%
  );
  z-index: 1;
}



.clear {
}

button:hover.clear-a {
    color: rgba(255, 255, 255, 0.99);
    text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.99), 0px 0px 4px rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
      0 1px 0 0 rgba(255, 255, 255, 0.4) inset,
      0 2px 6px rgba(0, 0, 0, 0.5),
      0 10px rgba(0, 0, 0, 0.05) inset,
      0 0 5px 2px rgba(255, 255, 255, 0.75),
      0 0 10px 2px rgba(255, 255, 255, 0.75) inset;
}



/* Modal Background */
.qr-modal {
    display: none; /* Hidden by default */
    position: fixed; 
    z-index: 9999; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.6); /* semi-transparent background */
}

.qr-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
/* Modal Content Box */
.qr-modal-content {
    position: relative;
    background-color: #fff;
    margin: 10% auto; /* center vertically & horizontally */
    padding: 5px;
    max-width: 360px;
    border-radius: 10px;
    text-align: center;
}

/* Close Button */
.qr-close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.qr-close:hover {
    color: #000;
}

/* QR Image */
.qr-modal img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
  .bg-video {
    display: none !important;
  }

  .home-section {
    background-image: url('../video/poster-mobile.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
  }

}