*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:#000;
  color:white;
  font-family:'Poppins',sans-serif;
  overflow-x:clip;
}

section{
  scroll-margin-top:110px;
}

/* ================= NAVBAR ================= */

nav{
  width:100%;

  position:absolute;

  top:0;
  left:0;

  z-index:1000;

  padding:35px 80px;

  background:rgba(5,5,5,0.42);
  backdrop-filter:blur(10px);

  transition:0.5s;
}

nav.hide{
  transform:translateY(-120%);
}

nav ul{
  display:flex;

  justify-content:space-between;

  align-items:center;

  width:100%;
  max-width:1200px;
  padding: 0 40px;
  margin:0 auto;

  list-style:none;
}

nav a{
  color:white;

  text-decoration:none;

  font-size:14px;

  font-weight:500;

  letter-spacing:5px;

  transition:0.3s;
}

nav a:hover{
  color:#ff4fd8;
}

/* ================= HERO SECTION ================= */

.hero{
  width:100%;
  height:100vh;

  position:relative;

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

  overflow:hidden;
}

/* HERO PURPLE GLOW */

.hero::before{
  content:"";

  position:absolute;

  width:850px;
  height:850px;

  left:50%;
  top:58%;

  transform:translate(-50%,-50%);

  background:radial-gradient(
    circle,
    rgba(111,0,255,0.45) 0%,
    rgba(111,0,255,0.18) 35%,
    rgba(111,0,255,0.04) 60%,
    transparent 75%
  );

  animation:heroGlow 5s ease-in-out infinite;

  z-index:0;
}

/* GLOW ANIMATION */

@keyframes heroGlow{

  0%{
    transform:translate(-50%,-50%) scale(1);
  }

  50%{
    transform:translate(-50%,-50%) scale(1.08);
  }

  100%{
    transform:translate(-50%,-50%) scale(1);
  }
}

/* BIG TEXT */

.big-text{
  position:absolute;

  top:10%;
  left:0;

  width:100%;

  display:flex;
  justify-content:center;

  z-index:2;
}

.big-text h1{

  font-size:clamp(60px, 10vw, 160px);

  font-weight:900;

  letter-spacing:2px;

  line-height:1.2;

  white-space:normal;

  text-align:center;

  transform: scale(1.2, 1.9);
  transform-origin: top center;

  background:linear-gradient(
    to bottom,
    #ffffff 0%,
    #d9d9d9 40%,
    #5f5f5f 100%
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:
    0 0 35px rgba(255,255,255,0.08);
}

/* LEFT CONTENT */

.left-content{
  position:absolute;

  left:80px;
  top:58%;

  z-index:5;
}

.left-content p{

  color:#d6d6d6;

  font-size:18px;

  line-height:2;

  letter-spacing:2px;
}

/* BUTTON */

.contact-btn{
  position:absolute;

  right:90px;
  top:58%;

  z-index:5;
}

.contact-btn a{

  text-decoration:none;

  color:white;

  padding:22px 60px;

  border-radius:60px;

  font-size:14px;

  font-weight:600;

  letter-spacing:4px;

  background:linear-gradient(
    90deg,
    #ff2ea6,
    #7a2cff
  );

  box-shadow:
    0 0 35px rgba(255,0,170,0.45);

  transition:0.4s;
}

.contact-btn a:hover{

  transform:scale(1.05);

  box-shadow:
    0 0 60px rgba(255,0,170,0.9);
}

/* FACE */

.face{
  position:absolute;

  left:50%;
  bottom:25px;

  transform:translateX(-50%);

  z-index:10;

  animation:floatFace 4s ease-in-out infinite;
}

.face img{

  width:550px;

  filter:
    drop-shadow(0 0 45px rgba(255,255,255,0.08))
    drop-shadow(0 0 90px rgba(122,44,255,0.28));
}

/* FACE FLOAT */

@keyframes floatFace{

  0%{
    transform:translateX(-50%) translateY(0px);
  }

  50%{
    transform:translateX(-50%) translateY(-18px);
  }

  100%{
    transform:translateX(-50%) translateY(0px);
  }
}

/* ================= ABOUT SECTION ================= */

.about{
  width:100%;
  min-height:100vh;

  position:relative;

  background:#050505;

  overflow:hidden;

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

  padding:40px 20px 78px;
}

/* ABOUT GLOW */

.about::before{
  content:"";

  position:absolute;

  width:900px;
  height:900px;

  top:50%;
  left:50%;

  transform:translate(-50%,-50%);

  background:radial-gradient(
    circle,
    rgba(122,44,255,0.18),
    transparent 70%
  );

  animation:pulseGlow 5s ease-in-out infinite;
}

@keyframes pulseGlow{

  0%{
    transform:translate(-50%,-50%) scale(1);
  }

  50%{
    transform:translate(-50%,-50%) scale(1.1);
  }

  100%{
    transform:translate(-50%,-50%) scale(1);
  }
}

/* ABOUT CONTENT */

.about-content{
  text-align:center;

  max-width:900px;
  margin:0 auto;

  z-index:10;
}

.about-content h2{

  font-size:120px;

  font-weight:900;

  margin-bottom:45px;

  letter-spacing:-5px;

  background:linear-gradient(
    to bottom,
    #ffffff,
    #8a8a8a
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:
    0 0 35px rgba(255,255,255,0.08);
}

.about-content p{

  font-size:26px;

  line-height:2;

  color:#f1f1f1;

  max-width:860px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:10px;
}

/* ABOUT BUTTON */

.about-content a{

  display:inline-block;

  margin-top:45px;

  text-decoration:none;

  color:white;

  padding:18px 50px;

  border-radius:50px;

  background:linear-gradient(
    90deg,
    #7a2cff,
    #ff4fd8,
    #ffb36b
  );

  letter-spacing:3px;

  font-size:14px;

  font-weight:600;

  box-shadow:
    0 0 30px rgba(255,79,216,0.5);

  transition:0.4s;
}

.about-content a:hover{
  transform:scale(1.05);
}

/* ================= STICKERS ================= */

.sticker{
  position:absolute;

  z-index:2;

  pointer-events:none;

  filter:
    drop-shadow(0 0 15px rgba(255,255,255,0.08));
}

/* POSITIONS */

.sticker1{

  width:220px;

  top:80px;
  left:40px;

  animation:float1 5s ease-in-out infinite;
}

.sticker2{

  width:180px;

  top:100px;
  right:60px;

  animation:float2 5s ease-in-out infinite;
}

.sticker3{

  width:250px;

  bottom:80px;
  left:60px;

  animation:float3 5s ease-in-out infinite;
}

.sticker4{

  width:210px;

  bottom:100px;
  right:60px;

  animation:float4 5s ease-in-out infinite;
}

/* CONTACT STICKER FLOATS */

.contact-stickers{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:visible;
  z-index:20;
}

.contact-sticker{
  position:absolute;
  width:240px;
  opacity:1;
  will-change:transform, opacity;
  animation:footerFloat 6s ease-in-out infinite;
  z-index:20;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,0.45));
}

.contact-sticker img{
  width:100%;
  height:auto;
  display:block;
}

.contact-sticker1{
  bottom:20px;
  left:8%;
  animation-delay:0s;
}

.contact-sticker2{
  bottom:15px;
  left:30%;
  width:280px;
  animation-delay:1.2s;
}

.contact-sticker3{
  bottom:18px;
  right:32%;
  animation-delay:0.6s;
}

.contact-sticker4{
  bottom:12px;
  right:10%;
  animation-delay:1.6s;
}

@keyframes footerFloat{
  0%,100%{
    transform:translateY(0px);
  }
  50%{
    transform:translateY(-18px);
  }
}

/* FLOAT ANIMATIONS */

@keyframes float1{

  0%{
    transform:rotate(-10deg) translateY(0px);
  }

  50%{
    transform:rotate(-10deg) translateY(-18px);
  }

  100%{
    transform:rotate(-10deg) translateY(0px);
  }
}

@keyframes float2{

  0%{
    transform:rotate(12deg) translateY(0px);
  }

  50%{
    transform:rotate(12deg) translateY(-18px);
  }

  100%{
    transform:rotate(12deg) translateY(0px);
  }
}

@keyframes float3{

  0%{
    transform:rotate(-6deg) translateY(0px);
  }

  50%{
    transform:rotate(-6deg) translateY(-18px);
  }

  100%{
    transform:rotate(-6deg) translateY(0px);
  }
}

@keyframes float4{

  0%{
    transform:rotate(8deg) translateY(0px);
  }

  50%{
    transform:rotate(8deg) translateY(-18px);
  }

  100%{
    transform:rotate(8deg) translateY(0px);
  }
}

/* ================= CONTACT SECTION ================= */

.contact{
  width:100%;
  min-height:100vh;
  padding:100px 8%;
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, #050505 0%, #09090f 100%);
}

.contact::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  top:-120px;
  right:-120px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(122,44,255,0.28), transparent 60%);
  filter:blur(28px);
  pointer-events:none;
}

.contact::after{
  content:"";
  position:absolute;
  width:380px;
  height:380px;
  bottom:-100px;
  left:-80px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,79,216,0.22), transparent 60%);
  filter:blur(24px);
  pointer-events:none;
}

.contact-inner{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  max-width:1200px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

.contact-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:30px;
}

.contact-left span{
  display:inline-block;
  color:#b57cff;
  letter-spacing:4px;
  font-size:13px;
  text-transform:uppercase;
}

.contact-left h2{
  font-size:clamp(42px, 5vw, 64px);
  line-height:1.05;
  max-width:720px;
}

.contact-left p{
  max-width:640px;
  color:#d5d5d5;
  font-size:1rem;
  line-height:1.9;
}

.contact-links{
  display:grid;
  gap:18px;
}

.contact-email p{
  margin:0;
  color:#ffffff;
  font-size:1.05rem;
  line-height:1.8;
}

.contact-email a{
  color:#b57cff;
  text-decoration:none;
}

.contact-email a:hover{
  opacity:0.85;
}

.social-links{
  display:flex;
  gap:18px;
}

.social-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:70px;
  height:70px;
  padding:0;
  border-radius:20px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  transition:0.25s ease;
}

.social-links a:hover{
  background:rgba(255,255,255,0.12);
}

.social-links img{
  width:42px;
  height:42px;
  object-fit:contain;
}

.contact-right{
  display:flex;
  align-items:center;
  justify-content:center;
}

.contact-form{
  width:100%;
  padding:40px;
  border-radius:34px;
  background:transparent;
  border:none;
  backdrop-filter:none;
  box-shadow:none;
}

.contact-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
  margin-bottom:20px;
}

.contact-form input{
  width:100%;
  padding:28px 30px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
  color:#ffffff;
  font-size:1.15rem;
  outline:none;
  transition:0.3s;
}

.contact-form input::placeholder{
  color:#c1c1c1;
}

.contact-form input[type="email"]{
  margin-bottom:40px;
}

.contact-form input[type="tel"]{
  margin-bottom:30px;
}
.contact-form button{
  width:100%;
  margin-top:10px;
  padding:18px 24px;
  border:none;
  border-radius:999px;
  background:linear-gradient(90deg, #ff2ea6, #7a2cff);
  color:#ffffff;
  font-size:1rem;
  font-weight:700;
  letter-spacing:1px;
  cursor:pointer;
  transition:0.3s;
  box-shadow:0 16px 45px rgba(255,79,216,0.25);
}

.contact-form button:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 55px rgba(255,79,216,0.35);
}

.form-message {
  margin-top: 15px;
  text-align: center;
  font-size: 0.95rem;
  min-height: 20px; /* Keep space so it doesn't jump */
}

.form-message.success {
  color: #4CAF50;
}

.form-message.error {
  color: #f44336;
}

@media(max-width:900px){
  .contact{
    padding:70px 30px 80px;
  }

  .contact-inner{
    grid-template-columns:1fr;
    gap:40px;
  }

  .contact-left h2{
    font-size:clamp(32px, 7vw, 48px);
  }

  .contact-form-grid{
    grid-template-columns:1fr;
  }
}

/* ================= RESPONSIVE ================= */

@media(max-width:1200px){

  .big-text h1{
    font-size:clamp(54px, 12vw, 130px);
  }

  .face img{
    width:450px;
  }
}

@media(max-width:900px){

  nav{
    padding:25px 20px;
  }

  nav ul{
    gap:20px;
    flex-wrap:wrap;
  }

  .big-text{
    top:18%;
  }

  .big-text h1{

    font-size:clamp(32px, 10vw, 60px);

    letter-spacing:0;

    white-space:normal;

    text-align:center;
  }

  .left-content{

    left:50%;

    top:72%;

    transform:translateX(-50%);

    text-align:center;
  }

  .left-content p{
    font-size:15px;
  }

  .contact-btn{

    left:50%;

    top:88%;

    transform:translateX(-50%);
  }

  .face img{
    width:320px;
  }

  .about-content h2{
    font-size:70px;
  }

  .about-content p{
    font-size:16px;
    line-height:1.8;
  }

  .sticker1{
    width:110px;
    left:10px;
  }

  .sticker2{
    width:90px;
    right:10px;
  }

  .sticker3{
    width:120px;
    left:10px;
  }

  .sticker4{
    width:100px;
    right:10px;
  }
}
/* ================= SKILLS SECTION ================= */
/* ================= SKILLS SECTION ================= */

.skills{

  width:100%;

  min-height:100vh;

  background:#050505;

  position:relative;

  overflow:hidden;

  padding:78px 8% 120px;
}

/* BACKGROUND GLOW */

.skills::before{

  content:"";

  position:absolute;

  width:1000px;
  height:1000px;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  background:radial-gradient(
    circle,
    rgba(111,0,255,0.15),
    transparent 70%
  );

  animation:skillsGlow 6s ease-in-out infinite;
}

@keyframes skillsGlow{

  0%{
    transform:translate(-50%,-50%) scale(1);
  }

  50%{
    transform:translate(-50%,-50%) scale(1.08);
  }

  100%{
    transform:translate(-50%,-50%) scale(1);
  }
}

/* HEADING */

.skills-heading{

  text-align:center;

  position:relative;

  z-index:10;

  margin-bottom:80px;
}

.skills-heading span{

  color:#b57cff;

  letter-spacing:6px;

  font-size:14px;
}

.skills-heading h2{

  font-size:140px;

  font-weight:900;

  line-height:1;

  margin-top:10px;

  background:linear-gradient(
    to bottom,
    #ffffff,
    #8b8b8b
  );

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;
}

.line{

  width:120px;
  height:4px;

  margin:25px auto;

  border-radius:10px;

  background:linear-gradient(
    90deg,
    #7a2cff,
    #ff4fd8
  );
}

.skills-heading p{

  color:#bdbdbd;

  font-size:18px;
}

/* GRID */

.skills-grid{

  position:relative;

  z-index:10;

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(240px,1fr));

  gap:30px;
}

/* CARD */

.skill-card{

  position:relative;

  overflow:hidden;

  padding:45px 28px;

  border-radius:28px;

  background:rgba(255,255,255,0.03);

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(14px);

  transition:0.45s ease;

  cursor:pointer;

  text-align:center;
}

/* CARD HOVER */

.skill-card:hover{

  transform:
    translateY(-12px)
    scale(1.03);

  box-shadow:
    0 0 40px rgba(255,255,255,0.08);
}

/* ICON */

.icon{

  width:90px;
  height:90px;

  margin:0 auto 25px;

  border-radius:50%;

  display:flex;

  justify-content:center;
  align-items:center;

  font-size:42px;

  background:rgba(255,255,255,0.03);

  border:1px solid rgba(255,255,255,0.08);
}

.icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* TITLES */

.skill-card h3{

  font-size:30px;

  margin-bottom:15px;

  line-height:1.3;
}

/* MINI LINE */

.mini-line{

  width:40px;
  height:3px;

  border-radius:10px;

  margin:18px auto;

  background:#b84dff;
}

/* TEXT */

.skill-card p{

  color:#bdbdbd;

  font-size:16px;

  line-height:1.8;
}

/* COLORS */

.python .icon{
  color:#b57cff;
  box-shadow:0 0 30px rgba(181,124,255,0.3);
}

.analysis .icon{
  color:#7aa2ff;
  box-shadow:0 0 30px rgba(122,162,255,0.3);
}

.ml .icon{
  color:#69ffd2;
  box-shadow:0 0 30px rgba(105,255,210,0.3);
}

.viz .icon{
  color:#ffc857;
  box-shadow:0 0 30px rgba(255,200,87,0.3);
}

.sql .icon{
  color:#ff74c8;
  box-shadow:0 0 30px rgba(255,116,200,0.3);
}

.eda .icon{
  color:#c678ff;
  box-shadow:0 0 30px rgba(198,120,255,0.3);
}

/* ================= PROJECTS SECTION ================= */

:root{
  --project-bg:#0d0d0d;
  --project-card:#111;
  --project-border:#2a2a2a;
  --project-text:#fff;
  --project-muted:#888;
}

.projects{
  width:100%;
  height:300vh;
  position:relative;
  --project-top-gap:220px;
  --project-bottom-gap:38px;
  background:
    radial-gradient(circle at 50% 12%, rgba(122,44,255,0.15), transparent 40%),
    linear-gradient(180deg, #050505 0%, var(--project-bg) 100%);
}

.project-stage{
  height:100vh;
  position:sticky;
  top:0;
  overflow:hidden;
  background:var(--project-bg);
}

.project-section-title{
  position:absolute;
  top:76px;
  left:0;
  width:100%;
  z-index:10;
  text-align:center;
  pointer-events:none;
}

.project-section-title h2{
  color:var(--project-text);
  font-family:'Bebas Neue','Poppins',sans-serif;
  font-size:clamp(54px, 7vw, 96px);
  font-weight:900;
  letter-spacing:3px;
  line-height:1;
  text-shadow:0 10px 0 rgba(255,255,255,0.12);
}

.project-slide{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:var(--project-top-gap) 7% var(--project-bottom-gap);
  transform:translateY(100%);
  transition:
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  will-change:transform;
  z-index:1;
  transform-origin:top center;
}

.project-slide.is-visible{
  transform:translateY(0);
}

.project-slide.is-behind{
  opacity:0.86;
}

.project-slide.is-behind-one{
  transform:translateY(-18px) scale(0.986);
}

.project-slide.is-behind-two{
  transform:translateY(-36px) scale(0.972);
  opacity:0.52;
}

.project-slide.is-current{
  transform:translateY(0) scale(1);
  opacity:1;
}

.project-slide.is-behind .project-card-stack{
  border-color:rgba(255,255,255,0.26);
  box-shadow:
    0 -12px 34px rgba(255,255,255,0.04),
    0 30px 80px rgba(0,0,0,0.55);
}

.project-slide:nth-of-type(1){
  z-index:1;
}

.project-slide:nth-of-type(2){
  z-index:2;
}

.project-slide:nth-of-type(3){
  z-index:3;
}

.project-card-stack{
  width:min(1120px,100%);
  height:clamp(500px, calc(100vh - (var(--project-top-gap) + var(--project-bottom-gap))), 620px);
  padding:clamp(22px, 2.2vw, 30px);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015)),
    var(--project-card);
  box-shadow:
    0 34px 90px rgba(0,0,0,0.62),
    inset 0 1px 0 rgba(255,255,255,0.08);
  font-family:'Bebas Neue','Poppins',sans-serif;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.project-info{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  min-height:112px;
  margin-bottom:18px;
  flex-shrink:0;
}

.project-copy{
  display:flex;
  align-items:flex-start;
  gap:18px;
}

.project-copy span{
  color:rgba(255,255,255,0.5);
  font-size:clamp(46px, 5vw, 70px);
  font-weight:900;
  line-height:0.9;
}

.project-copy h2{
  color:var(--project-text);
  font-size:clamp(30px, 3.4vw, 50px);
  font-weight:900;
  line-height:0.95;
  letter-spacing:1px;
}

.project-copy p{
  color:var(--project-muted);
  font-size:14px;
  margin-top:8px;
  font-family:'Poppins',sans-serif;
}

.project-summary{
  max-width:560px;
  color:#b8b8b8;
  font-size:12px;
  line-height:1.5;
}

.project-info a{
  color:var(--project-text);
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  white-space:nowrap;
  padding:13px 26px;
  border:1px solid rgba(255,255,255,0.82);
  border-radius:999px;
  background:rgba(255,255,255,0.02);
  transition:0.3s ease;
}

.project-info a:hover{
  color:#111;
  background:white;
}

.project-info a:focus-visible,
.contact-links a:focus-visible,
nav a:focus-visible{
  outline:2px solid #ff4fd8;
  outline-offset:3px;
}

.project-image-grid{
  display:grid;
  gap:18px;
  flex:1;
  min-height:0;
}

.project-image-grid.two-column,
.project-image-grid.three-image{
  grid-template-columns:1.55fr 1fr;
}

.project-image-grid-wide{
  grid-template-columns:1.9fr 0.95fr;
}

.project-image-link{
  display:block;
  height:100%;
  min-height:0;
  overflow:hidden;
  border-radius:16px;
}

.project-image-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.1);
  filter:saturate(1.05) contrast(1.03);
  transition:0.35s ease;
}

.project-image-link:hover img{
  transform:scale(1.03);
  filter:saturate(1.12) contrast(1.08) brightness(1.06);
}

.small-preview-stack{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:18px;
  min-height:0;
}

.small-preview-stack .project-image-link{
  height:100%;
}

.small-preview-stack img{
  height:100%;
}

.project-image-grid-wide img{
  height:100%;
  object-position:left top;
}

.project-image-grid-wide .small-preview-stack img{
  height:100%;
}

/* ================= TECH STACK SECTION ================= */

.tech-stack{
  width:100%;
  padding:110px 8%;
  background:
    radial-gradient(circle at 50% 10%, rgba(122,44,255,0.2), transparent 35%),
    linear-gradient(180deg, #070707 0%, #050505 100%);
}

.tech-heading{
  text-align:center;
  margin-bottom:52px;
}

.tech-heading span{
  color:#b57cff;
  letter-spacing:5px;
  font-size:13px;
}

.tech-heading h2{
  margin-top:12px;
  font-size:clamp(48px, 7vw, 88px);
  line-height:1;
  font-family:'Bebas Neue','Poppins',sans-serif;
  letter-spacing:1px;
  text-shadow:0 12px 30px rgba(255,255,255,0.08);
}

.tech-group{
  margin-top:34px;
  padding:14px 0 4px;
}

.tech-group h3{
  margin-bottom:18px;
  font-size:clamp(20px, 2.8vw, 28px);
  color:#f0f0f0;
  letter-spacing:0.4px;
}

.tech-marquee{
  width:100%;
  overflow:hidden;
  position:relative;
}

.tech-logo-track{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 0 14px;
  white-space:nowrap;
  opacity:1;
  transition:transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.tech-group.from-left .tech-logo-track{
  transform:translateX(-140px);
}

.tech-group.from-right .tech-logo-track{
  transform:translateX(140px);
}

.tech-group.in-view .tech-logo-track{
  transform:translateX(0);
}

.tech-logo-item{
  min-width:106px;
  background:transparent;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  transition:0.3s ease;
}

.tech-logo-item img{
  width:62px;
  height:62px;
  object-fit:contain;
  background:transparent !important;
  border-radius:0;
  animation:techFloat 2.6s ease-in-out infinite;
}

.tech-track-tools .tech-logo-item img{
  width:70px;
  height:70px;
}

.tech-logo-item:nth-child(even) img{
  animation-delay:0.25s;
}

.tech-logo-item:nth-child(3n) img{
  animation-delay:0.5s;
}

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

.tech-logo-item p{
  display:none;
}

.tech-logo-item:hover{
  transform:translateY(-4px);
  filter:drop-shadow(0 10px 16px rgba(122,44,255,0.25));
}

/* RESPONSIVE */

@media(max-width:900px){

  .skills-heading h2{
    font-size:80px;
  }

  .skills-grid{
    grid-template-columns:1fr;
  }

  .skill-card h3{
    font-size:24px;
  }

  .project-slide{
    padding:calc(var(--project-top-gap) - 36px) 20px 30px;
    align-items:flex-start;
  }

  .project-section-title{
    top:82px;
  }

  .project-section-title h2{
    font-size:48px;
  }

  .project-card-stack{
    height:calc(100vh - ((var(--project-top-gap) - 36px) + 30px));
    min-height:0;
    padding:18px;
  }

  .project-info{
    align-items:flex-start;
    min-height:126px;
    margin-bottom:14px;
    gap:12px;
  }

  .project-copy{
    gap:12px;
  }

  .project-copy span{
    font-size:40px;
  }

  .project-copy h2{
    font-size:24px;
  }

  .project-summary{
    max-width:230px;
    font-size:10px;
    line-height:1.35;
  }

  .project-info a{
    font-size:10px;
    padding:10px 14px;
  }

  .project-image-grid.two-column,
  .project-image-grid.three-image{
    grid-template-columns:1fr;
    gap:10px;
  }

  .small-preview-stack{
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr;
    gap:10px;
  }

  .project-image-grid img{
    height:100%;
  }

  .tech-stack{
    padding:90px 20px;
  }

  .tech-heading{
    margin-bottom:38px;
  }

  .tech-group{
    margin-top:22px;
    padding:12px 0 2px;
  }

  .tech-logo-track{
    gap:20px;
    padding:8px 0 12px;
    width:100%;
    justify-content:space-between;
    flex-wrap:wrap;
  }

  .tech-logo-item{
    min-width:84px;
  }

  .tech-logo-item img{
    width:52px;
    height:52px;
  }

  .tech-track-tools .tech-logo-item img{
    width:60px;
    height:60px;
  }

  .tech-logo-item p{
    font-size:11px;
  }

  .contact{
    min-height:56vh;
    padding:90px 16px 120px;
  }

  .contact-content{
    grid-template-columns:1fr;
    gap:30px;
  }

  .contact-left{
    text-align:left;
  }

  .contact-left p{
    font-size:14px;
  }

  .contact-links{
    align-items:stretch;
    flex-direction:column;
  }

  .contact-form-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .contact-form button{
    width:100%;
  }
}

@media (max-width: 768px) {
  /* Prevent any text overflow */
  body {
    overflow-x: hidden;
  }
  h1, h2, p, a {
    word-wrap: break-word;
  }

  /* Compact & Centered Navbar */
  nav {
    position: fixed; /* FIX: absolute → fixed so nav stays pinned and doesn't detach from sections */
    padding: 15px 10px;
    background: rgba(5,5,5,0.85);
  }
  nav ul {
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
  }
  nav a {
    font-size: 13px;
    letter-spacing: 2px;
  }

  /* Stack Hero Content Vertically */
  .hero {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    min-height: 100vh;
    padding: 120px 20px 60px;
    gap: 30px;
    overflow-x: hidden;
    overflow-y: visible;
  }

  /* Reset absolute positioning for stacking */
  .big-text, 
  .left-content, 
  .contact-btn, 
  .face {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    z-index: 5;
  }

  /* Hero Heading */
  .big-text {
    margin-bottom: 10px;
  }
  .big-text h1 {
    font-size: clamp(38px, 10vw, 60px);
    line-height: 1.1;
    transform: none;
    white-space: normal;
  }

  /* Hero Description */
  .left-content p {
    font-size: 16px;
    line-height: 1.8;
    max-width: 100%;
  }

  /* CTA Button */
  .contact-btn {
    margin: 10px 0 20px;
  }

  /* Avatar Image Proportional Scaling */
  .face {
    margin-top: 20px;
    animation: none; /* Disable float to prevent overflow */
  }
  .face img {
    width: 100%;
    max-width: 320px;
    height: auto;
    opacity: 1; /* Reset opacity so it acts as normal content */
  }

  /* Retain previous responsive fixes */
  .about-content h2 {
    font-size: clamp(42px, 12vw, 64px);
  }
  .skills-heading h2 {
    font-size: clamp(48px, 14vw, 72px);
  }

  .contact-stickers {
    display: none;
  }
}