/* =============================================================
   PORTFOLIO — style.css
   Sections:
     1.  Global Reset & Font
     2.  Light Mode Overrides
     3.  Theme Toggle Button
     4.  Cursor Glow
     5.  Scroll Progress Bar
     6.  Back To Top Button
     7.  Particle Canvas
     8.  Logo
     9.  Navbar (with scroll-shrink support)
    10.  Navbar Links
    11.  Active Nav Link
    12.  Hero Section
    13.  Open-to-Work Badge
    14.  Hero Stat Counters
    15.  Hero Buttons
    16.  Hero Glow
    17.  Social Icons
    18.  Profile Image
    19.  Sections (common)
    20.  About Section
    21.  Skills — Circular Ring Style
    22.  Timeline
    23.  Projects — Flip + Gradient Border
    24.  Project Modal
    25.  GitHub Repos
    26.  Contact Section
    27.  Footer
    28.  Scroll Reveal
    29.  Section Headings
    30.  Contact Button
    31.  Responsive Breakpoints
   ============================================================= */


/* ================= 1. GLOBAL RESET & FONT ================= */

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

html{
scroll-behavior:smooth;
}

/* Premium font: Plus Jakarta Sans — replaces generic Arial */
body{
font-family:'Plus Jakarta Sans', sans-serif;
background:#0f172a;
color:white;
transition:background 0.4s, color 0.4s;
cursor:none; /* hide default cursor — custom glow cursor used instead */
}

/* ================= CURSOR NONE OVERRIDE ================= */
/* Force hide default cursor on ALL elements including
   links, buttons and inputs — prevents blue hand appearing */

*{
cursor:none !important;
}
/* ================= 2. LIGHT MODE OVERRIDES ================= */

body.light-mode{ background:#ffffff; color:#0f172a; }
body.light-mode .navbar{ background:rgba(241,245,249,0.9); }
body.light-mode .highlight-card{ background:#f8fafc; color:#0f172a; }
body.light-mode .skill-card{ background:#f8fafc; color:#0f172a; }
body.light-mode .skill-card h3{ color:#0369a1; }
body.light-mode .timeline-content{ background:#f8fafc; color:#0f172a; }
body.light-mode .project-card{ background:#f8fafc; color:#0f172a; }
body.light-mode .project-body h3{ color:#0f172a; }
body.light-mode .project-body p{ color:#475569; }
body.light-mode .repo{ background:#f8fafc; color:#0f172a; border-color:#e2e8f0; }
body.light-mode .repo h3{ color:#0369a1; }
body.light-mode .repo p{ color:#475569; }
body.light-mode .tech-stack span{ background:#e2e8f0; color:#0f172a; }
body.light-mode input, body.light-mode textarea{ background:#ffffff; color:#0f172a; border:1px solid #cbd5e1; }
body.light-mode footer{ background:#f1f5f9; color:#0f172a; }
body.light-mode .modal-content{ background:#ffffff; color:#0f172a; }
body.light-mode .modal-tab{ color:#475569; border-color:#cbd5e1; }
body.light-mode .modal-tab.active{ background:#38bdf8; color:#0f172a; border-color:#38bdf8; }
body.light-mode #modalTech span{ background:#e2e8f0; color:#0f172a; }
body.light-mode .video-wrapper{ background:#f1f5f9; }
body.light-mode #modalVideo{ background:#e2e8f0; }
body.light-mode #formMessage{ color:#0369a1; }
body.light-mode .nav-links{ background:#f1f5f9; }
body.light-mode .contact-btn{ color:#0f172a; }
body.light-mode section h2{
background:linear-gradient(90deg, #0f172a 0%, #0ea5e9 40%, #38bdf8 60%, #0f172a 100%);
background-size:200% auto;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
animation:headingShimmer 4s linear infinite;
}
/* Skill rings — fix invisible icons and text in light mode */
body.light-mode .ring-bg{ stroke:#e2e8f0; }
body.light-mode .ring-icon{ color:#0369a1; }
body.light-mode .ring-item p{ color:#0f172a; }
body.light-mode .ring-item small{ color:#475569; }
/* Interest tags */
body.light-mode .interest-tags span{ background:#e2e8f0; color:#0f172a; border-color:#cbd5e1; }
body.light-mode .interest-tags span:hover{ background:#38bdf8; color:#0f172a; border-color:#38bdf8; }
/* Hero stats */
body.light-mode .hero-stats{ border-color:#e2e8f0; background:rgba(241,245,249,0.8); }
body.light-mode .stat p{ color:#475569; }
body.light-mode .stat-divider{ background:#cbd5e1; }
/* Hero text */
body.light-mode .hero p{ color:#475569; }
/* Open to work badge */
body.light-mode .open-to-work{ background:rgba(34,197,94,0.1); color:#15803d; border-color:rgba(34,197,94,0.3); }
/* Contact */
body.light-mode .contact-info-item{ background:#f8fafc; color:#0f172a; border-color:#e2e8f0; }
body.light-mode .contact-info-item:hover{ border-color:#38bdf8; }
/* Timeline */
body.light-mode .timeline-content p{ color:#475569; }
/* About */
body.light-mode .about-text p{ color:#0f172a; }
body.light-mode .highlight-card p{ color:#475569; }
/* Footer — fix invisible "Vishesh Jaiswal" strong text */
body.light-mode footer strong{ color:#0f172a; }
body.light-mode .footer-links a{ color:#0369a1; }
body.light-mode .company-name{ color:#0369a1; }
/* Navbar links — fix invisible links in light mode */
body.light-mode .nav-links a{ color:#0f172a; }
body.light-mode .nav-links a:hover{ color:#0369a1; }
body.light-mode .nav-links a.active{ color:#0369a1; }
body.light-mode .nav-btn{ color:#0f172a !important; }
body.light-mode .nav-btn:hover{ color:#0369a1 !important; }
/* Project cards — GitHub button visible, same feel as Live Demo */
body.light-mode .card-btn-github{ border-color:#0369a1; color:#0369a1; }
body.light-mode .card-btn-github:hover{ border-color:#38bdf8; color:#38bdf8; }

/* ================= 3. THEME TOGGLE BUTTON ================= */

#themeToggle{
background:#38bdf8;
border:none;
padding:8px 14px;
border-radius:6px;
cursor:pointer;
font-size:18px;
color:black;
transition:0.3s;
}

#themeToggle:hover{
transform:scale(1.1);
box-shadow:0 0 10px #38bdf8;
}


/* ================= 4. BLACK HOLE CURSOR ================= */
/* A fullscreen canvas pinned behind all content.
   The black hole animation draws directly onto this canvas —
   particles, gravity lines, event horizon rings, and dark core.
   pointer-events:none ensures it never blocks clicks. */

#bhCanvas{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:9999;
}


/* ================= 5. SCROLL PROGRESS BAR ================= */
/* Gradient bar — blue to purple — fills as user scrolls */

#scrollBar{
position:fixed;
top:0;
left:0;
height:3px;
width:0%;
/* Gradient scroll bar instead of solid color */
background:linear-gradient(to right, #38bdf8, #6c63ff);
z-index:2000;
transition:width 0.1s;
}


/* ================= 6. BACK TO TOP BUTTON ================= */
/* Floating button bottom-right — appears after 300px scroll */

#backToTop{
position:fixed;
bottom:30px;
right:30px;
width:46px;
height:46px;
border-radius:50%;
background:linear-gradient(135deg, #38bdf8, #6c63ff);
color:white;
border:none;
font-size:18px;
cursor:pointer;
z-index:1500;
display:flex;
align-items:center;
justify-content:center;
/* Hidden by default — JS adds .show class when scrolled */
opacity:0;
transform:translateY(20px);
pointer-events:none;
transition:opacity 0.3s, transform 0.3s;
box-shadow:0 4px 15px rgba(56,189,248,0.4);
}

#backToTop.show{
opacity:1;
transform:translateY(0);
pointer-events:all;
}

#backToTop:hover{
transform:translateY(-4px);
box-shadow:0 8px 25px rgba(56,189,248,0.6);
}


/* ================= 7. PARTICLE CANVAS ================= */

#particles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}


/* ================= 8. LOGO ================= */

.logo{ text-decoration:none; }

/* Avatar image logo — circular with blue glow border */
.logo-img{
width:52px;
height:52px;
border-radius:50%;
border:2px solid #38bdf8;
object-fit:cover;
transition:0.3s;
animation:floatLogo 4s ease-in-out infinite;
display:block;
}

.logo-img:hover{
box-shadow:0 0 12px #38bdf8, 0 0 28px rgba(56,189,248,0.5);
transform:scale(1.08);
}

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


.avatar {
  background: rgba(255, 255, 255, 0.1);
  padding: 5px;
  border-radius: 50%;
  backdrop-filter: blur(10px);
}

/* ================= 9. NAVBAR ================= */
/* Frosted glass effect. JS adds .scrolled class to shrink it. */

.navbar{
position:fixed;
top:0;
left:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 80px;
background:rgba(2,6,23,0.85);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid rgba(56,189,248,0.15);
z-index:1000;
/* smooth transition for shrink effect */
transition:padding 0.3s ease, background 0.3s ease;
}

/* Scroll-shrink: navbar gets smaller when user scrolls down */
.navbar.scrolled{
padding:4px 80px;
background:rgba(2,6,23,0.97);
border-bottom:1px solid rgba(56,189,248,0.25);
}

/* Contact link — matches other nav links, no button style */
.nav-btn{
color:white !important;
font-weight:500;
transition:0.3s;
}

.nav-btn:hover{ color:#38bdf8 !important; }


/* ================= 10. NAVBAR LINKS ================= */

.nav-links{
display:flex;
gap:35px;
align-items:center;
list-style:none;
}

.nav-links li{ list-style:none; }

.nav-links a{
position:relative;
text-decoration:none;
color:rgba(255,255,255,0.75);
font-weight:500;
font-size:15px;
padding:5px 0;
transition:0.3s;
letter-spacing:0.4px;
cursor:pointer;
}

/* Gradient glowing underline on hover */
.nav-links a::after{
content:"";
position:absolute;
left:0;
bottom:-4px;
width:0%;
height:2px;
background:linear-gradient(90deg, #38bdf8, #818cf8);
border-radius:2px;
transition:0.3s;
box-shadow:0 0 8px #38bdf8;
}

.nav-links a:hover{
color:#ffffff;
text-shadow:0 0 12px rgba(56,189,248,0.8);
}

.nav-links a:hover::after{ width:100%; }


/* ================= 11. ACTIVE NAV LINK ================= */

.nav-links a.active{
color:#38bdf8;
font-weight:600;
text-shadow:0 0 10px rgba(56,189,248,0.7);
}

.nav-links a.active::after{ width:100%; }


/* ================= 12. HERO SECTION ================= */

.hero{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
gap:14px;
padding-top:130px;
position:relative;
overflow:hidden;
}


/* ================= 13. OPEN TO WORK BADGE ================= */
/* Animated pulsing green badge — signals availability */

.open-to-work{
display:inline-flex;
align-items:center;
gap:8px;
background:rgba(34,197,94,0.12);
border:1px solid rgba(34,197,94,0.35);
color:#4ade80;
padding:6px 16px;
border-radius:50px;
font-size:13px;
font-weight:600;
letter-spacing:0.5px;
margin-bottom:4px;
}

/* Pulsing green dot inside badge */
.otw-dot{
width:8px;
height:8px;
border-radius:50%;
background:#4ade80;
display:inline-block;
animation:otwPulse 1.5s ease-in-out infinite;
}

@keyframes otwPulse{
0%,100%{ box-shadow:0 0 0 0 rgba(74,222,128,0.5); }
50%     { box-shadow:0 0 0 6px rgba(74,222,128,0); }
}


/* ================= 14. HERO STAT COUNTERS ================= */
/* Three stats that count up on load: Projects · Internship · Years */

.hero-stats{
display:flex;
align-items:center;
gap:0;
background:rgba(30,41,59,0.6);
border:1px solid rgba(56,189,248,0.2);
border-radius:16px;
padding:16px 32px;
margin:8px 0;
backdrop-filter:blur(8px);
}

.stat{
display:flex;
flex-direction:column;
align-items:center;
padding:0 28px;
}

.stat-number{
font-size:2rem;
font-weight:800;
color:#38bdf8;
line-height:1;
}

.stat-plus{
font-size:1.4rem;
font-weight:700;
color:#38bdf8;
}

.stat p{
font-size:12px;
color:#94a3b8;
margin-top:4px;
letter-spacing:0.5px;
}

/* Vertical divider between stats */
.stat-divider{
width:1px;
height:40px;
background:rgba(56,189,248,0.2);
}


/* ================= 15. HERO BUTTONS ================= */

.hero-buttons{
display:flex;
gap:14px;
margin-top:8px;
}

/* Filled primary button */
.btn-primary{
display:inline-flex;
align-items:center;
gap:8px;
padding:12px 28px;
background:linear-gradient(135deg, #0ea5e9, #38bdf8);
color:#0f172a;
border-radius:50px;
text-decoration:none;
font-weight:700;
font-size:15px;
transition:all 0.3s ease;
box-shadow:0 4px 15px rgba(56,189,248,0.35);
cursor:pointer;
}

.btn-primary:hover{
transform:translateY(-3px);
box-shadow:0 8px 25px rgba(56,189,248,0.55);
}

/* Outline secondary button */
.btn-outline{
display:inline-flex;
align-items:center;
gap:8px;
padding:12px 28px;
border:2px solid #38bdf8;
color:#38bdf8;
border-radius:50px;
text-decoration:none;
font-weight:600;
font-size:15px;
transition:all 0.3s ease;
cursor:pointer;
}

.btn-outline:hover{
background:#38bdf8;
color:#0f172a;
transform:translateY(-3px);
box-shadow:0 8px 25px rgba(56,189,248,0.4);
}

/* Generic .btn kept for contact button compatibility */
.btn{
padding:12px 28px;
background:linear-gradient(135deg, #0ea5e9, #38bdf8);
color:#0f172a;
border-radius:50px;
text-decoration:none;
font-weight:700;
transition:0.3s;
display:inline-flex;
align-items:center;
gap:8px;
}

.btn:hover{
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(56,189,248,0.5);
}


/* ================= 16. HERO GLOW ================= */

.hero-glow{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:700px;
height:700px;
background:radial-gradient(circle, rgba(56,189,248,0.2) 0%, rgba(56,189,248,0.08) 40%, transparent 70%);
filter:blur(80px);
z-index:-1;
pointer-events:none;
}

/* Gradient animated name in hero */
.gradient-name{
background:linear-gradient(90deg, #38bdf8, #818cf8, #38bdf8);
background-size:200% auto;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
animation:gradientMove 3s linear infinite;
}

@keyframes gradientMove{
0%  { background-position:0% center; }
100%{ background-position:200% center; }
}


/* ================= 17. SOCIAL ICONS ================= */

.social-icons{
display:flex;
gap:16px;
margin-top:16px;
justify-content:center;
}

.social-icons a{
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#1e293b;
color:#38bdf8;
font-size:19px;
transition:0.3s;
cursor:pointer;
}

.social-icons a:hover{
background:#38bdf8;
color:#0f172a;
transform:translateY(-5px);
box-shadow:0 10px 20px rgba(56,189,248,0.4);
}


/* ================= 18. PROFILE IMAGE ================= */

.profile-box{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:20px;
}

.profile-circle{
position:relative;
width:300px;
height:300px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
}

/* Rotating multicolor gradient ring */
.profile-circle::before{
content:"";
position:absolute;
width:100%;
height:100%;
border-radius:50%;
background:conic-gradient(#38bdf8, #22c55e, #9333ea, #f59e0b, #38bdf8);
animation:spin 5s linear infinite;
box-shadow:0 0 30px rgba(56,189,248,0.5), 0 0 60px rgba(56,189,248,0.3);
}

/* White inner ring separating photo from gradient */
.profile-circle::after{
content:"";
position:absolute;
width:258px;
height:258px;
background:#fcfbfb;
border-radius:50%;
}

.profile-circle img{
width:248px;
height:248px;
border-radius:50%;
object-fit:cover;
position:relative;
z-index:2;
border:2px solid #ffffff;
}

@keyframes spin{
0%  { transform:rotate(0deg); }
100%{ transform:rotate(360deg); }
}


/* ================= 19. SECTIONS (COMMON) ================= */

section{
padding:100px 80px;
text-align:center;
}


/* ================= 20. ABOUT SECTION ================= */

.about-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
margin-top:40px;
align-items:center;
}

.about-text{
text-align:left;
line-height:1.8;
font-size:16px;
}

.about-highlights{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

/* Highlight card — has icon, hover lift + border glow */
.highlight-card{
background:#1e293b;
padding:22px 20px;
border-radius:14px;
transition:0.35s;
border:1px solid transparent;
text-align:left;
}

/* Colored icon circle at top of each card */
.highlight-icon{
width:42px;
height:42px;
border-radius:50%;
background:rgba(56,189,248,0.12);
display:flex;
align-items:center;
justify-content:center;
color:#38bdf8;
font-size:18px;
margin-bottom:12px;
}

.highlight-card h3{
color:#38bdf8;
margin-bottom:8px;
font-size:15px;
font-weight:600;
}

.highlight-card p{ font-size:14px; line-height:1.6; }

/* Hover: lift + gradient border glow */
.highlight-card:hover{
transform:translateY(-6px);
border-color:rgba(56,189,248,0.4);
box-shadow:0 10px 30px rgba(56,189,248,0.2);
}


/* ================= 21. SKILLS — CIRCULAR RING STYLE ================= */

.skills{ text-align:center; }

.skills-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
gap:28px;
margin-top:40px;
padding:0 20px;
}

/* Individual skill card */
.skill-card{
background:#1e293b;
padding:26px;
border-radius:16px;
transition:0.35s;
border:1px solid transparent;
}

.skill-card h3{
margin-bottom:22px;
color:#38bdf8;
font-size:15px;
font-weight:600;
display:flex;
align-items:center;
gap:8px;
justify-content:center;
}

.skill-card:hover{
transform:translateY(-8px);
border-color:rgba(56,189,248,0.3);
box-shadow:0 12px 30px rgba(56,189,248,0.2);
}

/* Row of ring items inside a card */
.skill-rings{
display:flex;
flex-wrap:wrap;
gap:16px;
justify-content:center;
}

/* Each ring + label group */
.ring-item{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
}

.ring-item p{
font-size:12px;
font-weight:500;
color:#e2e8f0;
}

.ring-item small{
font-size:11px;
color:#64748b;
}

/* SVG ring container */
.ring{
position:relative;
width:72px;
height:72px;
}

.ring svg{
width:72px;
height:72px;
transform:rotate(-90deg); /* start fill from top */
}

/* Background track of the ring */
.ring-bg{
fill:none;
stroke:#0f172a;
stroke-width:6;
}

/* Animated fill arc — JS sets stroke-dashoffset on scroll */
.ring-fill{
fill:none;
stroke:url(#ringGrad);
stroke-width:6;
stroke-linecap:round;
/* circumference = 2π × 32 ≈ 201 — starts as full gap (hidden) */
stroke-dasharray:201;
stroke-dashoffset:201;
transition:stroke-dashoffset 1.2s ease;
}

/* Icon centered inside the ring */
.ring-icon{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#38bdf8;
font-size:20px;
}

/* Interests card — tag pills instead of rings */
.skill-card-interest{
display:flex;
flex-direction:column;
justify-content:center;
}

.interest-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-top:8px;
}

.interest-tags span{
background:rgba(56,189,248,0.1);
border:1px solid rgba(56,189,248,0.25);
color:#7dd3fc;
padding:8px 14px;
border-radius:50px;
font-size:13px;
display:flex;
align-items:center;
gap:6px;
transition:0.3s;
}

.interest-tags span:hover{
background:rgba(56,189,248,0.2);
border-color:#38bdf8;
transform:translateY(-2px);
}


/* ================= 22. TIMELINE ================= */

.timeline-container{
margin-top:40px;
position:relative;
max-width:700px;
margin-left:auto;
margin-right:auto;
}

/* Vertical connecting line */
.timeline-container::before{
content:"";
position:absolute;
left:50%;
width:2px;
height:100%;
background:linear-gradient(to bottom, #38bdf8, #6c63ff);
transform:translateX(-50%);
}

.timeline-item{
display:flex;
justify-content:center;
margin-bottom:40px;
position:relative;
}

/* Circular icon on the line */
.timeline-icon{
background:linear-gradient(135deg, #38bdf8, #6c63ff);
color:#0f172a;
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
position:absolute;
left:50%;
transform:translateX(-50%);
font-size:16px;
z-index:2;
}

.timeline-content{
background:#1e293b;
padding:22px;
border-radius:12px;
width:300px;
text-align:left;
margin-top:24px;
border:1px solid transparent;
transition:0.3s;
}

.timeline-content:hover{
border-color:rgba(56,189,248,0.3);
box-shadow:0 8px 25px rgba(56,189,248,0.15);
}

.timeline-content h3{ font-size:16px; margin-bottom:6px; }
.timeline-content p{ font-size:14px; line-height:1.6; color:#94a3b8; margin-bottom:4px; }
.timeline-content span{ font-size:13px; color:#38bdf8; font-weight:600; }

/* Company name styled differently from description */
.company-name{
color:#7dd3fc !important;
font-weight:600 !important;
font-size:13px !important;
display:flex;
align-items:center;
gap:6px;
margin-bottom:6px !important;
}


/* ================= 23. PROJECTS ================= */

.project-container{
display:flex;
gap:30px;
justify-content:center;
flex-wrap:wrap;
padding-top:40px;
}

/* Project card — hover lift + gradient border glow */
.project-card{
background:#1e293b;
width:360px;
border-radius:16px;
overflow:hidden;
cursor:pointer;
position:relative;
display:flex;
flex-direction:column;
transition:transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
border:1px solid rgba(56,189,248,0.1);
}

/* Gradient border glow on hover */
.project-card:hover{
transform:translateY(-10px);
border-color:transparent;
box-shadow:0 0 0 2px #38bdf8, 0 20px 40px rgba(56,189,248,0.25), 0 0 60px rgba(108,99,255,0.15);
}

/* Featured badge on Groovix */
.featured-badge{
position:absolute;
top:12px;
left:12px;
background:linear-gradient(135deg, #f59e0b, #fbbf24);
color:#0f172a;
padding:4px 12px;
border-radius:50px;
font-size:12px;
font-weight:700;
z-index:10;
display:flex;
align-items:center;
gap:5px;
}

/* Image container with overlay on hover */
.project-img-wrap{
position:relative;
overflow:hidden;
}

.project-img{
width:100%;
height:180px;
object-fit:cover;
transition:transform 0.4s ease;
display:block;
}

.project-card:hover .project-img{ transform:scale(1.06); }

/* Overlay that appears on hover */
.project-overlay{
position:absolute;
inset:0;
background:rgba(56,189,248,0.15);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transition:0.3s;
}

.project-overlay p{
color:white;
font-weight:600;
font-size:14px;
background:rgba(0,0,0,0.5);
padding:6px 14px;
border-radius:50px;
}

.project-card:hover .project-overlay{ opacity:1; }

/* Card body — padding and content below image */
.project-body{
padding:18px 20px 20px;
display:flex;
flex-direction:column;
flex:1;
gap:10px;
}

.project-body h3{ font-size:16px; font-weight:700; text-align:left; }
.project-body p{ font-size:14px; color:#94a3b8; text-align:left; line-height:1.6; }

/* Tech stack tags */
.tech-stack{
display:flex;
gap:6px;
flex-wrap:wrap;
}

.tech-stack span{
background:#0f172a;
padding:4px 10px;
font-size:12px;
border-radius:50px;
transition:0.3s;
}

.tech-stack span:hover{ background:#38bdf8; color:#0f172a; }

/* Direct action buttons on card — GitHub + Live Demo */
.card-actions{
display:flex;
gap:10px;
margin-top:auto;
padding-top:4px;
}

.card-btn{
display:inline-flex;
align-items:center;
gap:6px;
padding:7px 16px;
border-radius:50px;
font-size:13px;
font-weight:600;
text-decoration:none;
transition:0.3s;
}

/* GitHub button — same filled style as Live Demo */
.card-btn-github{
background:#1e293b;
color:#e2e8f0;
border:1.5px solid rgba(255,255,255,0.15);
}

.card-btn-github:hover{
border-color:#38bdf8;
color:#38bdf8;
transform:translateY(-2px);
}

/* Live Demo button — filled style */
.card-btn-demo{
background:linear-gradient(135deg, #38bdf8, #6c63ff);
color:#0f172a;
}

.card-btn-demo:hover{
transform:translateY(-2px);
box-shadow:0 6px 18px rgba(56,189,248,0.4);
}


/* ================= 24. PROJECT MODAL ================= */

.project-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.88);
display:none;
align-items:center;
justify-content:center;
z-index:5000;
overflow-y:auto;
padding:20px 0;
backdrop-filter:blur(4px);
}

.modal-content{
position:relative;
background:#1e293b;
padding:30px;
border-radius:16px;
max-width:800px;
width:90%;
text-align:center;
animation:zoomIn 0.35s ease;
max-height:90vh;
overflow-y:auto;
border:1px solid rgba(56,189,248,0.2);
}

@keyframes zoomIn{
0%  { transform:scale(0.8); opacity:0; }
100%{ transform:scale(1); opacity:1; }
}

.slider{ position:relative; margin-bottom:20px; }

#sliderImage{ width:100%; border-radius:10px; }

.slide-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(56,189,248,0.9);
border:none;
padding:10px;
cursor:pointer;
font-size:16px;
border-radius:50%;
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 4px 12px rgba(0,0,0,0.4);
transition:0.2s;
}

.slide-btn:hover{ background:#38bdf8; transform:translateY(-50%) scale(1.1); }
.left { left:-18px; }
.right{ right:-18px; }

#modalTech{
margin-top:14px;
display:flex;
justify-content:center;
gap:8px;
flex-wrap:wrap;
}

#modalTech span{
background:#0f172a;
padding:5px 12px;
border-radius:50px;
font-size:13px;
}

.modal-links{
margin-top:20px;
display:flex;
gap:14px;
justify-content:center;
}

/* Modal GitHub button — outline style matching card GitHub btn */
.modal-links a#modalGithub{
display:inline-flex;
align-items:center;
gap:6px;
border:1.5px solid rgba(255,255,255,0.25);
color:#e2e8f0;
background:transparent;
padding:9px 18px;
border-radius:50px;
text-decoration:none;
font-weight:500;
font-size:14px;
transition:0.3s;
}

.modal-links a#modalGithub:hover{
border-color:#38bdf8;
color:#38bdf8;
transform:translateY(-2px);
}

/* Modal Live Demo button — filled gradient matching card demo btn */
.modal-links a#modalDemo{
display:inline-flex;
align-items:center;
gap:6px;
background:linear-gradient(135deg, #38bdf8, #6c63ff);
color:#0f172a;
padding:9px 18px;
border-radius:50px;
text-decoration:none;
font-weight:600;
font-size:14px;
transition:0.3s;
}

.modal-links a#modalDemo:hover{
transform:translateY(-2px);
box-shadow:0 6px 18px rgba(56,189,248,0.4);
}

/* Light mode modal link fixes */
body.light-mode .modal-links a#modalGithub{ border-color:#cbd5e1; color:#475569; }
body.light-mode .modal-links a#modalGithub:hover{ border-color:#0369a1; color:#0369a1; }

.close-btn{
position:absolute;
top:12px;
right:16px;
font-size:30px;
font-weight:bold;
cursor:pointer;
color:#94a3b8;
z-index:9999;
transition:0.3s;
line-height:1;
}

.close-btn:hover{ color:#38bdf8; transform:scale(1.2) rotate(90deg); }

.modal-tabs{
display:flex;
gap:10px;
justify-content:center;
margin-bottom:20px;
}

.modal-tab{
background:transparent;
border:1.5px solid rgba(56,189,248,0.3);
color:#94a3b8;
padding:9px 22px;
border-radius:50px;
cursor:pointer;
font-size:14px;
font-weight:500;
transition:0.3s;
display:flex;
align-items:center;
gap:6px;
font-family:'Plus Jakarta Sans', sans-serif;
}

.modal-tab:hover{ border-color:#38bdf8; color:#38bdf8; }

/* Active tab — same gradient pill as card demo button */
.modal-tab.active{
background:linear-gradient(135deg, #38bdf8, #6c63ff);
border-color:transparent;
color:#0f172a;
font-weight:600;
}

.video-wrapper{
position:relative;
width:100%;
border-radius:10px;
overflow:hidden;
background:#0f172a;
margin-bottom:20px;
}

#modalVideo{
width:100%;
border-radius:10px;
display:block;
max-height:420px;
object-fit:contain;
background:#000;
}

.no-video-msg{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:12px;
padding:60px 20px;
color:#64748b;
}

.no-video-msg i{ font-size:48px; color:#334155; }
.no-video-msg p{ font-size:16px; }

.slider-dots{
display:flex;
justify-content:center;
gap:8px;
margin-top:12px;
margin-bottom:4px;
}

.dot{
width:10px;
height:10px;
border-radius:50%;
background:#334155;
cursor:pointer;
transition:0.3s;
border:2px solid transparent;
}

.dot.active{ background:#38bdf8; border-color:#38bdf8; transform:scale(1.2); }
.dot:hover { background:#7dd3fc; }

#formMessage{
margin-top:14px;
font-size:15px;
font-weight:500;
}


/* ================= 25. GITHUB REPOS ================= */

#repos{
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:center;
margin-top:30px;
}

.repo{
background:#1e293b;
padding:20px;
width:260px;
border-radius:12px;
display:flex;
flex-direction:column;
gap:10px;
transition:0.3s;
border:1px solid rgba(56,189,248,0.1);
}

.repo:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(56,189,248,0.2);
border-color:rgba(56,189,248,0.4);
}

.repo h3{ color:#38bdf8; font-size:15px; word-break:break-word; }
.repo p{ font-size:13px; color:#94a3b8; flex:1; }

.repo-meta{ display:flex; gap:14px; font-size:13px; color:#64748b; }
.repo-meta i{ margin-right:4px; color:#38bdf8; }

.repo-link{
display:inline-block;
background:linear-gradient(135deg, #38bdf8, #6c63ff);
color:#0f172a;
padding:7px 14px;
border-radius:50px;
text-decoration:none;
font-size:13px;
font-weight:600;
transition:0.3s;
text-align:center;
}

.repo-link:hover{
transform:translateY(-2px);
box-shadow:0 6px 15px rgba(56,189,248,0.4);
}


/* ================= 26. CONTACT SECTION ================= */

/* Direct contact info row above the form */
.contact-info{
display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;
margin:20px 0 30px;
}

.contact-info-item{
display:flex;
align-items:center;
gap:10px;
background:#1e293b;
padding:12px 20px;
border-radius:50px;
text-decoration:none;
color:#e2e8f0;
font-size:14px;
font-weight:500;
border:1px solid rgba(56,189,248,0.2);
transition:0.3s;
}

.contact-info-item i{ color:#38bdf8; font-size:16px; }

.contact-info-item:hover{
border-color:#38bdf8;
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(56,189,248,0.2);
color:#38bdf8;
}

/* Contact form layout */
form{
display:flex;
flex-direction:column;
gap:14px;
width:min(500px,90%);
margin:0 auto;
}

input, textarea{
padding:13px 16px;
border-radius:10px;
border:1px solid rgba(56,189,248,0.2);
background:#1e293b;
color:white;
font-size:15px;
outline:none;
transition:border 0.3s, box-shadow 0.3s;
font-family:'Plus Jakarta Sans', sans-serif;
}

input:focus, textarea:focus{
border-color:#38bdf8;
box-shadow:0 0 0 3px rgba(56,189,248,0.15);
}

textarea{
min-height:130px;
resize:vertical;
font-family:'Plus Jakarta Sans', sans-serif;
}


/* ================= 27. FOOTER ================= */

footer{
text-align:center;
padding:30px 20px;
background:#020617;
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
border-top:1px solid rgba(56,189,248,0.1);
}

footer p{ font-size:14px; color:#64748b; }
footer strong{ color:#e2e8f0; }

.footer-links{
display:flex;
gap:20px;
}

.footer-links a{
text-decoration:none;
color:#94a3b8;
font-size:14px;
display:flex;
align-items:center;
gap:6px;
transition:0.3s;
}

.footer-links a:hover{
color:#38bdf8;
transform:translateY(-2px);
}

.heart{ animation:heartbeat 1.5s ease-in-out infinite; display:inline-block; }

@keyframes heartbeat{
0%,100%{ transform:scale(1); }
50%     { transform:scale(1.3); }
}


/* ================= 28. SCROLL REVEAL ================= */

.reveal{
opacity:0;
transform:translateY(60px);
transition:opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}


/* ================= 29. SECTION HEADINGS ================= */

section h2{
display:inline-block;
position:relative;
font-size:2rem;
font-weight:800;
letter-spacing:1px;
background:linear-gradient(90deg, #ffffff 0%, #38bdf8 40%, #818cf8 60%, #ffffff 100%);
background-size:200% auto;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
animation:headingShimmer 4s linear infinite;
transition:letter-spacing 0.3s ease;
}

@keyframes headingShimmer{
0%  { background-position:200% center; }
100%{ background-position:-200% center; }
}

section h2:hover{ letter-spacing:3px; }

/* Animated underline bar below heading */
section h2::after{
content:"";
position:absolute;
bottom:-10px;
left:50%;
transform:translateX(-50%);
width:60px;
height:3px;
border-radius:3px;
background:linear-gradient(90deg, #38bdf8, #6c63ff, #38bdf8);
background-size:200% auto;
animation:barShimmer 2s linear infinite, barPulse 3s ease-in-out infinite;
transition:width 0.4s ease;
}

section h2:hover::after{ width:100%; }

@keyframes barShimmer{
0%  { background-position:200% center; }
100%{ background-position:-200% center; }
}

@keyframes barPulse{
0%,100%{ opacity:1; box-shadow:0 0 8px rgba(56,189,248,0.6); }
50%    { opacity:0.7; box-shadow:0 0 20px rgba(56,189,248,1); }
}

section h2 + *{ margin-top:50px; }


/* ================= 30. CONTACT BUTTON ================= */
/* Animated gradient, shine sweep, pulsing glow */

.contact-btn{
display:inline-block;
position:relative;
overflow:hidden;
background:linear-gradient(135deg, #0ea5e9 0%, #38bdf8 50%, #0ea5e9 100%);
background-size:200% auto;
color:#0f172a;
font-weight:500; /* matched to nav link weight — was 700 which looked too bold */
font-size:15px;
letter-spacing:0.3px;
padding:14px 40px;
border-radius:50px;
border:none;
cursor:pointer;
text-decoration:none;
box-shadow:0 0 0 2px rgba(56,189,248,0.3), 0 8px 25px rgba(56,189,248,0.35);
transition:all 0.4s ease;
animation:contactPulse 3s ease-in-out infinite;
font-family:'Plus Jakarta Sans', sans-serif;
}

/* Diagonal shine sweep */
.contact-btn::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:60%;
height:100%;
background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
animation:shineSweep 3s ease-in-out infinite;
}

@keyframes shineSweep{
0%  { left:-100%; }
40% { left:150%; }
100%{ left:150%; }
}

.contact-btn:hover{
background-position:right center;
transform:translateY(-4px) scale(1.04);
box-shadow:0 0 0 3px rgba(56,189,248,0.5), 0 14px 35px rgba(56,189,248,0.55);
letter-spacing:1px;
animation:none;
}

.contact-btn:active{
transform:translateY(-1px) scale(1.01);
box-shadow:0 4px 15px rgba(56,189,248,0.4);
}

@keyframes contactPulse{
0%,100%{ box-shadow:0 0 0 2px rgba(56,189,248,0.3), 0 8px 25px rgba(56,189,248,0.35); }
50%    { box-shadow:0 0 0 5px rgba(56,189,248,0.15), 0 8px 35px rgba(56,189,248,0.55), 0 0 50px rgba(56,189,248,0.2); }
}


/* ================= 31. RESPONSIVE BREAKPOINTS ================= */

/* Hamburger button — hidden on desktop */
.hamburger{
display:none;
flex-direction:column;
gap:5px;
cursor:pointer;
padding:6px;
background:transparent;
border:none;
z-index:1100;
}

.hamburger span{
display:block;
width:26px;
height:3px;
background:#38bdf8;
border-radius:3px;
transition:0.3s;
}

/* Bars animate to X on open */
.hamburger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }


/* ===== 1024px — small laptops ===== */
@media(max-width:1024px){
  .navbar           { padding:8px 40px; }
  .navbar.scrolled  { padding:4px 40px; }
  .nav-links        { gap:22px; }
  .nav-links a      { font-size:14px; }
  section           { padding:80px 40px; }
  .skills-grid      { padding:0; }
  .project-card     { width:320px; }
  .project-container{ gap:24px; }
  .about-container  { gap:24px; }
  .profile-circle   { width:260px; height:260px; }
  .profile-circle::after{ width:220px; height:220px; }
  .profile-circle img   { width:210px; height:210px; }
  .hero-stats       { padding:14px 20px; }
  .stat             { padding:0 16px; }
}


/* ===== 768px — tablets ===== */
@media(max-width:768px){

  /* Navbar */
  .navbar{ padding:10px 20px; position:fixed; }
  .navbar.scrolled{ padding:6px 20px; }
  .hamburger{ display:flex; }

  /* Dark overlay backdrop — appears behind the slide-in nav */
  .nav-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.6);
    z-index:998;
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    animation:fadeOverlay 0.3s ease;
  }

  .nav-overlay.open{ display:block; }

  @keyframes fadeOverlay{
    from{ opacity:0; }
    to  { opacity:1; }
  }

  /* Nav slides in from right side */
  .nav-links{
    display:flex !important; /* always rendered — slide controls visibility */
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:75%;
    max-width:300px;
    background:#0a1628;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:80px 0 30px;
    border-left:1px solid rgba(56,189,248,0.2);
    z-index:999;
    /* Slide out to the right (hidden) by default */
    transform:translateX(100%);
    transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
    overflow-y:auto;
  }

  /* Slides in when open */
  .nav-links.open{ transform:translateX(0); }

  .nav-links li  { width:100%; }
  .nav-links a   { display:block; padding:16px 28px; font-size:16px; color:rgba(255,255,255,0.8); border-bottom:1px solid rgba(255,255,255,0.05); transition:0.2s; }
  .nav-links a:hover{ color:#38bdf8; padding-left:36px; }
  .nav-links a.active{ color:#38bdf8; border-left:3px solid #38bdf8; }
  .nav-links a::after{ display:none; }
  .nav-btn{ color:rgba(255,255,255,0.8) !important; }

  /* Light mode slide-in nav */
  body.light-mode .nav-links{ background:#f8fafc; border-left-color:#e2e8f0; }
  body.light-mode .nav-links a{ color:#0f172a; border-bottom-color:#e2e8f0; }
  body.light-mode .nav-links a:hover{ color:#0369a1; }
  body.light-mode .nav-overlay{ background:rgba(0,0,0,0.4); }

  /* Hero */
  .hero       { padding:120px 20px 60px; gap:12px; }
  .hero h1    { font-size:clamp(22px,6vw,36px); }
  .hero h2.typing{ font-size:clamp(16px,4vw,22px); }
  .hero p     { font-size:14px; max-width:500px; }
  .profile-circle { width:210px; height:210px; }
  .profile-circle::after{ width:178px; height:178px; }
  .profile-circle img   { width:170px; height:170px; }
  .hero-glow  { width:400px; height:400px; }
  .hero-buttons{ flex-wrap:wrap; justify-content:center; }
  .hero-stats { flex-wrap:wrap; gap:16px; padding:14px 20px; border-radius:12px; }
  .stat-divider{ display:none; }

  /* Sections */
  section{ padding:70px 24px; }

  /* About */
  .about-container  { grid-template-columns:1fr; }
  .about-text       { text-align:center; }
  .about-highlights { grid-template-columns:1fr 1fr; }

  /* Skills */
  .skills-grid{ padding:0; grid-template-columns:1fr 1fr; }

  /* Timeline */
  .timeline-container::before{ left:20px; }
  .timeline-item  { justify-content:flex-start; padding-left:50px; }
  .timeline-icon  { left:20px; transform:translateX(-50%); }
  .timeline-content{ width:100%; }

  /* Projects */
  .project-container{ gap:24px; }
  .project-card   { width:min(380px,100%); }

  /* Repos */
  .repo{ width:min(340px,100%); }

  /* Modal */
  .modal-content  { padding:20px 16px; width:95%; }
  .slide-btn.left { left:-8px; }
  .slide-btn.right{ right:-8px; }

  /* Contact */
  form{ width:100%; }
  .contact-info{ flex-direction:column; align-items:center; }

  /* Headings */
  section h2     { font-size:1.7rem; }
  section h2::after{ width:40px; }

  /* Back to top */
  #backToTop{ bottom:20px; right:20px; width:40px; height:40px; font-size:16px; }
}


/* ===== 480px — large phones ===== */
@media(max-width:480px){

  .hero       { padding:100px 16px 50px; }
  .hero h1    { font-size:clamp(20px,7vw,28px); }
  .hero h2.typing{ font-size:clamp(14px,4.5vw,18px); }
  .hero p     { font-size:13px; }
  .profile-circle { width:170px; height:170px; }
  .profile-circle::after{ width:142px; height:142px; }
  .profile-circle img   { width:136px; height:136px; }
  .hero-buttons{ flex-direction:column; align-items:center; gap:10px; }
  .btn-primary,.btn-outline{ width:220px; justify-content:center; }
  .hero-stats { padding:12px 16px; gap:12px; }
  .stat-number{ font-size:1.6rem; }

  section h2 { font-size:clamp(20px,6vw,26px); }
  section h2::after{ width:35px; bottom:-8px; }
  section h2 + *{ margin-top:35px; }

  .about-highlights{ grid-template-columns:1fr; }
  .skills-grid     { grid-template-columns:1fr; }
  .project-card    { width:100%; }
  .project-container{ padding:20px 0 0; gap:20px; }
  #repos           { flex-direction:column; align-items:center; }
  .repo            { width:100%; max-width:400px; }

  /* Modal */
  .modal-tabs     { gap:6px; }
  .modal-tab      { padding:7px 14px; font-size:13px; }
  #modalVideo     { max-height:220px; }
  .modal-links    { flex-direction:column; align-items:center; }
  .modal-links a  { width:180px; justify-content:center; }

  /* Contact */
  section#contact { padding:60px 16px; }
  .contact-btn    { padding:12px 24px; font-size:14px; width:100%; max-width:280px; }
  .contact-info-item{ font-size:13px; padding:10px 14px; }

  footer{ padding:20px 16px; }
  .social-icons a { width:40px; height:40px; font-size:17px; }
}


/* ===== 360px — small phones ===== */
@media(max-width:360px){
  .hero h1   { font-size:18px; }
  .profile-circle { width:148px; height:148px; }
  .profile-circle::after{ width:124px; height:124px; }
  .profile-circle img   { width:118px; height:118px; }
  .btn-primary,.btn-outline{ width:180px; padding:10px 16px; font-size:14px; }
  .nav-links a { font-size:15px; padding:12px 0; }
  .highlight-card { padding:14px; }
  .skill-card   { padding:18px; }
  .timeline-content{ padding:14px; }
  .project-card { padding:0; }
  .hero-stats   { padding:10px 12px; }
}


/* =============================================================
   NEW FEATURES — Added in v4
   1.  Preloader
   2.  WhatsApp floating button
   3.  Project filter buttons
   4.  Certifications section
   5.  Copy email + toast
   6.  Mobile responsive fixes
   ============================================================= */


/* ================= PRELOADER ================= */
/* Full-screen overlay that fades out after page loads.
   JS adds .hidden class which triggers the CSS transition. */

#preloader{
  position:fixed;
  inset:0;
  background:#0f172a;
  z-index:99999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  transition:opacity 0.6s ease, visibility 0.6s ease;
}

#preloader.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.preloader-inner{
  position:relative;
  width:88px;
  height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Spinning gradient ring around logo */
.preloader-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(#38bdf8, #6c63ff, #f59e0b, #38bdf8);
  animation:spin 1.2s linear infinite;
}

/* Logo image centered inside ring */
.preloader-logo{
  width:68px;
  height:68px;
  border-radius:50%;
  object-fit:cover;
  position:relative;
  z-index:2;
  border:3px solid #0f172a; /* gap between ring and logo */
}

/* "Loading..." pulsing text */
.preloader-text{
  color:#64748b;
  font-size:13px;
  letter-spacing:3px;
  font-family:'Plus Jakarta Sans',sans-serif;
  animation:preloaderPulse 1.4s ease-in-out infinite;
}

@keyframes preloaderPulse{
  0%,100%{ opacity:1; }
  50%    { opacity:0.3; }
}


/* ================= WHATSAPP FLOATING BUTTON ================= */
/* Green circle bottom-right — appears after scrolling 300px.
   JS toggles .show class. Sits above back-to-top button. */

#whatsappBtn{
  position:fixed;
  bottom:84px;
  right:28px;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#25d366;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  text-decoration:none;
  z-index:1500;
  box-shadow:0 4px 16px rgba(37,211,102,0.5);
  /* Hidden by default — JS adds .show on scroll */
  opacity:0;
  transform:translateY(20px);
  pointer-events:none;
  transition:opacity 0.3s, transform 0.3s;
}

#whatsappBtn.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:all;
}

#whatsappBtn:hover{
  transform:translateY(-4px) scale(1.1);
  box-shadow:0 8px 24px rgba(37,211,102,0.7);
}

/* Light mode adjustment */
body.light-mode #whatsappBtn{
  box-shadow:0 4px 16px rgba(37,211,102,0.4);
}


/* ================= PROJECT FILTER BUTTONS ================= */
/* Row of buttons above project cards — filter by tech stack.
   .active gets gradient fill; inactive are outline style. */

.project-filters{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin:28px 0 10px;
}

.filter-btn{
  padding:8px 22px;
  border-radius:50px;
  border:1.5px solid rgba(56,189,248,0.3);
  background:transparent;
  color:#94a3b8;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
  font-family:'Plus Jakarta Sans',sans-serif;
}

.filter-btn:hover{
  border-color:#38bdf8;
  color:#38bdf8;
}

/* Active filter — gradient filled pill */
.filter-btn.active{
  background:linear-gradient(135deg,#38bdf8,#6c63ff);
  border-color:transparent;
  color:#0f172a;
}

/* Hidden cards during filter — JS adds/removes this */
.project-card.hidden{
  display:none;
}

/* Fade-in animation when filter shows cards */
@keyframes filterFadeIn{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:translateY(0); }
}

/* Light mode */
body.light-mode .filter-btn{ color:#475569; border-color:#cbd5e1; }
body.light-mode .filter-btn:hover{ color:#0369a1; border-color:#0369a1; }
body.light-mode .filter-btn.active{ color:#0f172a; border-color:transparent; }


/* ================= CERTIFICATIONS SECTION ================= */
/* Grid of certification cards — hover lifts card with border glow */

.certifications{
  text-align:center;
}

.cert-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:24px;
  margin-top:40px;
  padding:0 20px;
}

.cert-card{
  background:#1e293b;
  padding:28px 20px;
  border-radius:16px;
  text-align:center;
  border:1px solid transparent;
  transition:0.35s;
}

.cert-card:hover{
  transform:translateY(-8px);
  border-color:rgba(56,189,248,0.4);
  box-shadow:0 12px 30px rgba(56,189,248,0.2);
}

/* Icon circle at top of each card */
.cert-icon{
  width:54px;
  height:54px;
  border-radius:50%;
  background:rgba(56,189,248,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#38bdf8;
  font-size:22px;
  margin:0 auto 14px;
  border:1px solid rgba(56,189,248,0.2);
}

.cert-card h3{
  font-size:14px;
  font-weight:700;
  margin-bottom:6px;
  line-height:1.4;
}

.cert-card p{
  font-size:12px;
  color:#94a3b8;
  margin-bottom:10px;
  line-height:1.5;
}

/* Year badge pill */
.cert-year{
  display:inline-block;
  font-size:11px;
  color:#38bdf8;
  font-weight:600;
  background:rgba(56,189,248,0.1);
  padding:3px 12px;
  border-radius:50px;
  border:1px solid rgba(56,189,248,0.2);
}

/* Light mode */
body.light-mode .cert-card{ background:#f8fafc; }
body.light-mode .cert-card h3{ color:#0f172a; }
body.light-mode .cert-card p{ color:#475569; }


/* ================= COPY EMAIL BUTTON ================= */
/* Email info row is clickable — copies address to clipboard.
   Shows a copy icon on the right that highlights on hover. */

.copy-email{
  cursor:pointer;
  user-select:none; /* prevent text selection on click */
}

/* Copy icon on the right side of email row */
.copy-icon{
  margin-left:auto;
  font-size:13px;
  color:#64748b;
  transition:color 0.2s;
}

.copy-email:hover .copy-icon{
  color:#38bdf8;
}

/* Toast notification — appears bottom-center after copy */
#copyToast{
  position:fixed;
  bottom:110px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:linear-gradient(135deg,#38bdf8,#6c63ff);
  color:#0f172a;
  padding:10px 24px;
  border-radius:50px;
  font-size:14px;
  font-weight:700;
  z-index:9000;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease, transform 0.3s ease;
  font-family:'Plus Jakarta Sans',sans-serif;
  white-space:nowrap;
}

/* JS adds .show to display the toast */
#copyToast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}


/* ================= MOBILE RESPONSIVE FIXES ================= */
/* All breakpoints consolidated — nothing overlaps on any screen size */

@media(max-width:768px){

  /* Preloader smaller on mobile */
  .preloader-inner{ width:70px; height:70px; }
  .preloader-logo { width:54px; height:54px; }

  /* WhatsApp + back-to-top closer to edge on mobile */
  #whatsappBtn{ bottom:70px; right:14px; width:42px; height:42px; font-size:19px; }
  #backToTop  { bottom:16px; right:14px; width:40px; height:40px; }

  /* Filter buttons smaller + wrap */
  .project-filters{ gap:8px; margin:20px 0 8px; }
  .filter-btn     { padding:6px 14px; font-size:12px; }

  /* Cert grid — 2 columns on tablet, 1 on phone */
  .cert-grid{ grid-template-columns:1fr 1fr; padding:0; gap:16px; }

  /* Contact info stacks vertically */
  .contact-info      { flex-direction:column; align-items:center; }
  .contact-info-item { width:100%; max-width:340px; justify-content:center; }

  /* Toast stays centered on small screens */
  #copyToast{ font-size:13px; padding:8px 18px; bottom:80px; }

  /* Certifications section padding */
  section#certifications{ padding:70px 20px; }

}

@media(max-width:480px){

  /* Cert grid — single column on phones */
  .cert-grid{ grid-template-columns:1fr; }

  /* Cert card padding */
  .cert-card{ padding:22px 16px; }

  /* Filter buttons even more compact */
  .filter-btn{ padding:5px 12px; font-size:11px; }

  /* Contact info items */
  .contact-info-item{ font-size:13px; padding:10px 14px; }

  /* Preloader text */
  .preloader-text{ font-size:11px; letter-spacing:2px; }

}