@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');

*{ margin:0; padding:0; box-sizing:border-box; text-decoration:none; border:none; outline:none; font-family:'Poppins',sans-serif; }

html{ font-size:62.5%; scroll-behavior:smooth; }

body{ width:100%; height:100vh; overflow-x:hidden; background:#000; color:#fff; }

/* Header */
header{
  margin-top:20px; position:fixed; top:0; left:0; width:100%;
  padding:1rem 9%; background:transparent; display:flex; justify-content:space-between; align-items:center; z-index:100;
}
.logo{ font-size:3rem; color:#b74b4b; font-weight:800; cursor:pointer; transition:.5s ease; }
.logo:hover{ transform:scale(1.1); }

/* Nav + underline indicator */
nav{ position:relative; display:flex; gap:4rem; align-items:center; }
nav a{ font-size:1.8rem; font-weight:500; color:#fff; transition:color .3s ease; }
nav a.active{ color:#ff5757; }
.nav-indicator{
  position:absolute; bottom:-6px; left:0; height:3px; width:0; background:#b74b4b; border-radius:2px;
  transition:all .45s cubic-bezier(0.68,-0.55,0.27,1.55);
}

/* Sections */
section{ min-height:100vh; padding:10rem 9% 6rem; scroll-margin-top:110px; }

.home{ display:flex; justify-content:center; align-items:center; gap:8rem; background:#000; }

/* Headings & text */
.home .home-content h1{ font-size:6rem; font-weight:700; line-height:1.2; }
span{ color:#b74b4b; }
.home-content p{ font-size:1.6rem; margin-top:1rem; max-width:70ch; }

/* Rolling “I'm a …” */
.typing-text{
  --line: 4.6rem;
  font-size:3.4rem; font-weight:600; display:flex; align-items:center; gap:1rem;
  height:var(--line); overflow:hidden;
}
.roller{ display:inline-block; height:var(--line); overflow:hidden; color:#b74b4b; }
.roller-inner{ display:block; will-change:transform; animation:rollWords 12s infinite; }
.roller-inner > span{ display:block; height:var(--line); line-height:var(--line); }

@keyframes rollWords{
  0%, 15%   { transform: translateY(0); }
  20%, 35%  { transform: translateY(calc(-1 * var(--line))); }
  40%, 55%  { transform: translateY(calc(-2 * var(--line))); }
  60%, 75%  { transform: translateY(calc(-3 * var(--line))); }
  80%, 100% { transform: translateY(calc(-4 * var(--line))); }
}

/* Profile image (floating) */
.home-img{ border-radius:50%; }
.home-img img{
  position:relative; width:40vw; max-width:420px; border-radius:50%;
  box-shadow:0 0 25px #b74b4b; cursor:pointer; transition:.3s ease; animation:floatImage 4s ease-in-out infinite;
}
@keyframes floatImage{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
  100%{ transform:translateY(0); }
}

/* Social icons */
.social-icons a{
  display:inline-flex; justify-content:center; align-items:center; width:4rem; height:4rem; margin:3rem 1.5rem 3rem 0;
  background:transparent; border:.2rem solid #b74b4b; font-size:2rem; border-radius:50%; color:#b74b4b; transition:.3s ease;
}
.social-icons a:hover{ color:#000; transform:scale(1.3) translateY(-5px); background:#b74b4b; box-shadow:0 0 25px #b74b4b; }

/* Button */
.btn{
  display:inline-block; padding:1rem 2.8rem; background:#000; border-radius:4rem;
  font-size:1.6rem; color:#b74b4b; letter-spacing:.3rem; font-weight:600; border:2px solid #b74b4b; transition:.3s ease; cursor:pointer;
}
.btn:hover{ transform:scale(1.03); background:#b74b4b; color:#000; box-shadow:0 0 25px #b74b4b; }

/* Section headings */
.heading{ font-size:4rem; text-align:center; margin-bottom:4rem; }

/* Skills */
.skills-container{ max-width:800px; margin:auto; }
.skill{
  margin-bottom:2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.skill:hover {
  transform: scale(1.1); /* zoom effect */
  z-index: 5;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
.skill h3{ font-size:2rem; margin-bottom:.5rem; }
.progress-bar{ background:#222; border-radius:2rem; overflow:hidden; height:20px; }
.progress-bar span{
  display:block; height:100%; background:#b74b4b; width:0; animation:fillBar 2s forwards;
}
@keyframes fillBar{ from{ width:0; } to{ width:var(--final-width); } }

/* Timeline (Education, Projects, Experience) */
.timeline{ max-width:600px; margin:auto; border-left:3px solid #b74b4b; padding-left:2rem; }
.timeline-item{
  margin-bottom:3rem; position:relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.timeline-item::before{
  content:""; position:absolute; left:-1.1rem; top:0; width:20px; height:20px; background:#b74b4b; border-radius:50%; animation:pulse 1.5s infinite;
}
.timeline-item:hover {
  transform: scale(1.05); /* zoom effect */
  z-index: 5;
  box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}
.timeline-item h3{ font-size:2.5rem; margin-bottom:.5rem; }
.timeline-item span{ font-size:1.4rem; color:#aaa; display:block; margin-bottom:1rem; }
.timeline-item p{ font-size:1.6rem; }
@keyframes pulse{ 0%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.5); opacity:.6; } 100%{ transform:scale(1); opacity:1; } }


/* ====== Certificates Section ====== */
#certificates {
  background: #000;
  padding: 60px 20px;
  text-align: center;
  color: #000;
}

#certificates .heading {
  color: #fcf3f3;
  margin-bottom: 40px;
}

.certificates-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.certificate {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  max-width: 270px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.certificate img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

/* ✅ Certificates – keep small hover effect */
.certificate:hover {
  transform: scale(2.05);
  z-index: 5;
  box-shadow: 0 12px 25px rgba(0,0,0,0.6);
}

/* ====== Skills, Education & Experience ====== */
.timeline-item {
  margin-bottom: 3rem;
  position: relative;
  background: #111;
  padding: 20px;
  border-radius: 12px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.timeline-item::before {
  content:"";
  position:absolute;
  left:-1.1rem;
  top:0;
  width:20px;
  height:20px;
  background:#b74b4b;
  border-radius:50%;
  animation:pulse 1.5s infinite;
}

/*On hover: Expand slightly with glow */
.timeline-item:hover {
  transform: scale(1.1); /* reduced zoom */
  z-index: 10;
  box-shadow: 0 0 30px #b74b4b; /* glowing effect like icons */
}