@font-face {
  font-family: 'Manrope-Bold';
  src: url('/fonts/Manrope-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Manrope-ExtraBold';
  src: url('/fonts/Manrope-ExtraBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Manrope-ExtraLight';
  src: url('/fonts/Manrope-ExtraLight.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Manrope-Light';
  src: url('/fonts/Manrope-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Manrope-Medium';
  src: url('/fonts/Manrope-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Manrope-Regular';
  src: url('/fonts/Manrope-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Manrope-SemiBold';
  src: url('/fonts/Manrope-SemiBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
body, html{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.MainArea{
  display: flex;
  height: 100vh;
  width: 100%;
  background-color: black;
  
}
.mainContent{
  width: 50%;
  /* border-right: 1px solid white; */
  padding-top: 7%;
  padding-left: 7%;
  margin-top: auto;
  margin-bottom: auto;
}
.mainContent h1{
  color: white;
  font-family: "Manrope-Bold";
}
.mainContent .textBelowHeader{
  color: grey;
}
.mainContent .Username{
  background-color: rgba(84, 83, 83, 0.653);
  width: 70%;
  height: 45px;
  border-radius: 10px;
  font-size: 20px;
  border: 0px;
  margin-bottom: 4%;
  padding-left: 1%;
  font-size: 18px;
  font-family: "Manrope-Medium";
  color: white;
}
.mainContent .Password{
  background-color: rgba(84, 83, 83, 0.653);
  width: 70%;
  height: 45px;
  border-radius: 10px;
  font-size: 20px;
  border: 0px;
  padding-left: 1%;
  margin-bottom: 3%;
  font-size: 18px;
  font-family: "Manrope-Medium";
  color: white;
}
.RmbMe {
  display: none;
}

/* Custom checkbox style */
.RmbMeTxt {
  position: relative;
  padding-left: 20px;
  cursor: pointer;
  user-select: none;
  margin-right: 36%;
  margin-left: 0.5%;
  color: rgb(131, 131, 131);
  font-family: "Manrope-Medium";
}

/* Create custom box */
.RmbMeTxt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  background-color: #424141; /* default background */
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

/* Optional: add checkmark */
.RmbMeTxt::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg);
}
/* Show checkmark when checked */
.RmbMe:checked + .RmbMeTxt::after {
  opacity: 1;
}
.mainContent .Forgetpass{
  background-color: transparent;
  color: rgb(0, 119, 255);
  border: 0px;
  font-family: "Manrope-Medium";
}
.mainContent .LoginBtn{
  background: linear-gradient(to right, #642f0339 0%, #be5703 60%);
  font-size: 20px;
  border: 0px;
  border-radius: 10px;
  color: white;
  width: 70%;
  height: 40px;
  margin-top: 3%;
  margin-bottom: 2%;
  font-family: "Manrope-Bold";
}
.noAccTxtArea{
  width: 70%;
  padding-left: 17%;
  font-size: 18px;
  margin-bottom: 4%;
  font-family: "Manrope-Medium";
}
.NoAccTxt{
  color: grey;
  position: relative;
  display: inline-block;
  font-family: "Manrope-Medium";
}
.SignUpBtn{
  position: relative;
  display: inline-block;
  background-color: transparent;
  color: rgb(0, 119, 255);
  border: 0px;
}
.LoginWithGoogleTxt{
  display: flex;
  align-items: center;
  text-align: center;
  color: #6a6868;
  width: 70%;
  font-family: "Manrope-Medium";
}
.LoginWithGoogleTxt::before,
.LoginWithGoogleTxt::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #313131; 
  margin: 0 20px; 
}
.GoogleLogin{
  margin-top: 2%;
  background-color: transparent;
  border: 0px;
  margin-left: 30%;
}
.GoogleLogin img{
  width: 50px;
  height: 50px;
  
}
.rightContainer{
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 0px;
  height: 100%;
}
.rightContent{
  justify-content: center;
  display: block;
  position: fixed;
  width: 43.6%;
  /* height: 86.8%; */
  height: 81.8%;
  display: flex;
  align-items: center;
  text-align: center;
  margin-left: 3.1%;
  margin-top: 3.25%;
  border-radius: 40px;
}
.rightBackgroundImg{
  flex: 1;
  width: 100%;
  height: 100vh;
}
.TitaQOfficialLogo-Container img{
  position: absolute;
  width: max-content;
  height:  90px;
  top: 1%;
  left: 3%;
}
.quoteWrapper {
  display: block;

}

.rightContent .quoteText {
  color: rgb(196, 193, 193);
  font-size: 34px;
  margin: 0;
  font-family: "Manrope-Light";
  width: 90%;
  margin-left: 6%;
}
.rightContent .quoteAuthor {
  color: rgb(181, 180, 180);
  font-size: 20px;
  margin: 0;
  font-family: "Manrope-Italic";
}

.rightContent .quoteAuthor {
  margin-top: 10px; /* add spacing between quote and author */
}

.quoteTabs {
  text-align: center;
  margin-top: 10px;
  position: absolute;
  top: 84%;
  left: 30%;
}

.quoteTab {
  display: inline-block;
  width: 50px;
  height: 6px;
  margin: 0 5px;
  border-radius: 10%;
  background-color: #4c4b4ba2;
  cursor: pointer;
  transition: background-color 0.3s;
}

.quoteTab.active {
    background-color: #ffffff;
}
@media(max-width: 3440px){
  .noAccTxtArea{
    padding-left: 24%;
  }
  .RmbMeTxt {
    margin-right: 50.5%;
  }
  .GoogleLogin{
    margin-left: 33%;
  }
  .rightContent{
    margin-top: 2.5%;
  }
  .rightContent .quoteText{
    font-size: 45px;
  }
  .rightContent .quoteAuthor{
      font-size: 35px;
  }
  .quoteTabs {
    top: 90%;
    left: 40%;
  }
}
@media(max-width: 2560px){
.noAccTxtArea{
    padding-left: 20%;
  }
  .RmbMeTxt {
    margin-right: 43.5%;
  }
  .GoogleLogin{
    margin-left: 31.5%;
  }
  .rightContent{
    margin-top: 2.5%;
  }
  .rightContent .quoteText{
    font-size: 38px;
  }
  .rightContent .quoteAuthor{
      font-size: 28px;
  }
  .quoteTabs {
    top: 92%;
    left: 34%;
  }
}
@media(max-width: 1920px){
.noAccTxtArea{
    padding-left: 14%;
  }
  .RmbMeTxt {
    margin-right: 36.5%;
  }
  .GoogleLogin{
    margin-left: 31%;
  }
  .rightContent{
    margin-top: 3.5%;
  }
  .rightContent .quoteText{
    font-size: 30px;
  }
  .rightContent .quoteAuthor{
      font-size: 20px;
  }
  .quoteTabs {
    top: 88%;
    left: 28%;
  }
}
@media(max-width: 1280px){
  .noAccTxtArea{
    padding-left: 12%;
  }
  .RmbMeTxt {
    margin-right: 15.5%;
  }
  .GoogleLogin{
    margin-left: 28%;
  }
  .rightContent{
    margin-top: 7.5%;
  }
  .rightContent .quoteText{
    font-size: 20px;
  }
  .rightContent .quoteAuthor{
      font-size: 15px;
  }
  .mainContent{
    margin-top: auto;
    margin-bottom: auto;
  }
  .noAccTxtArea{
    font-size: 14px;
    padding-left: 9%;
  }
  .quoteTabs {
    top:  88%;
    left: 22%;
  }
}
@media(max-width: 820px){
    html,body{
    overflow-x: auto;
    overflow-y: hidden;
  }
  .MainArea{
    position: relative;
    width: 160%;
  }
  .noAccTxtArea{
    padding-left: 12%;
  }
  .RmbMeTxt {
    margin-right: 15.5%;
  }
  .GoogleLogin{
    margin-left: 28%;
  }
  .rightContent{
    margin-top: 3.5%;
    margin-left: 4%;
    position: absolute;
  }
  .rightContent .quoteText{
    font-size: 20px;
  }
  .rightContent .quoteAuthor{
      font-size: 15px;
  }
  .mainContent{
    margin-top: auto;
    margin-bottom: auto;
  }
  .noAccTxtArea{
    font-size: 10px;
    padding-left: 9%;
  }
  .quoteTabs {
    top: 92%;
    left: 20%;
  }
}
@media(max-width: 430px){
  html,body{
    overflow-x: auto;
    overflow-y: hidden;
  }
  .MainArea{
    position: relative;
    width: 260%;
  }
  .noAccTxtArea{
    font-size: 12px;
    padding-left: 13%;
  }
  .RmbMeTxt {
    margin-right: 15.5%;
  }
  .GoogleLogin{
    margin-left: 28%;
  }

  .rightContent{
    margin-top: 2%;
    margin-left: 4%;
    position: absolute;
  }
  .rightContent .quoteText{
    font-size: 16px;
  }
  .rightContent .quoteAuthor{
      font-size: 16px;
  }
  .quoteTabs {
    top: 95%;
    left: 12%;
  }
}