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

html{ scroll-behavior:smooth; }
body{ 
  font-family:'Poppins', sans-serif; 
  background:linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  color:#2d3748;
  overflow-x:hidden;
}

/* 🌈 NAVBAR */
.navbar{
  background:linear-gradient(145deg, rgba(255,255,255,0.97), rgba(255,255,255,0.9));
  backdrop-filter:blur(30px);
  padding:20px 0;
  position:fixed;
  top:0;
  width:100%;
  z-index:1000;
  box-shadow:0 10px 40px rgba(0,0,0,0.12), 0 0 40px rgba(255,107,107,0.28);
}

.navbar::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #feca57);
  background-size:300% 100%;
  animation:gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

.navbar-content{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.brand{
  font-family:'Playfair Display', serif;
  font-size:24px;
  font-weight:800;
  background:linear-gradient(135deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:
    0 0 10px rgba(255,255,255,0.5),
    0 0 18px rgba(255,107,107,0.6),
    0 0 26px rgba(78,205,196,0.5);
}

.nav-links{ display:flex; gap:8px; }
.nav-link{
  color:#00040b;
  font-weight:600;
  padding:12px 20px;
  border-radius:25px;
  text-decoration:none;
  transition:all 0.3s ease;
  font-size:14px;
  text-shadow:0 0 6px rgba(255,255,255,0.35);
}
.nav-link:hover{
  color:#000307;
  background:rgba(255,255,255,0.6);
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(0,0,0,0.16), 0 0 20px rgba(255,107,107,0.45);
}

.cta-button{
  background:linear-gradient(135deg, #ff6b6b, #4ecdc4);
  color:white;
  padding:14px 32px;
  border-radius:50px;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  transition:all 0.4s ease;
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(255,107,107,0.4);
}
.cta-button::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
  transition:left 0.6s;
}
.cta-button:hover::before{ left:100%; }
.cta-button:hover{ transform:translateY(-4px) scale(1.05); }

/* 🎨 HERO SECTION */
.hero-section{
  min-height:100vh;
  background: 
    linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding-top:120px;
}

.hero-bg-shapes{
  position:absolute;
  width:100%;
  height:100%;
  overflow:hidden;
  z-index:1;
}

.shape {
  position:absolute;
  border-radius:50% 20% 50% 20%;
  background:linear-gradient(45deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
  animation: floatShapes 25s ease-in-out infinite;
}

.shape1{ width:80px; height:80px; top:15%; left:8%; animation-delay:0s; }
.shape2{ width:140px; height:140px; top:65%; right:12%; animation-delay:6s; }
.shape3{ width:60px; height:60px; bottom:25%; left:15%; animation-delay:12s; }
.shape4{ width:100px; height:100px; top:35%; right:20%; animation-delay:18s; }

@keyframes floatShapes {
  0%,100%{ transform:translateY(0) rotate(0deg) scale(1); opacity:0.8; }
  33%{ transform:translateY(-25px) rotate(120deg) scale(1.15); opacity:1; }
  66%{ transform:translateY(15px) rotate(240deg) scale(0.85); opacity:0.9; }
}

/* PERFECT FLOATING SKILLS - ADJUSTED POSITIONS */
.skill-float{
  position:absolute;
  padding:16px 28px;
  border-radius:20px;
  font-weight:700;
  font-size:14px;
  background:linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
  backdrop-filter:blur(25px);
  border:2px solid rgba(255,255,255,0.8);
  color:#1a202c;
  box-shadow:0 20px 50px rgba(0,0,0,0.2);
  animation:floatY 7s ease-in-out infinite;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  z-index:5;
  max-width:180px;
  text-align:center;
  line-height:1.3;
  white-space:nowrap;
}

.skill-float:hover{
  transform:translateY(-20px) scale(1.08) !important;
  box-shadow:0 35px 80px rgba(255,107,107,0.5);
  border-color:rgba(255,107,107,1);
}

/* NEW CENTERED + SHIFTED POSITIONS */
.skill1{ top:25%; left:8%; animation-delay:0s; }
.skill2{ bottom:25%; left:8%; animation-delay:2s; }
.skill3{ top:30%; right:8%; animation-delay:1s; }
.skill4{ bottom:30%; right:8%; animation-delay:4s; }

@keyframes floatY {
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-10px) rotate(1deg); }
}

.hero-content{
  max-width:900px;
  margin:0 auto;
  padding:0 24px;
  text-align:center;
  position:relative;
  z-index:20;
}

.role-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));
  backdrop-filter:blur(25px);
  border:2px solid rgba(255,255,255,0.8);
  color:#1a202c;
  padding:12px 28px;
  border-radius:50px;
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:24px;
  box-shadow:0 15px 45px rgba(0,0,0,0.15);
  animation:fadeInUp 1s ease-out;
}

/* 🔥 PALAK DARK HIGHLIGHT + SINGH LODHI LIGHT */
.hero-name {
  font-family:'Playfair Display', serif;
  font-size:clamp(42px,8vw,68px); /* SAME SIZE */
  font-weight:900;
  margin-bottom:20px;
  line-height:1.1;
  animation:fadeInUp 1s ease-out 0.2s both;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.palak-firstname {
  background:linear-gradient(135deg, #000000 0%, #000000 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:900;
  text-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 2;
}

.singh-lodhi {
  background:linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:700;
  position: relative;
  z-index: 1;
}

.role-typed{
  font-size:clamp(22px,3.8vw,32px);
  font-weight:800;
  background:linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:20px;
  animation:fadeInUp 1s ease-out 0.4s both;
}

.hero-desc{
  font-size:18px;
  color:#1a202c;
  font-weight:500;
  max-width:550px;
  margin:0 auto 40px;
  line-height:1.7;
  animation:fadeInUp 1s ease-out 0.6s both;
}

.cta-buttons{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;
  animation:fadeInUp 1s ease-out 0.8s both;
}

@media (min-width:768px) {
  .cta-buttons{ flex-direction:row; justify-content:center; gap:20px; }
}

.primary-btn, .secondary-btn{
  padding:16px 40px;
  border-radius:50px;
  font-weight:800;
  font-size:15px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}

.primary-btn{
  background:linear-gradient(135deg, #ff6b6b, #4ecdc4);
  color:white;
  box-shadow:0 12px 40px rgba(255,107,107,0.4);
}
.primary-btn:hover{
  transform:translateY(-5px) scale(1.03);
  box-shadow:0 25px 60px rgba(255,107,107,0.6);
}

.secondary-btn{
  background:rgba(255,255,255,0.95);
  color:#1a202c;
  border:2px solid rgba(255,255,255,0.9);
  backdrop-filter:blur(20px);
}
.secondary-btn:hover{
  background:white;
  transform:translateY(-5px);
  box-shadow:0 20px 50px rgba(0,0,0,0.2);
}

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

/* ABOUT SECTION */
.about-section{
  padding:50px 0 120px;
  background:linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  position:relative;
  overflow:hidden;
}

/* Section headings - bold, highlight, effect */
.about-title, .education-title, .skills-title, .projects-title, .contact-title{
  font-family:'Playfair Display', serif;
  font-size:clamp(36px,5vw,48px);
  font-weight:900;
  color:#0b1020; /* slightly deeper dark */
  text-align:center;
  position:relative;
  z-index:10;
  letter-spacing:2px;
  text-shadow:
    0 0 14px rgba(255,255,255,0.35),
    0 0 26px rgba(255,107,107,0.55),
    0 0 40px rgba(78,205,196,0.4);
  transition:transform 0.35s ease, text-shadow 0.35s ease;
}
.about-title{ margin-bottom:36px; }
.education-title, .skills-title, .projects-title, .contact-title{ margin-bottom:60px; }
.about-title::after, .education-title::after, .skills-title::after, .projects-title::after, .contact-title::after{
  content:'';
  display:block;
  width:80px;
  height:4px;
  margin:12px auto 0;
  background:linear-gradient(90deg, #ff6b6b, #4ecdc4);
  border-radius:2px;
  box-shadow:0 2px 16px rgba(255,107,107,0.55);
}

.about-title:hover,
.education-title:hover,
.skills-title:hover,
.projects-title:hover,
.contact-title:hover{
  transform:translateY(-3px);
  text-shadow:
    0 0 18px rgba(255,255,255,0.45),
    0 0 32px rgba(255,107,107,0.75),
    0 0 52px rgba(78,205,196,0.6);
}

.about-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  position:relative;
  z-index:10;
}

@media (min-width:1024px) {
  .about-container{ grid-template-columns:1fr 1fr; align-items:start; }
}

.photo-frame{
  position:relative;
  width:100%;
  max-width:340px;
  height:420px;
  margin:0 auto;
}

.photo-frame::before{
  content:'';
  position:absolute;
  inset:-30px;
  border-radius:32px;
  background:linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1, #feca57);
  opacity:0;
  z-index:0;
  filter:blur(30px);
  transition:opacity 0.5s ease;
  animation:pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow{
  0%,100%{ opacity:0.3; transform:scale(1); }
  50%{ opacity:0.6; transform:scale(1.05); }
}

.photo-frame:hover::before{
  opacity:0.8;
}

.photo-glow{
  position:absolute;
  inset:-25px;
  background: 
    conic-gradient(from 0deg, #ff6b6b, #4ecdc4, #45b7d1, #feca57);
  border-radius:32px;
  opacity:0.5;
  animation: rotateGlow 12s linear infinite;
  z-index:1;
  filter:blur(22px);
}

@keyframes rotateGlow {
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.about-img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:28px;
  position:relative;
  z-index:2;
  transition:all 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
  border:3px solid rgba(255,255,255,0.95);
  box-shadow:
    0 35px 90px rgba(0,0,0,0.2),
    0 0 30px rgba(255,107,107,0.3),
    inset 0 0 20px rgba(255,255,255,0.1);
  filter:brightness(1.02) contrast(1.05);
}

.photo-frame:hover .about-img{
  filter:brightness(1.08) contrast(1.1);
  border-color:rgba(255,255,255,1);
}

.photo-frame:hover .about-img{
  transform:scale(1.04) translateY(-15px);
  box-shadow:0 70px 140px rgba(0,0,0,0.35), 0 0 100px rgba(255,107,107,0.6);
}

.photo-sparkle{
  position:absolute;
  width:8px;
  height:8px;
  background:radial-gradient(circle, #f6e05e, transparent);
  border-radius:50%;
  z-index:3;
  opacity:0;
  animation:sparkleFloat 4s ease-in-out infinite;
  box-shadow:0 0 12px rgba(246,224,94,0.8);
}

.sparkle1{
  top:10%;
  left:5%;
  animation-delay:0s;
}

.sparkle2{
  top:20%;
  right:8%;
  animation-delay:1s;
}

.sparkle3{
  bottom:25%;
  left:10%;
  animation-delay:2s;
}

.sparkle4{
  bottom:15%;
  right:5%;
  animation-delay:1.5s;
}

@keyframes sparkleFloat{
  0%,100%{
    opacity:0;
    transform:translateY(0) scale(0.5);
  }
  50%{
    opacity:1;
    transform:translateY(-20px) scale(1.2);
  }
}

.photo-frame:hover .photo-sparkle{
  animation-duration:2s;
}

.about-content h2{
  font-family:'Playfair Display', serif;
  font-size:clamp(22px,4vw,28px);
  margin-bottom:20px;
  font-weight:800;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-start;
}

.about-h2-soft{
  color:#edf2ff;
  opacity:0.9;
}

.about-h2-strong{
  background:linear-gradient(135deg, #ff6b6b, #f6e05e, #4ecdc4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:
    0 0 14px rgba(255,255,255,0.5),
    0 0 26px rgba(255,107,107,0.6),
    0 0 40px rgba(78,205,196,0.45);
  transition:text-shadow 0.35s ease, transform 0.35s ease;
}

.about-h2-strong:hover{
  transform:translateY(-2px);
  text-shadow:
    0 0 18px rgba(255,255,255,0.7),
    0 0 32px rgba(255,107,107,0.8),
    0 0 52px rgba(78,205,196,0.7);
}

.about-points{ list-style:none; margin:0; padding:0; }

.skill-point{
  background:rgba(255,255,255,0.98);
  padding:14px 20px 14px 52px;
  margin-bottom:14px;
  border-radius:16px;
  position:relative;
  box-shadow:
    0 10px 32px rgba(0,0,0,0.16),
    0 0 18px rgba(255,255,255,0.4);
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  border-left:4px solid transparent;
  font-size:13px;
  line-height:1.55;
  color:#1a202c;
}

.skill-point::before{
  content:"⭐";
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  color:#f6e05e;
  text-shadow:
    0 0 6px rgba(246,224,94,0.8),
    0 0 14px rgba(255,193,7,0.9);
  animation:starFloat 3.5s ease-in-out infinite;
}

.skill-point:hover{
  transform:translateX(12px);
  box-shadow:
    0 30px 70px rgba(255,107,107,0.35),
    0 0 30px rgba(78,205,196,0.55);
  border-left-color:#ff6b6b;
}

@keyframes starFloat{
  0%,100%{
    transform:translateY(-50%) translateY(0);
    text-shadow:
      0 0 6px rgba(246,224,94,0.8),
      0 0 14px rgba(255,193,7,0.9);
  }
  50%{
    transform:translateY(-50%) translateY(-4px);
    text-shadow:
      0 0 10px rgba(246,224,94,1),
      0 0 20px rgba(255,193,7,1);
  }
}

.skill-highlight{
  font-weight:800;
  background:linear-gradient(135deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.status-tags{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:40px;
}

.status-tag{
  padding:14px 28px;
  background:rgba(255,255,255,0.98);
  border-radius:35px;
  font-weight:800;
  font-size:13px;
  color:#1a202c !important;
  position:relative;
  overflow:hidden;
  box-shadow:0 10px 35px rgba(0,0,0,0.12);
  transition:all 0.4s ease;
}

/* .status-tag::before removed - using direct background */

.status-tag * { position:relative; z-index:2; }
/* .status-tag:hover::before removed */
.status-tag:hover { 
  background:linear-gradient(135deg, #ff6b6b, #4ecdc4) !important;
  color:#000000 !important; 
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(255,107,107,0.4);
}
.status-tag:hover i, .status-tag:hover * {
  color:#000000 !important;
  text-shadow:none !important;
}

/* Enhanced Status Tags for Click Toggle */
.status-icon {
  margin-right: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.status-text {
  transition: all 0.3s ease;
}

/* Active state (click to toggle) */
.status-tag.active {
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4) !important;
  box-shadow: 0 15px 45px rgba(255,107,107,0.6) !important;
  transform: scale(1.08) translateY(-4px) !important;
}

.status-tag.active .status-icon,
.status-tag.active .status-text {
  color: white !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.status-tag.active .status-icon {
  animation: iconPulse 1.5s infinite;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.15) rotate(5deg); }
}

/* EDUCATION SECTION */
.education-section{
  padding:70px 0 110px;
  background:linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  position:relative;
  overflow:hidden;
}

.education-container{
  max-width:880px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:10;
  display:grid;
  gap:24px;
  animation:fadeInUp 0.8s ease-out;
}

.edu-card{
  background:rgba(255,255,255,0.98);
  border-radius:16px;
  padding:16px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,0.10);
  border:2px solid rgba(255,255,255,0.9);
  position:relative;
  overflow:hidden;
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  backdrop-filter:blur(12px);
}

.edu-card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 18px 42px rgba(0,0,0,0.2);
  border-color:rgba(255,107,107,0.85);
}

.edu-card::before{
  content:none;
}

.edu-card::after{
  content:none;
}

.edu-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  padding:6px 14px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,0.96), rgba(230,255,250,0.96));
  color:#1a202c;
  margin-bottom:10px;
}

.edu-tag i{
  color:#ff6b6b;
}

.edu-card h3{
  font-family:'Playfair Display', serif;
  font-size:16px;
  font-weight:800;
  color:#1a202c;
  margin-bottom:6px;
}

.edu-main-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding-left:0;
}

.edu-logo{
  display:block;
  width:55px;
  max-width:28%;
  margin-bottom:0;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  flex-shrink:0;
}

.edu-main-text{
  flex:1;
}

.edu-meta{
  font-size:14px;
  color:#4a5568;
  margin-bottom:4px;
}

.edu-duration{
  font-size:13px;
  font-weight:600;
  color:#2d3748;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.edu-duration::before{
  content:'\f073';
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:11px;
  color:#ff6b6b;
}

/* SKILLS SECTION */
.skills-section{
  padding:80px 0 120px;
  background:linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  position:relative;
  overflow:hidden;
}
.skills-grid{
  max-width:1000px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
  position:relative;
  z-index:10;
}
.skill-card{
  background:rgba(255,255,255,0.98);
  padding:20px 22px;
  border-radius:20px;
  text-align:left;
  box-shadow:0 12px 40px rgba(0,0,0,0.1);
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  border:2px solid rgba(255,255,255,0.9);
  position:relative;
  overflow:hidden;
}
.skill-card:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 55px rgba(255,107,107,0.35);
  border-color:#ff6b6b;
}
.skill-card::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg, #ff6b6b, #f6e05e, #4ecdc4);
  opacity:0.9;
}

.skill-card:nth-child(1){
  border-left:4px solid #ff6b6b;
}
.skill-card:nth-child(2){
  border-left:4px solid #f6e05e;
}
.skill-card:nth-child(3){
  border-left:4px solid #4ecdc4;
}
.skill-card:nth-child(4){
  border-left:4px solid #45b7d1;
}
.skill-card:nth-child(5){
  border-left:4px solid #9f7aea;
}
.skill-card:nth-child(6){
  border-left:4px solid #ed64a6;
}
.skill-card:nth-child(7){
  border-left:4px solid #38b2ac;
}
.skill-label{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.skill-card i{
  font-size:18px;
  background:linear-gradient(135deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.skill-label span{
  font-weight:800;
  font-size:15px;
  color:#1a202c;
}
.skill-items{
  font-size:13px;
  color:#4a5568;
  line-height:1.5;
}

.skill-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.skill-chip{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(230, 255, 250, 0.95);
  font-size:12px;
  font-weight:600;
  color:#1a202c;
  box-shadow:0 4px 10px rgba(0,0,0,0.06);
}
.skill-card:hover .skill-chip{
  background:linear-gradient(135deg, rgba(255,107,107,0.12), rgba(78,205,196,0.12));
}

/* PROJECTS SECTION */
.projects-section{
  padding:60px 0 100px;
  background:linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  position:relative;
  overflow:hidden;
}
.projects-container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  position:relative;
  z-index:10;
}
@media (min-width:768px){
  .projects-container{
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:28px;
  }
}
.project-card{
  background:rgba(255,255,255,0.98);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 15px 50px rgba(0,0,0,0.12);
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  border:2px solid rgba(255,255,255,0.9);
  position:relative;
  backdrop-filter:blur(12px);
}
.project-card:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:0 35px 80px rgba(255,107,107,0.35);
  border-color:rgba(255,107,107,0.7);
}
.project-img-wrap{
  height:160px;
  overflow:hidden;
  background:linear-gradient(135deg, #667eea, #764ba2);
  position:relative;
  border-bottom:3px solid transparent;
  transition:border-bottom-color 0.3s ease;
}
.project-card:hover .project-img-wrap{
  border-bottom-color:#ff6b6b;
}
.project-img-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.1) 100%);
  opacity:0;
  transition:opacity 0.4s ease;
}
.project-card:hover .project-img-wrap::after{
  opacity:1;
}
.project-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.project-card:hover img{
  transform:scale(1.1);
}
.project-body{
  padding:20px;
  position:relative;
}
.project-body h3{
  font-family:'Playfair Display', serif;
  font-size:20px;
  font-weight:800;
  color:#1a202c;
  margin-bottom:8px;
  transition:color 0.3s ease;
  display:flex;
  align-items:center;
  gap:8px;
}
.project-body h3::before{
  content:'⭐';
  font-size:18px;
}
.project-card:hover .project-body h3{
  background:linear-gradient(135deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.project-body p{
  font-size:14px;
  color:#4a5568;
  line-height:1.7;
  margin-bottom:16px;
}
.project-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
.project-tag{
  padding:6px 14px;
  background:linear-gradient(135deg, rgba(255,107,107,0.15), rgba(78,205,196,0.15));
  border-radius:20px;
  font-size:12px;
  font-weight:700;
  color:#1a202c;
  transition:all 0.3s ease;
}
.project-card:hover .project-tag{
  background:linear-gradient(135deg, rgba(255,107,107,0.25), rgba(78,205,196,0.25));
  transform:translateY(-2px);
}
.project-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:#ff6b6b;
  text-decoration:none;
  font-size:14px;
  transition:all 0.3s ease;
  position:relative;
}
.project-link::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg, #ff6b6b, #4ecdc4);
  transition:width 0.3s ease;
}
.project-link:hover{
  gap:12px;
  color:#4ecdc4;
}
.project-link:hover::after{
  width:100%;
}

/* CONTACT SECTION */
.contact-section{ padding:80px 0 120px; 
  padding-bottom: 10px;
background:linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); position:relative; overflow:hidden; }
.contact-wrap{ max-width:700px; margin:0 auto; 
margin-bottom: 10px;
padding:0 24px; position:relative; z-index:10; }
.contact-form{ background:rgba(255,255,255,0.98); padding:48px; border-radius:28px; box-shadow:0 20px 60px rgba(0,0,0,0.12); border:2px solid rgba(255,255,255,0.9); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; font-weight:700; font-size:14px; color:#1a202c; margin-bottom:8px; }
.form-group input, .form-group textarea{ width:100%; padding:16px 20px; border:2px solid #e2e8f0; border-radius:16px; font-family:'Poppins',sans-serif; font-size:15px; transition:border-color 0.3s, box-shadow 0.3s; }
.form-group input:focus, .form-group textarea:focus{ outline:none; border-color:#ff6b6b; box-shadow:0 0 0 4px rgba(255,107,107,0.2); }
.form-group textarea{ min-height:140px; resize:vertical; }
.submit-btn{ width:100%; padding:18px; background:linear-gradient(135deg, #ff6b6b, #4ecdc4); color:white; border:none; border-radius:50px; font-weight:800; font-size:16px; cursor:pointer; transition:all 0.4s ease; font-family:'Poppins',sans-serif; box-shadow:0 12px 40px rgba(255,107,107,0.4); }
.submit-btn:hover{ transform:translateY(-3px); box-shadow:0 20px 50px rgba(255,107,107,0.5); }
.social-links { 
  margin-top: 15px;
  margin-bottom: 0;
  display:flex; 
  justify-content:center; 
  gap:20px; 
  margin-top:40px; 
  margin-bottom: 12px;
  flex-wrap:wrap; 
}
.social-link{ width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,0.98); display:flex; align-items:center; justify-content:center; color:#1a202c; font-size:22px; text-decoration:none; box-shadow:0 10px 35px rgba(0,0,0,0.1); transition:all 0.4s ease; }
.social-link:hover{ transform:translateY(-6px); background:linear-gradient(135deg, #ff6b6b, #4ecdc4); color:white; box-shadow:0 20px 50px rgba(255,107,107,0.4); }

.footer {
  text-align: center;
  padding: 15px 10px 25px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.2);
}

.footer p:first-child {
  font-weight: 600;
  font-size: 15px;
}

/* Wave effect */
/* .footer::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 200%;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: wave 6s linear infinite;
} */

/* @keyframes wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
} */

/* Text spacing */
.footer p {
  margin: 8px 0;
  font-size: 14px;
  letter-spacing: 0.5px;
  transition: 0.3s;
}

/* Hover glow */
.footer p:hover {
  color: #ffd6e0;
  transform: scale(1.05);
}

/* Heart animation ❤️ */
.heart {
  color: #ff4d6d;
  text-shadow: 0 0 8px rgba(248, 8, 52, 0.6);
  display: inline-block;
  animation: beat 1s infinite;
}

@keyframes beat {
  0% { transform: scale(1); }
  25% { transform: scale(1.2); }
  50% { transform: scale(1); }
}