.navbar {
  background-color: black;
  overflow: hidden;
}

.navbar .container {
    display: flex;
    align-items: center; /* Vertically align items */
    justify-content:center; /* Space between left and right */
    position:relative
}

.container {
  padding: 20px;
}

.title {
font-family: Verdana, sans-serif;

}



 .navbar {
background-color: black;
padding: 25px 30px;
display: flex;
align-items: center;
position: relative;
min-height: 80px;
}

        .navbar-brand {
color: white;
 font-size: 24px;
font-weight: bold;
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 }

.navbar-auth {
display: flex;
 gap: 20px;
position: absolute;
 right: 30px;
 }


 .auth-link {
color: white;
text-decoration: none;
font-size: 18px;
padding: 12px 20px;
 border-radius: 6px;
transition: background-color 0.3s ease;
}


.text-center {
  text-align: center;
}

.text-white {
  color: white;
}

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

p{
    text-align: center;
}

.navbar .login {
    margin-right: auto;
    color: white;
    font-family: Verdana, sans-serif;
}

.navbar .title {
    margin: 0 auto;
    color: white;
}


.profile-flex {
    display: flex;
    align-items: center;
   
    justify-content: space-around;
}

.profile-img {
    max-width: 150px;
    height: auto;
    border-radius: 10px;
}

.profile-image {
                flex: none;
                order: -1;
            }
            
            .profile-image img {
                max-width: 200px;
                height: 200px;
            }

            .profile-image img {
            width: 100%;
            max-width: 300px;
            height: 300px;
            object-fit: cover;
            border-radius: 50%;
            border: 5px solid #fff;
            box-shadow: 0 10px 16px rgba(0,0,0,0.2);
            transition: transform 0.3s ease;
        }

        

.image-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 5%;
}

.image-box {
  position: relative;
  width: 250px;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  
}

.image-box img {
  width: 100%;
  
}

.caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  padding: 10px;
  font-weight: bold;
}

.hobby .text-center{
  margin-top: 5%;
}



h1 {
  margin-bottom: 30px;
  text-align: center;

}

.container-photo {
  text-align: center;
  margin-top: 30px;
  display:grid;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap; /* opsional, biar rapi di layar kecil */
  margin-top: 20px;
}

.photo-row img {
  width: 200px;
  height: 300px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.image-section {
  text-align: center;
}

footer{
  text-align: center;
  margin-top: 5%;
  margin-bottom: 5%;
  font-size: 20px;
}