@media print {
    body * {
        visibility: hidden;
    }
    #printableArea, #printableArea * {
        visibility: visible;
    }
    #printableArea {
        position: absolute;
        left: 0;
        top: 0;
    }
}

.head-text{
  color: #86868B !important;
  font-family: "poppins" !important;
  font-size: 24px !important;
}

.bg-white {
  background-color: #ffffff0f !important;
  border: 1px solid #0071E3;
  border-radius: 15px;
}

.mb-2{
  margin: 0px !important;
}
.bg-dark{
  background-color: #000000 !important;
}

.btn {

  padding: .375rem 15px !important;
  
}

.btn-danger {
  color: #fff;
  background-color: #0071E3 !important;
  border:none !important;
  width: 100% !important;
}

.btn-secondary {
  color: #fff;
  background-color: #4141414f !important;
  border-color: #1875c747;
  margin-top: 2% !important;
}
.btn-danger.focus, .btn-danger:focus {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
  box-shadow: none !important;
}
.btn-secondary:hover {
  color: #fff;
  background-color: #5e5e5e;
  border-color: #545b62;
}

.btn-secondary.focus, .btn-secondary:focus {
  color: #fff;
  background-color: #0071E3 !important;
  box-shadow: none;
}

.btn-secondary-two {
  color: #fff;
  background-color: #2e2e3085;
  border-color: #2E2E30;
  margin-top: 2% !important;
  width: 100% !important;
}
.btn-secondary-two:hover{
  color:#ffffff !important;
}

.pt-5, .py-5 {
  padding-top: 5%!important;
  padding-bottom:5% !important;
}


    /*--------TEXT ANIMATION---------*/
    
    .animate-gradient-text {
      font-family: "poppins" !important;
      color: #F5F5F7 !important;
      font-size: 50px;
    }



  .second-bg{
    background-color:#0C0C0C !important;
    margin: 5% !important;
  }


  .button {
    --black-700: hsla(0 0% 12% / 1);
    --border_radius: 9999px;
    --transtion: 0.3s ease-in-out;
    --offset: 2px;
  
    cursor: pointer;
    position: relative;
  
    display: flex;
    align-items: center;
    gap: 0.5rem;
  
    transform-origin: center;
  
    padding: 1rem 2rem;
    background-color: transparent;
  
    border: none;
    border-radius: var(--border_radius);
    transform: scale(calc(1 + (var(--active, 0) * 0.1)));
  
    transition: transform var(--transtion);
  }
  
  .button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  
    width: 100%;
    height: 100%;
    background-color: var(--black-700);
  
    border-radius: var(--border_radius);
    box-shadow: inset 0 0.5px hsl(0, 0%, 100%), inset 0 -1px 2px 0 hsl(0, 0%, 0%),
      0px 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active, 0))),
      0 0 0 calc(var(--active, 0) * 0.375rem) hsl(260 97% 50% / 0.75);
  
    transition: all var(--transtion);
    z-index: 0;
  }
  
  
  
  
  
  .button .dots_border {
    --size_border: calc(100% + 2px);
  
    overflow: hidden;
  
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  
    width: var(--size_border);
    height: var(--size_border);
    background-color: transparent;
  
    border-radius: var(--border_radius);
    z-index: -10;
  }
  
  .button .dots_border::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left;
    transform: rotate(0deg);
  
    width: 100%;
    height: 2rem;
    background-color: white;
  
    mask: linear-gradient(transparent 0%, white 120%);
    animation: rotate 2s linear infinite;
  }
  
  @keyframes rotate {
    to {
      transform: rotate(360deg);
    }
  }






  /* Additional Styles for Icons */
.btn i {
  margin-right: 8px;
}


.btn-group, .btn-group-vertical {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline;
  vertical-align: middle;
}




/*--------border gradient animation--------*/

.second-bg {
  display: grid;
  place-content: center;
  text-shadow: 0 1px 0 #000;
  --border-angle: 0turn;
  --main-bg: conic-gradient(from var(--border-angle), #213, #112 5%, #112 60%, #213 95%);
  border: solid 1px transparent;
  border-radius: 2em;
  --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent);
  background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box;
  background-position: center center;
  animation: bg-spin 3s linear infinite;
}
@keyframes bg-spin {
  to {
    --border-angle: 1turn;
 }
}

/*
.second-bg:hover {
  animation-play-state: paused;
}

*/

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}



.col-lg-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 100% !important;
  max-width: 100% !important;
}


#qrcode{
  background-color: #ffffff !important;
    padding: 8px !important;
}

@media (max-width: 768px) {
    .animate-gradient-text {
      font-size: 32px;
    }
    
    #qrcode {
      width: 250px;
      height: 250px;
    }
  
    .btn {
      padding: 0.5rem !important;
      font-size: 14px;
    }
  }
  
  @media (max-width: 576px) {
    .animate-gradient-text {
      font-size: 24px;
    }
  /*
    #qrcode {
      width: 200px;
      height: 200px;
    }
    */
  
    .btn {
      font-size: 12px;
    }
  }
  
  
  
  
  
    @media only screen and (max-width:600px){
    .animate-gradient-text {
        font-family: "poppins" !important;
        color: #F5F5F7 !important;
        font-size: 25px !important;
        margin:0px !important;
    }
    
    #qrcode {
    background-color:#ffffff !important;
    padding: 8px !important;
   }
   
   .pt-5, .py-5 {
  padding-top: 7%!important;
  padding-bottom:7% !important;
  }
  }