* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', sans-serif;
    }

    body {
      background: url('image/profilebg.jpeg') no-repeat center center/cover;
      padding: 1rem;
      color: #333;
    }
.header {
      display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom:2rem;

 }    

      .header img {
      height: 50px;
width:auto;

}
.header-right
{
  text-align: right;


}
    .header h1 {
      font-size: 2em;
      font-weight: bold;
text-align:right;

    }
    .header p {
      font-size: 0.95em;
      color: #555;
text-align:right;
    }


.form-container {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
margin-top:100px;


}
.page {
  display: flex;
  justify-content: flex-end;     /* pushes form to right */
}
.card {
  background: #518CB4;
  color: white;
  padding: 1.5rem;
  border-radius: 8px;
}
.card h2 {
  margin-bottom: 1rem;
font-weight:18px;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.75rem;
}
.field label {
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}
.field input,
.field select,
.field textarea {
  padding: 0.6rem;
  border: none;
  border-radius: 4px;
  font-size: 13px;
background-color: #e6f3ff;
padding:6px 10px;
}
.field textarea {
  resize: vertical;
  min-height: 80px;
}
.btn {
  align-self: flex-end;
  padding: 0.6rem 1.5rem;
  background-color:#548cb4;
  color: white;
  border: none;
  border-radius: 1px;
  cursor: pointer;
}
.btn:hover {
  background: #5a8aa0;
}
    .upload-btn {
      background-color: #548cb4;
      color: #fff;
      padding: 10px 20px;
      font-size: 14px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
	.button{
	    background-color: #548cb4;
      color: #fff;
      padding: 10px 20px;
      font-size: 14px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
	  margin-top:20px;
	  margin-left:200px;	
		
	}

@media (max-width: 768px) {
  .form-container {
    flex-direction:column;
grid-template-rows:1fr;
align-items:center;
padding;10px;
  }
.header {
        flex-direction: row;
        align-items: center;
        gap: 35px;
      }

      .header-right {
        justify-content: space-between;
        width: 100%;
align-items:right;
      }

     
.header-right
{
  align-items:right;
width:100%;
justify-content:space-between;

}
    .header h1 {
      font-size: 15px;
      font-weight: bold;
text-align:right;
margin-top:-70px;
margin-right:-20px;
    }
    .header p {
      font-size:8px;
margin-top:5px;
      color: #555;
text-align:right;
margin-right:-30px;
    }

}



footer {
      text-align: center;
      font-size: 13px;
      padding: 20px;
      color: #001f3f;
      margin-top:20px;
    }

    footer a {
      color: #003366;
      margin: 0 10px;
      text-decoration: none;
      font-weight: bold;
    }

@media (max-width: 600px) {
  .page {
    justify-content: center;  
  }
  .flex-row {
    flex-direction: column;
  }
  button {
    margin: 0 auto;         
  }
}