*{
  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%;

  display:flex;
  align-items:flex-end;
  justify-content:end;
}

.pic-container i{
  font-size:22px;
  color:white;
   transform:translateX(-32px);
}

.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 CODE START   */
 .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; } /* ======================================== MODAL CONTENT ======================================== */ .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; color:#111827; } /* ======================================== PHONE FORM ======================================== */ .phone-form{ display:flex; flex-direction:column; gap:15px; } .phone-form label{ font-weight:600; font-size:14px; color:#111827; } /* ======================================== COUNTRY SEARCH ======================================== */ .phone-country-container{ width:100%; } /* This input is used by the country selector. The country dropdown opens when the user clicks it and can be searched. */ .phone-country-input{ width:100%; height:48px; padding:0 15px; border:1px solid #d9d9d9; border-radius:10px; font-size:15px; outline:none; } .phone-country-input:focus{ border-color:#2563eb; } /* ======================================== PHONE NUMBER CONTAINER ======================================== */ .phone-number-container{ display:flex; width:100%; gap:8px; } /* ======================================== COUNTRY CODE BOX ======================================== */ .phone-dial-code{ height:48px; min-width:78px; padding:0 12px; display:flex; align-items:center; justify-content:center; background:#f5f5f5; border:1px solid #d9d9d9; border-radius:10px; font-size:15px; font-weight:600; color:#111827; } /* ======================================== PHONE NUMBER BOX ======================================== */ .phone-number-input{ height:48px; width:100%; padding:0 15px; border:1px solid #d9d9d9; border-radius:10px; font-size:15px; outline:none; box-sizing:border-box; } .phone-number-input:focus{ border-color:#2563eb; } /* ======================================== PHONE BUTTONS ======================================== */ .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; font-size:14px; font-weight:600; } #savePhoneBtn{ background:#2563eb; color:#fff; } #closePhoneBtn{ background:#ececec; color:#111827; } /* ======================================== COUNTRY DROPDOWN ======================================== */ .iti{ width:100%; } .iti__dropdown-content{ z-index:10000; } .iti__search-input{ height:42px; font-size:14px; } /* ======================================== MOBILE ======================================== */ @media(max-width:400px){ .phone-modal-content{ padding:20px; } .phone-dial-code{ min-width:72px; padding:0 8px; } }
  
/* PHONE MODAL CODE END*/



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------------*/