*{    
  margin:0;    
  padding:0;    
  box-sizing:border-box;    
  -webkit-tap-highlight-color:transparent;    
}    
*:focus{outline:none}    
html{scroll-behavior:smooth}    
    
body{    
  font-family:'Poppins',sans-serif;    
  background:#0f0f14;    
  color:#fff;    
  overflow-x:hidden;    
}    
    

.hero{    
  min-height:100vh;    
  display:flex;    
  align-items:center;    
  justify-content:center;    
  text-align:center;    
  position:relative;    
}    
    
.hero-inner{    
  max-width:900px;    
  padding:0 9px;    
}    
    
.hero small{    
  display:block;    
  font-size:10px;   
   font-weight:100;
  letter-spacing:5px;    
  opacity:.6;    
  margin-bottom:-20px;    
  animation:intro 1s ease forwards;    
}    
    
.hero h1{    
  font-size:94px;    
  font-weight:700;    
  letter-spacing:-3px;    
  line-height:2.05;    
  animation:intro 1s ease forwards .15s;    
}    
    
.hero h1 span{    
  color:#b5b5ff;    
}    
    
.hero p{    
  margin-top:10px;  
  font-size:15px;    
  opacity:.75;    
  line-height:1.8;    
  animation:intro 1s ease forwards .3s;    
}    
    
.socials{    
  position:absolute;    
  bottom:100px;    
  display:flex;    
  gap:18px;    
}    
    
.socials a{    
  width:42px;    
  height:42px;    
  border-radius:50%;    
  background:rgba(255,255,255,0.06);    
  display:flex;    
  align-items:center;    
  justify-content:center;    
  color:#fff;    
  text-decoration:none;
  font-size:18px;    
  transition:.35s ease;    
}    
    
.socials a:hover{    
  transform:translateY(-6px) scale(1.1);    
  background:#b5b5ff;    
  color:#000;    
}    
 
.scroll-wrap{    
  position:absolute;    
  bottom:70px;    
  display:flex;    
  flex-direction:column;    
  align-items:center;    
  gap:2px;    
}    
    
.scroll-indicator{    
  width:24px;    
  height:40px;    
  border:2px solid rgba(255,255,255,.5);    
  border-radius:20px;    
  cursor:pointer;    
  position:relative;    
}    
    
.scroll-indicator::after{    
  content:"";    
  width:4px;    
  height:8px;    
  background:#fff;    
  position:absolute;    
  top:8px;    
  left:50%;    
  transform:translateX(-50%);    
  border-radius:2px;    
  animation:scroll 1.5s infinite;    
}    
    
.scroll-text{    
  font-size:11px;    
  letter-spacing:2px;    
  opacity:.6;    
}    
    
section{    
  padding:120px 20px;    
  max-width:1150px;    
  margin:auto;    
  opacity:0;    
  transform:translateY(40px);    
  transition:1s ease;    
}    
    
section.show{    
  opacity:1;    
  transform:translateY(0);    
}    
    
section h2{    
  font-size:42px;    
  margin-bottom:20px;    
}    
    
section p{    
  font-size:18px;    
  line-height:1.8;    
  opacity:.85;
  
}
.projects{    
  display:grid;    
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));    
  gap:26px;    
  margin-top:50px;    
}    
    
.project{    
  background:#1a1a22;    
  padding:30px;    
  border-radius:18px;    
  display:flex;    
  flex-direction:column;    
  gap:14px;    
  transition:.4s;    
}    
    
.project:hover{    
  transform:translateY(-10px);    
  background:#222230;    
}    
    
.project span{    
  font-size:13px;    
  opacity:.6;    
}    
    
.project a{    
  margin-top:auto;    
  font-size:14px;    
  text-decoration:none;    
  color:#b5b5ff;    
}    
    
/* ================= SKILLS ================= */    
.skills{    
  display:flex;    
  flex-wrap:wrap;    
  gap:12px;    
  margin-top:30px;    
}    
    
.skill{    
  padding:10px 18px;    
  background:#1a1a22;    
  border-radius:30px;    
  font-size:14px;    
}    
    
/* ================= CONTACT ================= */    
.contact{    
  text-align:center;    
}    
    
.contact a{    
  display:inline-block;    
  margin-top:30px;    
  padding:16px 46px;    
  background:#fff;    
  color:#000;    
  border-radius:40px;    
  font-weight:600;    
  text-decoration:none;    
  transition:.3s;    
}    
    
.contact a:hover{    
  transform:scale(1.05);    
}    
    
/* ================= ANIMATIONS ================= */    
@keyframes intro{    
  from{opacity:0;transform:translateY(30px)}    
  to{opacity:1;transform:translateY(0)}    
}    
    
@keyframes scroll{    
  0%{opacity:0;top:6px}    
  50%{opacity:1}    
  100%{opacity:0;top:20px}    
}    
    
@media(max-width:768px){    
  .hero h1{font-size:48px}    
  section h2{font-size:32px}    
  section p{font-size:16px}    
    
  .socials{    
    bottom:160px;    
    gap:14px;    
  }    
    
  .socials a{    
    width:38px;    
    height:38px;    
    font-size:16px;    
  }    
}    
  
  .about-blob {
  width: 260px;
  height: 260px;
  display: block;
  margin: 24px auto;
  object-fit: cover;

 
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

 
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);

  
  animation: blobFloat 8s ease-in-out infinite;
}

@keyframes blobFloat {
  0% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: translateY(0);
  }
  50% {
    border-radius: 40% 60% 70% 30% / 40% 70% 30% 60%;
    transform: translateY(-12px);
  }
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: translateY(0);
  }
}
  

section {
  margin: 0;
  padding: 20px 20px; /* adjust if needed */
}

#about {
  padding-bottom: 20px;
}

#projects {
  padding-top: 20px;
}

p {
  margin-bottom: 0;
}

h2 {
  margin-bottom: 16px;
}


/* ===== SKILLS MARQUEE ===== */

.skills-marquee {
  width: 100%;
  overflow: hidden;
  margin-top: 30px;
}

.skills-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: skills-scroll 22s linear infinite;
}

.scroll-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #1a1a22;
  border-radius: 10px;
  font-size: 14px;
  white-space: nowrap;
  transition: transform .3s ease;
}

.scroll-card i {
  color: #b5b5ff;
  font-size: 18px;
}

.scroll-card:hover {
  transform: translateY(-4px) scale(1.05);
}

/* Smooth infinite scroll */
@keyframes skills-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== CENTER SKILLS SECTION CONTENT ===== */
#skills {
  text-align: center;
}

/* Center section title */
#skills h2 {
  margin-left: auto;
  margin-right: auto;
}

/* Center description text (if any) */
#skills p {
  margin-left: auto;
  margin-right: auto;
  max-width: 700px;
}

/* ================= FOOTER ================= */

.footer {
  margin-top: 120px;
  padding: 30px 20px;
  text-align: center;
  background: #0f0f14;
}

.footer p {
  font-size: 13px;
  opacity: 0.6;
  letter-spacing: 0.5px;
}