/* RESET & BASE */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins', sans-serif;
}

body{
  background:#ecebe7;
  padding:40px;
  display:flex;
  justify-content:center;
}

/* CONTAINER */
.container{
max-width:1200px;
margin:auto;
}

.logo{
font-family:'Playfair Display', serif;
font-size:48px;
}

.run{
  color:#6e8f00;
  font-style:italic;
  font-weight:bold;
}

/* HEADER */
h2{
  text-align:center;
  font-family:'Playfair Display', serif;
  font-size:28px;
  margin-bottom:25px;
  color:#4b4b4b;
}

/* PROFILE PHOTO */
.profile-pic-section{
  text-align:center;
  margin-bottom:25px;
}

.profile-pic-section img{
  width:80px;
  height:80px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #6e8f00;
  display:block;
  margin:0 auto 8px auto;
}

.upload-btn{
  display:inline-block;
  background:#6e8f00;
  color:white;
  padding:5px 12px;
  border-radius:12px;
  font-size:11px;
  cursor:pointer;
  transition:0.2s;
}

.upload-btn i{
  font-size:10px;
  margin-right:5px;
}

.upload-btn:hover{
  background:#5a7400;
}

/* FORM LABELS */
label{
  display:block;
  margin-bottom:5px;
  font-size:14px;
  font-weight:500;
}

.sub-label{
  font-size:12px;
  color:#666;
  margin-bottom:5px;
  display:block;
}

/* INPUTS */
input{
  width:100%;
  padding:10px;
  margin-bottom:20px;
  border:1px solid #ccc;
  border-radius:10px;
  outline:none;
  transition:0.2s;
}

input:focus{
  border-color:#6e8f00;
  box-shadow:0 0 5px rgba(110,143,0,0.3);
}

/* ROWS */
.row{
  display:flex;
  gap:20px;
  margin-bottom:10px;
}

.field{
  flex:1;
}

.mi{
  max-width:60px;
}

/* BUTTON AREA */
.button-area{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
  margin-top:20px;
}

button{
  background:#6e8f00;
  color:white;
  border:none;
  padding:12px 30px;
  border-radius:25px;
  cursor:pointer;
  font-size:15px;
  transition:0.2s;
}

button:hover{
  background:#5a7400;
}

/* LOGIN LINK */
.login-link{
  text-align:center;
  margin-top:15px;
  font-size:14px;
  color:#444;
}

.login-link a{
  color:#6e8f00;
  text-decoration:none;
  font-weight:500;
  margin-left:5px;
}

.login-link a:hover{
  text-decoration:underline;
}

/* RESPONSIVE */
@media(max-width:768px){
  .row{
    flex-direction:column;
  }

  .profile-pic-section img{
    width:70px;
    height:70px;
  }
  
  
}