:root {
  /* NAVIGATION COLORS */
  --nav-bg: rgba(44, 105, 60, 0.8);   /* nav bar background */
  --btn-bg: #71531c;                  /* button normal color */
  --btn-hover: #b9a06c;               /* button hover color */
  --btn-text: #fff4bf;                /* button text color */
}

* {margin:0; padding:0; box-sizing:border-box;}
html {scroll-behavior:smooth;}
body {
  font-family:'Poppins',sans-serif;
  background-color:#e6f2de;
  color:#2a2a2a;
}

/* Navbar & Hero */
.hero {
  position: relative;
  padding-top: 120px;
  height:100vh;
  background:url("image/ddm_asset.jpg") no-repeat center/cover;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: 90px; /* slightly lower than the image */
  left: 130px; /* slightly offset to the right */
  width: 650px;
  height: 400px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0) 80%
  );
  filter: blur(12px);
  z-index: 4; /* behind the image */
  animation: shadowFloat 3s ease-in-out 1.5s infinite;
  opacity: 0.7; /* adjust shadow strength */
}


.hero::after {
  content: "";
  position: absolute;
  top: 80px;
  left: 120px;
  width: 710px;
  height: 400px;
  background: url("image/andrea\'s\ portfolio.png") no-repeat center/contain;
  z-index: 5;

  /* ✨ Combined animations: fade-in + float */
  animation: fadeIn 1.5s ease-out, float 2s ease-in-out 1.5s infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}




.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;

  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
  padding: 30px 60px;

  background-color: var(--nav-bg);
  backdrop-filter: blur(6px);
}

.nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
}

.nav a {
  color: var(--btn-text);
  text-decoration: none;
  background-color: var(--btn-bg);
  padding: 6px 16px;
  border-radius: 6px;
  transition: 0.3s ease;
}

.nav a:hover {
  background-color: var(--btn-hover);
}


/* About */
.about {
  background:url("image/ddm_about\ me.png") no-repeat center/contain;
  background-size: cover;
  padding:270px 60px;
}

.about::after {
  content: "";
  position: absolute;
  top: 1020px;          /* vertical position inside about */
  left: 750x;        /* horizontal position inside about (move right) */
  width: 280px;       /* size */
  height: 120px;      /* approximate; keep aspect-ratio with background-size */
  
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 5;

}

.about-container {
  display:flex;
  align-items:center;
  gap:60px;
  max-width:1100px;
  margin:auto;
}
.profile-frame img {
  width:220px; border-radius:50%; border:8px solid #613a21;
} 

.about-textz p {color:#fff; max-width:470px; line-height:1.7;
  margin-left: 500px;  /* adjust this number until it fits nicely */
  margin-top: 100px;
  
}

.about-text p {color:#fff; max-width:470px; line-height:1.7;
  margin-left: 10px;  /* adjust this number until it fits nicely */
  margin-top: -160px;
}
.about-title img {
  position: relative;
  top: -50px;   /* move up safely */
  left: 150px;      /* adjust horizontally if needed */
  width: 200px; 
  
}
.about img {
  display: block;
  margin-left: 510px; /* move right */
  margin-top: -40px; /* adjust up/down */
}



/* Works */
.works {
 background:url("image/ddm_all\ bg.png") no-repeat center/contain;
  background-size: 100% 100%;
  padding:270px 60px;
  padding-bottom: 1900px;
  background-position: 50% center;
 min-height: 100vh;
}

.work-img-2 {
  position: absolute; 
  top: 1500px;  /* adjust freely */
  left: 600px;  /* adjust freely */
  width: 1000px;  /* increase as big as you want */
  z-index: 3;
}

.work-img-3 {
  position: absolute; 
  top: 2400px;  /* adjust freely */
  left: 880px;  /* adjust freely */
  width: 500px;  /* increase as big as you want */
  z-index: 3;
}

.work-img-4 {
  position: absolute; 
  top: 2390px;  /* adjust freely */
  left: -20px;  /* adjust freely */
  width: 1520px;  /* increase as big as you want */
  z-index: 3;
}

.work-img-5 {
  position: absolute; 
  top: 2550px;  /* adjust freely */
  left: 605px;  /* adjust freely */
  width: 215px;  /* increase as big as you want */
  z-index: 3;
}

.work-img-6 {
  position: absolute; 
  top: 2730px;  /* adjust freely */
  left: 800px;  /* adjust freely */
  width: 120px;  /* increase as big as you want */
  z-index: 3;
}

.work-img-7 {
  position: absolute; 
  top: 3350px;  /* adjust freely */
  left: 530px;  /* adjust freely */
  width: 460px;  /* increase as big as you want */
  z-index: 3;
}

.work-img-8 {
  position: absolute; 
  top: 3350px;  /* adjust freely */
  left: 250px;  /* adjust freely */
  width: 450px;  /* increase as big as you want */
  z-index: 3;
}

.work-img-9 {
  position: absolute; 
  top: 3100px;  /* adjust freely */
  left: 380px;  /* adjust freely */
  width: 450px;  /* increase as big as you want */
  z-index: 3;
}

.work-img-10 {
  position: absolute; 
  top: 3140px;  /* adjust freely */
  left: 130px;  /* adjust freely */
  width: 780px;  /* increase as big as you want */
  z-index: 3;
}

.work-img-11 {
  position: absolute; 
  top: 3220px;  /* adjust freely */
  left: 880px;  /* adjust freely */
  width: 370px;  /* increase as big as you want */
  z-index: 3;
}

.work-img-12 {
  position: absolute; 
  top: 1050px;  /* adjust freely */
  left: 720px;  /* adjust freely */
  width: 290px;  /* increase as big as you want */
  z-index: 3;
}




/* Contact */
.contact {
  background:url("image/ddm_contacts\ bg.png") no-repeat center/cover;
  padding:100px 60px;
  text-align:center;
  color:#fff;
}
.contact ul {list-style:none; margin-top:20px;}
.contact a {color:#ffe699; text-decoration:none;}
.contact a:hover {text-decoration:underline;}

/* Footer */
footer {
  background-color:#405e44;
  color:#fff;
  text-align:center;
  padding:20px;
  font-size:0.9rem;
}

 .adjust-position {
  position: relative;
  top: -160px;   /* move UP */
  left: 5px;   /* move RIGHT */
}