body{
text-align:center;
}

section {
  height: 100vh;
  scroll-margin-top: 13vh; 

}

section#welcome {
  scroll-margin-top: 0; /* scrolls fully to top */
}
section#projects {
 min-height: 100vh;
}



#welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-height: 100vh;
  overflow: hidden;
  padding-top: 35vh; /* visual spacing when page loads */
}

#welcome-text {
  min-height: 6vw;
  font-size: 5vw;
  line-height: 1.2;
}

#welcome-desc {
  font-size: 2vw;
  line-height: 1.2;
}
#welcome-desc-text-add {
    position: static;
    display: inline;
    color: #BA5A31;
}
#project-title{
font-size: 3vw;
font-weight: bold;
}

#arrowDown {
  position: absolute;
  top: 85vh;              /* 👈 move up/down by changing this */
  left: 50%;
  transform: translateX(-50%);
  font-size: 3vw;
  cursor: pointer;
  z-index: 10;
  transition: opacity 2s ease;
  opacity: 0;
}

#arrowDown.show {
  opacity: 1;
  visibility: visible;

}

#arrowDown.hide {
  opacity: 0;
  visibility: hidden;

}



#portrait{
  justify-content: right;
  text-align: right;


}
#about-text{
    text-align: left;
    font-size: 1vw;

}
#heading{
    font-size: 2vw;
    margin:0; 
    font-weight: bold;
}
#about{
  padding: 10vw 0;      
  margin: AUTO 8vw ;
}
#projects{
   padding: 5vh 0; 
}



.projects-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.project-card {
  width: 40%;
  background: none;
  padding: 0.25rem;
  text-align: left;
  overflow: hidden;
}

.project-card img {
  border-radius: 2px;
  margin-bottom: 0.25rem;

  width: 100%;
  height: auto;

  max-width: 100%;
  max-height: 60vh;    

}

.title-card {
  font-size: 2vw;
  margin: 0px;
  font-weight: bold;
  font-style: italic;

}

.sub-title {
  font-size: 1.5vw;
  margin: 0px;
  padding: 0px;
  color: #BA5A31;
  font-style: italic;
  font-weight: normal;
}

.project-card p {
  font-size: 1vw;
  color: #334E58;
  margin-bottom: 0.2rem;
}

.project-links a img {
  width: 2vw;
  height: 1vw;
  margin: 0 0.1rem;
  text-align:left;
}



button:hover{
background-color: #914727; /* Darker blue on hover */
color: #f5ebe0;
}
.right{
  float: right;

}