body {
      font-family: "Manrope", sans-serif;
      padding : 0px;
      margin : 0px;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(160deg,  #1a0433 75%, #0b011a 100%);
      box-sizing: border-box;

}

span {
      color: #a855f7;

}

.maincard {
      border-radius: 20px;
      width: min( 980px, 95vw);
      height: min(640px, 85vh);
      display: flex;
      box-shadow: 0 0 6px #5b2a90;
     
}

.leftpart {
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      background: linear-gradient(160deg, #5b2a90 0%,#3a0f63 45%, #1a0433 75%, #0b011a 100%);
      color: aliceblue;
      padding: 10px;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      background:
       radial-gradient(ellipse at 0% 0%, rgba(120, 40, 200, 0.75) 0%, transparent 55%),
      radial-gradient(ellipse at 85% 90%, rgba(140, 20, 60, 0.4) 0%, transparent 50%),
       linear-gradient(to bottom, #1a0533 0%, #0d001a 100%);
}




.leftpart .leftcontent {
      
      margin: 0px;
      height: 90%;
      width: 90%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
}


.leftheading {
      font-size: 10px ;
      display: flex;
      gap: 5px;
      
}


.leftheading img {
      width: 40px;
}

.leftbottom {
      margin-bottom: 0px;
      display: flex;
      align-items: center;
}


.leftmain .welcomeback {
      color: #c084fc;
      font-size: 11px;
      font-weight: bold;
      width : 140px;
      border-radius: 20px;
      padding: 4px;
      background: rgba(168, 85, 247, 0.15);
      border: 1px solid rgba(168, 85, 247, 0.35);
      display : flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 20px rgba(168, 85, 247, 0.35)
      
}


.leftmain h1 {
      font-size: 40px;
      margin: 7px;
}

.leftmain p {
      font-size: 12px;
}

.leftbottom .circles {
      display: flex;

}

.circles .circle {
      height: 25px;
      width: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      padding: 2px;
      border: solid  #0b011a ;
}

.c1{
    background: linear-gradient(135deg, #ec4899, #f472b6);
    margin-right: -5px;
}
.c2{
    background: linear-gradient(135deg, #f97316, #fb923c);
   margin-right: -5px;
}
.c3{
  background: linear-gradient(135deg, #14b8a6, #22d3ee);
  margin-right: -5px;

}
.c4{
    background: linear-gradient(135deg, #a855f7, #c084fc);
      margin-right: 20px;
}









/*  now right part work starts */

.rightwrapper {
      flex: 1;
    position: relative;
    overflow: hidden;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;

}


.rightpart {
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      background-color: #0a0812;
      color: aliceblue;
      padding: 0px;
      /* flex: 1; */
      display: flex;
      justify-content: center;
      align-items: center;
     
}




.rightpart .rightlogin {
        margin: 0px;
      height: 90%;
      width: 90%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
}

.rightlogin .righttop {
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      margin-bottom: 30px;
}

.rightlogin .righttop .securelogin{
      color: #c084fc;
      font-size: 13px;
      font-weight: bold;
      margin: 0px;
      

}

.rightlogin .righttop h2{
      font-size: 30px;
    
      width: 60%;
      margin: 0px;
}

.rightlogin .righttop p{
      font-size: 12px;
      padding: 5px;
      margin: 0px;

}

.rightlogin .rightform {
      font-size: 12px;
      margin-top: 0px;
      height: 50%;

}

.rightlogin .rightform form {
    
      display: flex;
      flex-direction: column;
      height: 100%;
      padding-bottom: 15px;
      
}

.rightlogin .rightform form label {
      margin-bottom: 2px;
      margin-top: 5px;
}


.rightlogin .rightform form input {
      /* padding: 10px 16px 12px 42px; */
      margin-top: 5px;
      background-color :#434350;
      border: 1px solid rgba(168, 85, 247, .25);
      border-radius: 9px;
      margin-bottom: 7px;
      color:#fff;
      position: relative;
      padding: 15px;
}




.rememberme {

      display: flex;
      justify-content: space-between;
      margin-top: 20px ;
}

.checkbox {

      display: flex;
      justify-content: center;
      align-items: center;

}

.loginform button {
      background: linear-gradient(135deg, #a855f7, #ec4899);
      padding: 11px;
      border-radius: 5px;
      color: aliceblue;
      border : none;
      box-shadow: 0 8px 28px rgba(168, 85, 247, .4);
} 



.rightlogin .rightbottom {
      margin-top: 35px;
      display: flex;
      color: rgb(202, 224, 244);
      justify-content: center;
      align-items: center;
      font-size: 11px;

}

.rightlogin .rightbottom a{
      color: #ec4899;
      
} 

 

/* sign up starts */



.rightpart2 {
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      flex: 1;
      background:
      radial-gradient(circle at 15% 10%, rgba(109, 40, 217, 0.18), transparent 40%),
      radial-gradient(circle at 80% 95%, rgba(190, 24, 93, 0.12), transparent 45%),
      linear-gradient(180deg, #060012 0%, #0a021a 60%, #05000f 100%);
      color: aliceblue;
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 96%;
     
}

.rightpart2 .rightsignup {
      margin: 0px;
      height: 90%;
      width: 90%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
}

.rightsignup .righttop {
      margin-top: 18px;
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;
}

.rightsignup .righttop .newaccount{
      color: #c084fc;
      font-size: 12px;
      font-weight: bold;
      margin: 0px;
}


.rightsignup .righttop h2{
      font-size: 30px;
      width: 60%;
      margin: 0px;
}

.rightsignup .righttop p{
      font-size: 12px;
      padding: 5px;
      margin: 0px;

}


.rightsignup .rightform {
      font-size: 12px;
      margin-top: 0px;
      height: 55%;

}



.rightsignup .rightform form {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding-bottom: 10px;
      
}


.names {
      display: flex;
      justify-content: space-between;
}


.names .firstname , .lastname{
 width: 48%;
 display: flex;
 flex-direction: column;

}



.rightsignup .rightform form label {
      margin-bottom: 2px;
      margin-top: 5px;
}

.rightsignup .rightform form input {
     padding: 15px;
      margin-top: 5px;
      background-color :#434350;
      border: 1px solid rgba(168, 85, 247, .25);
      border-radius: 9px;
      margin-bottom: 7px;
      color:#fff;
}


.checkbox {
      display: flex;

}

.signupform button {
      background: linear-gradient(135deg, #a855f7, #ec4899);
      padding: 11px;
      border-radius: 5px;
      color: aliceblue;
      border : none;
      box-shadow: 0 8px 28px rgba(168, 85, 247, .4);
} 


.rightsignup .rightbottom {
      margin-top: 35px;
      display: flex;
      color: rgb(202, 224, 244);
      justify-content: center;
      align-items: center;
      font-size: 11px;

}
.rightsignup .rightbottom a{
      color: #ec4899;
}




/*  slide */

.rightpart,
.rightpart2 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.5s ease;
}


.rightpart {
    transform: translateX(0%);
    opacity: 1;
    z-index: 2;
}

.rightpart2 {
    transform: translateX(100%);
    opacity: 0;
    z-index: 1;
}


.maincard.signup-active .rightpart {
    transform: translateX(-100%);
    opacity: 0;
}

.maincard.signup-active .rightpart2 {
    transform: translateX(0%);
    opacity: 1;
}








.rememberme a{
      display: flex;
      justify-content: center;
      align-items: center;
}