*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.main-container{
  margin-left:56px;
}

.main-profile-container{
  background-color: #efefef;
  display: flex;
  justify-content: space-between;
  margin-top:7px ;
  padding:10px;
  width:100%;
  min-height:120px;
  margin-left:5px;
  margin-bottom: 7px;
}

.profile-main-container{
  display:flex;
  align-items:flex-end;
}

.pic-container{
  background-color:#7e7e7e;
  height:90px;
  width:90px;
  border-radius:50%;
}

.form-container{
width:100%;
background:#fff;
border-radius:18px;
padding:8px 0;
box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.form-container ul{
list-style:none;
margin:0;
padding:0;
}

.form-container li{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 20px;
border-bottom:1px solid #ececec;
cursor:pointer;
transition:.25s;
}

.form-container li:last-child{
border-bottom:none;
}

.form-container li:hover{
background:#f8f9fb;
}

.info{
display:flex;
flex-direction:column;
gap:4px;
}

.info h4{
margin:0;
font-size:15px;
font-weight:600;
color:#222;
}

.info p{
margin:0;
font-size:13px;
color:#777;
}

.form-container i{
font-size:22px;
color:#999;
}

.badge{
background:#e8f4ff;
color:#1976d2;
padding:5px 12px;
border-radius:20px;
font-size:12px;
font-weight:600;
}



button{
  border:none;
  border-radius: 5px;
  width: 80px;
  height: 30px;
  background-color: #202020;
  color:#fff;
}

.log-Out-Btn{
  position: absolute;
  bottom:3px;
  left:57px;
}

.password-modal{

  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.55);

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

  z-index:9999;

  }

  .password-modal.show{

  display:flex;

  }

  .password-modal-content{

  width:92%;
  max-width:420px;

  background:#fff;

  border-radius:16px;

  padding:25px;

  box-sizing:border-box;

  animation:popup .25s ease;

  }

  @keyframes popup{

  from{

  opacity:0;
  transform:scale(.9);

  }

  to{

  opacity:1;
  transform:scale(1);

  }

  }

  .password-modal-content h4{

  margin:0 0 20px;
  font-size:22px;
  text-align:center;

  }

  .password-form{

  display:flex;
  flex-direction:column;
  gap:15px;

  }

  .password-form label{

  font-size:14px;
  font-weight:600;

  }

  .password-form input{

  height:48px;
  padding:0 15px;

  border:1px solid #d9d9d9;

  border-radius:10px;

  font-size:15px;

  outline:none;

  }

  .password-form input:focus{

  border-color:#1d4ed8;

  }

  .password-buttons{

  display:flex;

  justify-content:flex-end;

  gap:10px;

  margin-top:10px;

  }

  .password-buttons button{

  padding:12px 20px;

  border:none;

  border-radius:10px;

  font-size:15px;

  cursor:pointer;

  }

  #savePasswordBtn{

  background:#2563eb;

  color:#fff;

  }

  #closePasswordBtn{

  background:#ececec;

  }


  .phone-modal{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:100%;

    display:none;

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

    background:rgba(0,0,0,.55);

    z-index:9999;

    }

    .phone-modal.show{

    display:flex;

    }

    .phone-modal-content{

    width:92%;
    max-width:420px;

    background:#fff;

    border-radius:16px;

    padding:25px;

    box-sizing:border-box;

    animation:popup .25s ease;

    }

    .phone-modal-content h4{

    margin:0 0 20px;
    text-align:center;

    }

    .phone-form{

    display:flex;
    flex-direction:column;
    gap:15px;

    }

    .phone-form label{

    font-weight:600;
    font-size:14px;

    }

    .phone-form input{

    height:48px;

    padding:0 15px;

    border:1px solid #d9d9d9;

    border-radius:10px;

    font-size:15px;

    outline:none;

    }

    .phone-form input:focus{

    border-color:#2563eb;

    }

    .phone-buttons{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-top:10px;

    }

    .phone-buttons button{

    padding:12px 20px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    }

    #savePhoneBtn{

    background:#2563eb;

    color:#fff;

    }

    #closePhoneBtn{

    background:#ececec;

    }
  




body{
 height: 100vh;
 background-color:white;
}

/*------------Navbar start----------------*/
nav {
  background: #7e7e7e;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1rem;
  }

  nav h1 {
  font-size: 1.2rem;
  color: #fff;
  }

  .nav-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  }

  .nav-links i {
  font-size: 1.3rem;
  cursor: pointer;
  }

  .nav-links button {
  background: #333;
  color: #fff;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s;
  }

  .nav-links button:hover {
  background: #555;
  }

/*-----------------Navbar end--------------*/

/*----------Sidebar start----------*/
aside{
position: fixed;
top:0;
left: 0;
background-color:#202020;
min-height:100vh;
width:55px;
align-items: center;
justify-content: center;
padding-left: 10px;
}

.logo{
padding-bottom:25%;
}

.logo i{
color:blue;
font-size:30px;
font-weight:1000;
}

ul {
list-style: none;
padding: 0;
margin: 0;
}


.list-items ul li a,
.profile ul li a{
color:white;
text-decoration:none;
line-height: 30px;
font-size: 16px;
padding-left: 8px;
}

.profile{
position:absolute;
bottom:0;
 }
/*----------sidebar end------------*/