@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400&family=Pathway+Gothic+One&family=Ubuntu:wght@300;400&display=swap');
*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body{
  background: #242132;
  overscroll-behavior-y: contain;
}
@media(min-width: 200px){
  .unavailable{
    display: none;
  }
}
@media(min-width: 320px) and (max-width: 480px){
  .unavailable{
    display: none;
  }
}
@media(min-width: 480px) and (max-width: 768px){
  body{
    display: block;
  }
  .unavailable{
    display: none;
  }
}
@media(min-width: 769px) and (max-width: 1800px){
  .visible{
    display: none;
  }
  .unavailable{
    margin: 5rem;
    display: block;
    color: #fff;
    font-family: 'Ubuntu', sans-serif;
  }
  .un-heading{
    text-align: center;
    font-size: 2rem;
  }
  .oth-info{
    font-size: 1.500rem;
    font-style: italic;
    font-weight: 300;
    text-align: center;
  }
  .oth-info a{
    color: #F64081;
    font-weight: bold;
  }
}
header{
  height: 42px;
  width: 100%;
  background: rgba( 24, 25, 26, 0.2 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 12px );
  -webkit-backdrop-filter: blur( 12px );
  border-radius: 0 0 20px 20px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  overflow-x: hidden;
  overflow-y: scroll;
  transition: all 300ms;
}
header.open{
  height: 21rem;
}
.header.pop{
  height: 26rem;
}
.logo{
  display: absolute;
  margin: 0 0 1rem 1.25rem;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size:  2rem;
  text-decoration: none;
  color: #FEFCFF;
}
.hamburger{
 float: right;
 margin: .9rem 1.25rem 0 0 ;
}
#bar{
 display: block;
 height: 2px;
 width: 28px;
 margin: 3px;
 border-radius: 2px;
 background-color: #F64081;
 transition: 300ms ease-in-out;
 transform-origin: 11px 1px;
}
.hamburger.active :nth-child(1){
 transform: rotate(45deg);
}
.hamburger.active :nth-child(2){
 transform: rotate(-45deg);
}
.nav-items{
  display: flex;
  margin: 0 0 0 1.5rem;
  flex-direction: column;
  font-family: 'Oxygen', sans-serif;
  font-size: 1rem;
}
.nav-items a{
  margin: 1.1rem;
  padding: .3rem;
  text-decoration: none;
  color: #FFFFFF;
  border-bottom: 1px solid #616161;
}
.sub-btn{
  margin: 1.1rem;
  padding: .3rem;
  color: #FFFFFF;
  border-bottom: 1px solid #616161;
}
.sub-menu{
  display: none;
  font-size: 1rem;
  list-style: none;
  border-left: 2px solid #F64081;
  transition: transform 5s ease-in-out;
}
.sub-menu.show{
  display: block;
}
.nav-items ul li a{
  padding: 1rem;
  text-decoration: none;
  color: #FFFFFF;
  line-height: 1.8rem;
  border: none;
  transition: transform 5s ease-out;
}
.wrights{
  display: block;
  padding: .5rem; 
  font-family: 'Oxygen', sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: #fff;
  text-align: center;
}
/* Main Tool Codes*/
.qr-content{
 color: white;
}
.stxt{
 display: block;
 font-family: 'Ubuntu', sans-serif;
}
.heading{
 display: block;
 font-family: 'Ubuntu', sans-serif;
 font-size: 14px;
}
#split1{
 margin: 1rem 0 0 1rem;
 float: left;
 font-size: 2.2rem;
}
#split2{
 margin: 1.5rem 5rem 0 1rem;
 font-size: 2.2rem;
}
.group {
 display: flex;
 line-height: 28px;
 align-items: center;
 position: relative;
 max-width: 250px;
}
.input {
 width: 100%;
 height: 45px;
 margin-top: 1.1rem;
 line-height: 28px;
 padding: 0 1rem;
 padding-left: 2.5rem;
 border: 2px solid transparent;
 border-radius: 8px;
 outline: none;
 background-color: #f3f3f4;
 color: #0d0c22;
 transition: .3s ease;
}
.input::placeholder {
 color: #9e9ea7;
}
.input:focus, input:hover {
 outline: none;
 border-color: rgba(234,76,137,0.4);
 background-color: #fff;
 box-shadow: 0 0 0 4px rgb(234 76 137 / 10%);
}
.icon {
 position: absolute;
 top: 2rem;
 left: 1rem;
 fill: #9e9ea7;
 width: 1rem;
 height: 1rem;
}
.butt{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}
.btn1{
 display: block;
 border-radius: 7px;
 border: none;
 background: #1875FF;
 color: white;
 font-family: inherit;
 text-align: center;
 font-size: 15px;
 box-shadow: 0px 14px 56px -11px #1875FF;
 width: 200px;
 padding: 1rem;
 transition: all 0.4s;
 cursor: pointer;
}
.btn1 span{
 cursor: pointer;
 display: inline-block;
 position: relative;
 transition: 0.4s;
}
.thumbnail{
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 250px;
  width: 100%;
  backdrop-filter: blur(2px); background-color: rgba(255, 255, 255, 0.9); box-shadow: 35px 35px 68px 0px rgba(97, 110, 123, 0.5), inset -12px -12px 16px 0px rgba(97, 110, 123, 0.6), inset 0px 11px 28px 0px rgb(255, 255, 255);
}
.view-area{
  height: 180px;
  width: 300px;
  border: 1px dashed #242123;
  border-radius: 5px;
}
.view-area .thumbImg{
 height: 100%;
 width: 100%;
 border-radius: 5px;
 outline: none;
 transition: all 1s;
}
.h1{
 margin-top: 2rem;
 color: #fff;
 font-family: 'Ubuntu', sans-serif;
}
.steps{
 margin-top: 1.2rem;
 color: #fff;
 font-family: 'Oxygen', sans-serif;
 line-height: 2rem;
 font-size: 1.2rem;
}
.ins2, 
.ins3{
 margin-top: 1rem;
}
.imgs{
 height: 80px;
 width: 300px;
}
.imgs3{
 height: 250px;
 width: 300px;
}
.container{
  position: relative;
  bottom: 30rem;
  right: 4.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #FEFCFF;
  width: 200px;
  height: 50px;
  transform: rotate(90deg);
  border-radius: 80px;
 }
 .container button{
  outline: none;
  border: none;
}
.container svg{
  transform: rotate(-90deg);
}
.container button:nth-of-type(1){
 -webkit-transition-delay: 1.1s;
 transition-delay: 1.1s;
 color: #4267B2; 
}
.container button:nth-of-type(2){
 -webkit-transition-delay: .9s;   
  transition-delay: .9s;
  color: #1D9BF0;
}
.container button:nth-of-type(3){
  -webkit-transition-delay: .7s;
  transition-delay: .7s;
  color: #4ac959;
 }
 .container button:nth-of-type(4){
  -webkit-transition-delay: .7s;
  transition-delay: .7s;
  color: #0088cc;
 }
 .container button:nth-of-type(5){
  -webkit-transition-delay: .7s;
  transition-delay: .7s;
  color: #FF4301;
 }