.main-content{
   padding-top: 2rem;
   justify-items: center;
   justify-content: center;
   align-items: center;
   direction: rtl;
  }

  .above-div{
      
      justify-content: center;

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

  h1{
    color: #34495e;
  }
  .below-div{
    padding-top: 2rem;
      justify-items: center;
      justify-content: center;

  }



  .input-container {
position: relative;
}
input {
height: 48px;
width: 500px;
border: 1px solid #849aa8;
border-radius: 4px;
box-sizing: border-box;
padding: 16px;
}

.label {
position: absolute;
top: 0;
bottom: 0;
right: 16px;  

display: flex;
align-items: center;
}

.label {

pointer-events: none;
}

input, .label .text {
font-family: 'Segoe UI';
font-size: 16px;
}
input:focus {
outline: none;
border: 2px solid #34495e;
}


input:focus + .label .text, :not(input[value=""]) + .label .text {
font-size: 12px;
transform: translate(0, -150%);
background-color: white;
padding-left: 4px;
padding-right: 4px;
}
input:focus + .label .text {
color: #34495e;
}
.label .text {
transition: all 0.15s ease-out;
color: #849aa8;
  text-align: right;


}
.input-container.floating .text {
  font-size: 12px;
  transform: translate(0, -150%);
  background-color: white;
  padding-left: 4px;
  padding-right: 4px;
  color: #34495e;
}

.btn-container{
padding-top: 20px;
}

.login-btn {
height: 48px;
width: 500px;
background-color: #849aa8; /* Preferred primary color */
color: white;
border: none;
border-radius: 4px;
font-size: 24px;
cursor: pointer;
transition: all 0.3s ease;
}

.login-btn:hover {
background-color: #34495e; /* Preferred secondary color */
}