@font-face {
    font-family: "Poppins";
    src: url(../webfonts/Poppins-Regular.ttf);
}

/* Interface 1 Start */

/* App Screen */

.app-screen
{
  width: 480px;
  max-width: 480px;
  min-width: 480px;
  height: 870px;
  border: 1px solid black;
  overflow-y: auto;
  margin: 15px auto;
  border-radius: 25px;
  position: relative;
}

/* App Header */

.app-header
{
  width: 100%;
  padding: 10px;
  background: gray;
  height: 50px;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999999;
}

/* App Body */

.app-body
{
  width: 100%;
  padding: 10px;
  height: 870px;
  position: relative;
}

.grad-bg
{
  position: absolute;
  top:0;
  width:100%;
  height:100%;
  background: linear-gradient(to top, rgb(117,42,255), rgb(117,42,255), rgba(117, 42, 255, 0));
}

.tr-img-fluid
{
  width:100%;
  display:block;
  height:450px;
}

.tr-specs
{
  margin-top:86%;
}

.tr-head1
{
  font-family: "Poppins";
  letter-spacing: 1px;
  font-size: 90px;
}

.tr-text1
{
  font-family: "Poppins";
  letter-spacing: 0.5px;
  margin-top:-10px;
  color:#F45BAF;
}

.tr-text2{font-family: "Poppins";}

.tr-btn1
{
  font-family: "Poppins";
  letter-spacing: 1.5px;
  width:25.2rem;
  background:#F45BAF;
  color:white;
  border-radius: 14px;
}

.tr-btn1:hover
{
  background:black;
  color: white;
}

.tr-btn2:hover
{
  background:black;
  color:white;
}

.tr-btn2
{
  font-family: "Poppins";
  letter-spacing: 1.5px;
  width:25.2rem;
  border:3px solid #F45BAF;
  color:white;
  border-radius: 14px;
}

.tr-img
{
  width:21%;
}

.tr-img2
{
  width:9%;
  margin-top:-4px;
  margin-left:135px;
}

.tr-txt
{
  font-family: "Poppins";
  font-size: 12px;
  letter-spacing: 0.5px;
  margin-top:12px;
  margin-left:110px;
}
/* App Footer */

.app-footer
{
  width: 100%;
  padding: 10px;
  background: gray;
  height: 50px;
  position: sticky;
  bottom: 0;
  left: 0;
  z-index: 999999;
}

/* Interface 1 End */


/* Interface 2 Start */

/* App Screen */

.app-screen
{
  width: 480px;
  max-width: 480px;
  min-width: 480px;
  height: 870px;
  border: 1px solid black;
  overflow-y: auto;
  margin: 15px auto;
  border-radius: 25px;
  position: relative;
}

/* App Header */

.app-header
{
  width: 100%;
  padding: 10px;
  background: gray;
  height: 50px;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999999;
}

/* App Body */

.app-body
{
  width: 100%;
  padding: 10px;
  height: 870px;
  background:rgb(117,42,255);
}

.tr-head2
{
  font-family: "Poppins";
  letter-spacing: 1px;
}
.tr-head22
{
  font-family: "Poppins";
  letter-spacing: 1px;
  margin-top:-20px;
}

.tr-head3
{
  font-family: "Poppins";
  letter-spacing: 1px;
  font-size: 30px;
}

.tr-head4
{
  font-family: "Poppins";
  letter-spacing: 0.5px;
  font-size: 18px;
  color:rgb(117,42,255);
}

.tr-head5
{
  font-family: "Poppins";
  letter-spacing: 0.5px;
  font-size: 18px;
}

.tr-txt
{
  font-family: "Poppins";
  font-size: 12px;
  letter-spacing: 0.5px;
  margin-top:12px;
  margin-left:110px;
}

.tr-txt2
{
  font-family: "Poppins";
  font-size: 14px;
  letter-spacing: 1px;
  color:#F45BAF;
}

.tr-img-fluid2
{
  width:100%;
  display:block;
  margin-left:-15px;
}

.col-bg
{
  background: #F45BAF;
}

.con-bg
{
  background:#F1F5FF;
}

.menu-icon
{
  width: 35%;
}

.col-bg2
{
  background: white;
  border-radius: 10px;
}

.col-bg3
{
  background: white;
  border-radius: 10px;
  width:62%;
}

.tr-head6
{
  font-family: "Poppins";
  letter-spacing: 1px;
  font-size: 18px;
}

.tr-head7
{
  font-family: "Poppins";
  letter-spacing: 0.5px;
  font-size: 18px;
  color:#747499;
}

.tr-head8
{
  font-family: "Poppins";
  letter-spacing: 1px;
  font-size:18px;
}

.arr-icon
{
  font-size:18px;
  margin-left: 62px;
}

.col-bg4
{
  background: #F45BAF;
  clip-path: polygon(0 0, 100% 0%, 86% 100%, 0% 100%);
  width: 40%;
}

.col-bg5
{
  background: rgb(117,42,255);
  border-radius: 10px;
  overflow: hidden;
}

.col-bg6
{
  background: white;
  position: relative;
  overflow: hidden;
}

.col-bg7
{
  background: rgb(117,42,255);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}

.tr-img3
{
  position: absolute;
  top: -24px;
  left: -33px;
  width: 85%;
}

.tr-img4
{
  width:9%;
}

.tr-img5
{
  position: absolute;
  width: 88%;
  top: -57px;
  left: 136px;
}

/* App Footer */

.app-footer
{
  width: 100%;
  padding: 10px;
  background: gray;
  height: 50px;
  position: sticky;
  bottom: 0;
  left: 0;
  z-index: 999999;
}
.wb-mar{
  color: white;
  font-size: 20px;
  cursor:pointer;
}
/* Interface 2 End */


/* Interface 3 Start */

/* App Screen */

.app-screen
{
  width: 480px;
  max-width: 480px;
  min-width: 480px;
  height: 870px;
  border: 1px solid black;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 15px auto;
  border-radius: 25px;
  position: relative;
}

/* App Header */

.app-header
{
  width: 100%;
  padding: 10px;
  background: gray;
  height: 50px;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999999;
}

/* App Body */

.app-body
{
  width: 100%;
  padding: 10px;
  height: 870px;
  background:rgb(117,42,255);
}

.tr-head9
{
  font-family: "Poppins";
  letter-spacing: 1px;
  color:#F45BAF;
}

.tr-img6
{
  width:8.5%;
  margin-top:-15px;
  margin-left:12px;
}

.tr-head10
{
  font-family: "Poppins";
  letter-spacing: 1px;
  font-size:18px;
  line-height: 1.6;
}

.con-bg2
{
  background: #F1F5FF;
  height: 575px;
}

.tr-img7
{
  width: 98%;
}

.col-spec
{
  width: 100%;
  overflow: hidden;
  height: 814px;
  margin-top: -60%;
  margin-left: -12%;
}

.con-bg3
{
  background:white;
  border-top: 4px solid rgb(117,42,255);
} 

.col-adjust
{
  position: absolute;
  top: 24%;
  left: 18.6%;
  width: 62%;
}

.tr-btn3
{
  background: #747499;
  width:45px;
  border-radius:8px;
  border:none;
}

.tr-btn4
{
  border:3px solid #747499;
  width:45px;
  border-radius:8px;
  font-family: "Poppins";
  text-decoration: none;
  color: black;
  text-align: center;
}

.tr-btn5
{
  background: #F45BAF;
  width:45px;
  border-radius:8px;
  border:none;
  font-family: "Poppins";
  text-decoration: none;
  color: black;
  text-align: center;
}

/* App Footer */

.app-footer
{
  width: 100%;
  padding: 10px;
  background: gray;
  height: 50px;
  position: sticky;
  bottom: 0;
  left: 0;
  z-index: 999999;
}

/* Interface 3 End */