/* css/style.css (unchanged) */
body {
  font-family: "Times New Roman", Times, serif;
  width: 100%;
  overflow: hidden;
  overflow-x: hidden;
  background: linear-gradient(
    223.17deg,
    rgb(28, 24, 41) 0%,
    rgb(27, 24, 40) 4%,
    rgb(26, 23, 39) 8%,
    rgb(25, 23, 37) 12%,
    rgb(24, 22, 36) 16%,
    rgb(23, 22, 35) 20%,
    rgb(22, 21, 34) 24%,
    rgb(21, 20, 33) 28%,
    rgb(20, 19, 32) 32%,
    rgb(19, 18, 30) 36%,
    rgb(18, 18, 29) 40%,
    rgb(17, 17, 27) 44%,
    rgb(16, 16, 26) 48%,
    rgb(15, 15, 25) 52%,
    rgb(14, 14, 24) 56%,
    rgb(13, 13, 22) 60%,
    rgb(12, 12, 21) 64%,
    rgb(11, 11, 20) 68%,
    rgb(10, 10, 19) 72%,
    rgb(9, 9, 18)   76%,
    rgb(8, 8, 17)   80%,
    rgb(7, 7, 16)   84%,
    rgb(6, 6, 15)   88%,
    rgb(5, 5, 14)   92%,
    rgb(4, 4, 13)   96%,
    rgb(3, 3, 12)  100%
  );
}



.section-wrapper {
  height: 200vh;

}

.section {
  position: fixed;
  inset: 0;
  margin: auto;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  pointer-events: auto;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;
}

.section-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
  text-align: center;
}

.section-image img {
  width: 300px;
  height: 330px;
}

.section-text {
  color: white;
}

.title {
  font-size: 48px;
  font-weight: bold;
}

.title2 {
  font-size: 40px;
}

/* 1) Make all Work‐Experience text white */
#work,
#work h1,
#work h5,
#work p,
#work small,
#work .skills {
  color: #fff !important;
}
.timeline-list {
  list-style: none;
  margin: 0;
  padding-left: 28px;
  position: relative;
}

/* vertical blue line */
.timeline-list::before {
  content: "";
  position: absolute;
  top: 18px;          /* starts at dot center */
  bottom: 0;
  left: 15px;         /* centers with dot */
  width: 2px;
  background-color: #ffb0c4;;
}

/* each job entry */
.timeline-list li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 1.25rem; /* tighter spacing */
}

/* dot */
.timeline-list li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -18px; /* 28 (padding) - 10 (line) = 18 */
  width: 12px;
  height: 12px;
  background-color: #ffb0c4;;
  border-radius: 50%;
}


/* 1. Make all education text white */
#education,
#education h1,
#education h5,
#education p,
#education small,
#education .skills {
  color: #fff !important;
}

/* 2. Timeline styling for Education (same as Work, but scoped) */
#education .timeline-list {
  list-style: none;
  margin: 0;
  padding-left: 28px;
  position: relative;
}

#education .timeline-list::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 0;
  left: 15px;
  width: 2px;
  background-color: #ffb0c4;
}

#education .timeline-list li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 1.25rem;
}

#education .timeline-list li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -18px;
  width: 12px;
  height: 12px;
  background-color: #ffb0c4;
  border-radius: 50%;
}

#education .skills {
  font-size: 0.95rem;
  color: white;
}


.about{
  color: white;
}
.about h1{
  text-align: center;
}
.about p{
  font-size: 20px;
}

.work{
  color: white;
}
.rowk h1{
  text-align: center;
}
.company-logo {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: contain;
}

.timeline-line {
  position: relative;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 2px solid #ffb0c4;; /* blue line */
  margin-bottom: 1rem;
}

.timeline-dot {
  position: absolute;
  left: -9px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ffb0c4;; /* blue dot */
}

.job-entry {
  margin-top: -4px;
  margin-bottom: 8px;
}

.skills {
  font-size: 0.95rem;
  color: white;
}




/* 1. All-white styles for Certificates section */
#certificates,
#certificates h1,
#certificates h5,
#certificates p,
#certificates small,
#certificates .skills {
  color: #fff !important;
}

#honors, #patents, #resources, #volunteering  {
  color: #fff !important;
}
/* 2. Optional: Timeline visual for certificate skills (reuse from work/edu) */
#certificates .timeline-list {
  list-style: none;
  margin: 0;
  padding-left: 28px;
  position: relative;
}

#certificates .timeline-list::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 0;
  left: 15px;
  width: 2px;
  background-color: #ffb0c4;
}

#certificates .timeline-list li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 1.25rem;
}

#certificates .timeline-list li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -18px;
  width: 12px;
  height: 12px;
  background-color: #ffb0c4;
  border-radius: 50%;
}


#skills,
#skills h1,
#skills h5,
#skills .tag {
  color: #fff;
}

#skills h5 {
  font-size: 18px;
  margin-bottom: 0.5rem;
  color: #ffb0c4;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.skill-tags .tag {
  background-color: rgba(255, 176, 196, 0.15);
  color: #ffb0c4;
  border: 1px solid #ffb0c4;
  padding: 0.4rem 0.8rem;
  border-radius: 1rem;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
}

.skill-tags .tag:hover {
  background-color: #ffb0c4;
  color: #1a1a1a;
  cursor: default;
}




.container .desc {
  color: #ffb0c4;
  text-align: center;
  background-image: radial-gradient(
    circle at 50% 200vh,
    rgba(255, 214, 135, 0) 0,
    rgba(157, 47, 106, 0.5) 90vh,
    rgba(157, 47, 106, 0.8) 120vh,
    rgba(32, 31, 66, 0) 150vh
  );
  font-size: 40px;
  line-height: 0.9;
  margin-top: 20px;
}

/* Scroll Indicator Styles */
.scroll-indicator {
  position: fixed;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 14px;
  z-index: 10;
}
.scroll-indicator svg {
  color: #ffb0c4;
  width: 100%;
  height: 100%;
}



#publications,
#publications h1,
#publications h5,
#publications p,
#publications button {
  color: #fff;
}

.publication-card {
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(255, 176, 196, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.publication-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(255, 176, 196, 0.6);
}

.publication-card .banner {
  height: 220px;
  object-fit: cover;
  width: 100%;
}

.publication-card h5 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.publication-card p {
  font-size: 0.85rem;
  margin-bottom: 0.8rem;
}

.publication-card button {
  border-color: #ffb0c4;
  color: #ffb0c4;
  font-weight: 500;
  transition: all 0.3s ease;
}

.publication-card button:hover {
  background-color: #ffb0c4;
  color: #1a1a1a;
}


.read-more {
  display: inline-block;
  padding: 6px 12px;
  color: #ffb0c4;
  border: 1px solid #ffb0c4;
  border-radius: 6px;
  font-size: 0.85rem;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.read-more:hover {
  background-color: #ffb0c4;
  color: #1a1a1a;
  text-decoration: none;
}





#projects,
#projects h1,
#projects h5,
#projects p,
#projects a.read-more {
  color: #fff !important;
}
#projects{
  margin-top: 50px;
}
#projects .publication-card {
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(255, 176, 196, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}

#projects .publication-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(255, 176, 196, 0.6);
}

#projects .publication-card .banner {
  height: 220px;
  object-fit: cover;
  width: 100%;
}

#projects .publication-card h5 {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #fff;
}

#projects .publication-card p {
  font-size: 0.85rem;
  margin-bottom: 0.8rem;
  color: #bbb;
}

#projects .read-more {
  display: inline-block;
  padding: 6px 12px;
  color: #ffb0c4;
  border: 1px solid #ffb0c4;
  border-radius: 6px;
  font-size: 0.85rem;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

#projects .read-more:hover {
  background-color: #ffb0c4;
  color: #1a1a1a;
  text-decoration: none;
}


#contact,
#contact h1 {
  color: #fff;
}

.contact-btn {
  padding: 10px 20px;
  border: 2px solid #ffb0c4;
  border-radius: 8px;
  color: #ffb0c4;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact-btn:hover {
  background-color: #ffb0c4;
  color: #1a1a1a;
  text-decoration: none;
}



#projects, #skills {
  background-image: radial-gradient(
    ellipse at 50% 300vh,
    rgba(255, 214, 135, 0) 0,
    rgba(157, 47, 106, 0.4) 40vh,
    rgba(157, 47, 106, 0.6) 60vh,
    rgba(32, 31, 66, 0) 80vh
  );
  padding-bottom: 8rem; /* space for fade-out */
}













@media (max-width: 1200px) {
  .section-text { max-width: 80%; }
  .section-inner { gap: 2.5rem; }
}

/* Tablets */
@media (max-width: 992px) {
  .section-inner { gap: 2rem; }
  .title { font-size: 3.5rem; }
  .title2 { font-size: 2.8rem; }
  .publication-card .banner { height: 200px; }
}

/* Large phones / small tablets */
@media (max-width: 768px) {
  .section-inner { flex-direction: column; }
  .section-image img { width: 300px; height: 330px; }
  .title { font-size: 2.5rem; }
  .title2 { font-size: 2rem; }
  .section p,
  .publication-card h5,
  .publication-card p {
    font-size: 1rem;
  }
  .skill-tags .tag { font-size: 0.8rem; padding: 0.3rem 0.6rem; }
  .publication-card .banner { height: 160px; }
  #projects,
   .desc, #skills {
    background-image: none !important;
    
  }
    .section-wrapper {
    height: auto !important;
    margin-bottom: 100px;
  }

  .section {
    position: relative !important;
    height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body {
    overflow: auto !important;
  }

  #projects, #contact, #skills {
    background-image: none !important;
    padding-bottom: 4rem !important;
  }
  
} 


/* Phones */
@media (max-width: 576px) {
  .timeline-list { padding-left: 20px; }
  .timeline-list::before { left: 10px; }
  .timeline-list li::before { left: -15px; }
  .publication-card .banner { height: 140px; }
  .read-more, .contact-btn { padding: 8px 16px; font-size: 0.8rem; }
  .section-inner { padding: 0.5rem; }
  .contact-buttons { gap: 0.5rem; }
  .skill-tags { gap: 0.3rem; }
}