:root{--bg-color:#0b1120;--bg-secondary:#0f172a;--text-main:#f8fafc;--text-muted:#94a3b8;--primary:#06b6d4;--primary-glow:rgba(6,182,212,0.4);--secondary:#3b82f6;--card-bg:rgba(30,41,59,0.5);--card-border:rgba(148,163,184,0.1);--glass-shadow:0 8px 32px rgba(0,0,0,0.2);--nav-bg:rgba(15,23,42,0.8);--accent-gradient:linear-gradient(135deg,#06b6d4,#3b82f6);} .light-theme{--bg-color:#f8fafc;--bg-secondary:#f1f5f9;--text-main:#0f172a;--text-muted:#475569;--primary:#0284c7;--primary-glow:rgba(2,132,199,0.4);--secondary:#2563eb;--card-bg:rgba(255,255,255,0.6);--card-border:rgba(71,85,105,0.12);--glass-shadow:0 8px 32px rgba(2,8,23,0.12);--nav-bg:rgba(248,250,252,0.82);--accent-gradient:linear-gradient(135deg,#0284c7,#2563eb);} *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;scroll-padding-top:80px;} body{font-family:'Outfit',sans-serif;background-color:var(--bg-color);color:var(--text-main);line-height:1.6;transition:all 0.4s ease;overflow-x:hidden;} h1,h2,h3,h4{font-weight:700;line-height:1.2;} a{text-decoration:none;color:inherit;} .gradient-text{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .glass{background:var(--card-bg);backdrop-filter:blur(12px);border:1px solid var(--card-border);box-shadow:var(--glass-shadow);border-radius:20px;} .navbar{position:fixed;top:0;width:100%;padding:1rem 2rem;background:var(--nav-bg);backdrop-filter:blur(16px);z-index:1000;border-bottom:1px solid var(--card-border);transition:all 0.3s ease;} .nav-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;} .logo{font-size:1.8rem;font-weight:800;} .logo span{color:var(--primary);} .nav-links{display:flex;align-items:center;gap:2rem;} .nav-link{font-size:1rem;font-weight:500;color:var(--text-muted);transition:0.3s ease;position:relative;} .nav-link:hover,.nav-link.active{color:var(--text-main);} .nav-link::after{content:'';position:absolute;width:0;height:2px;bottom:-4px;left:0;background:var(--accent-gradient);transition:0.3s;} .nav-link:hover::after,.nav-link.active::after{width:100%;} .btn-contact{padding:0.6rem 1.4rem;border-radius:50px;background:var(--accent-gradient);color:white!important;font-weight:600;transition:0.3s;} .btn-contact:hover{transform:translateY(-2px);box-shadow:0 4px 15px var(--primary-glow);} .menu-toggle{display:none;background:none;border:none;color:var(--text-main);font-size:1.8rem;cursor:pointer;} #theme-toggle{background:none;border:none;color:var(--text-main);font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;} .theme-icon-light{display:none;} .light-theme .theme-icon-light{display:block;} .light-theme .theme-icon-dark{display:none;} .btn{display:inline-block;padding:0.8rem 2rem;border-radius:50px;font-weight:600;cursor:pointer;transition:0.3s;} .btn-primary{background:var(--accent-gradient);color:white;border:none;box-shadow:0 4px 15px var(--primary-glow);} .btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 25px var(--primary-glow);} .btn-secondary{background:transparent;color:var(--text-main);border:1px solid var(--text-muted);} .btn-secondary:hover{border-color:var(--text-main);transform:translateY(-3px);} .section{padding:6rem 2rem;max-width:1200px;margin:0 auto;} .section-header{margin-bottom:4rem;text-align:center;} .section-header h2{font-size:2.5rem;} .line{width:80px;height:4px;background:var(--accent-gradient);margin:1rem auto;border-radius:2px;} .hero-section{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;max-width:1200px;margin:0 auto;padding:8rem 2rem 4rem;gap:4rem;} .hero-content{opacity:0;animation:slideUp 1s ease 0.2s forwards;} .greeting{font-size:1.2rem;color:var(--primary);margin-bottom:0.5rem;} .name{font-size:4.5rem;margin-bottom:1rem;} .role{font-size:1.5rem;color:var(--text-muted);margin-bottom:1.5rem;} .summary{font-size:1.1rem;color:var(--text-muted);margin-bottom:2.5rem;} .hero-actions{display:flex;gap:1rem;} .hero-image-wrapper{position:relative;display:flex;justify-content:center;align-items:center;opacity:0;animation:slideLeft 1s ease 0.4s forwards;} .glow-effect{position:absolute;width:300px;height:300px;background:var(--accent-gradient);border-radius:50%;filter:blur(80px);opacity:0.5;z-index:-1;animation:pulse 4s infinite alternate;} .profile-img{width:100%;max-width:220px;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:30px;border:2px solid var(--card-border);z-index:1;box-shadow:0 20px 50px rgba(0,0,0,0.3);transition:0.5s;} .profile-img:hover{transform:translateY(-10px) rotate(-2deg);} .about-card{padding:3rem;font-size:1.1rem;color:var(--text-muted);text-align:center;max-width:800px;margin:0 auto;} .timeline{max-width:800px;margin:0 auto;position:relative;} .timeline::before{content:'';position:absolute;width:2px;height:100%;background:var(--card-border);left:20px;top:0;} .timeline-item{position:relative;padding:2rem;margin-bottom:2rem;margin-left:50px;transition:0.3s;} .timeline-item:hover{transform:translateX(10px);border-color:var(--primary);} .timeline-dot{position:absolute;width:16px;height:16px;background:var(--primary);border-radius:50%;left:-37px;top:2rem;} .skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;} .skill-card{padding:2rem;text-align:center;transition:0.3s;} .skill-card:hover{transform:translateY(-10px);border-color:var(--primary);} .skill-icon{font-size:3rem;color:var(--primary);margin-bottom:1rem;} .skill-badge{width:80px;height:80px;object-fit:contain;margin-bottom:1rem;display:inline-block;} .projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;} .project-card{transition:0.4s;overflow:hidden;} .project-card:hover{transform:translateY(-10px);border-color:var(--primary);} .project-content{padding:2.5rem;} .project-icon{font-size:2.5rem;color:var(--secondary);margin-bottom:1rem;} .project-link{display:flex;align-items:center;gap:0.5rem;color:var(--primary);font-weight:600;} .contact-card{max-width:600px;margin:0 auto;padding:3rem;} .contact-item{display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem;} .icon-box{width:60px;height:60px;border-radius:50%;background:var(--bg-secondary);display:flex;justify-content:center;align-items:center;font-size:1.8rem;color:var(--primary);} footer{padding:3rem 2rem;background:var(--nav-bg);text-align:center;} .social-links{display:flex;justify-content:center;gap:1rem;margin-top:1rem;} .social-links a{width:40px;height:40px;border-radius:50%;background:var(--bg-color);display:flex;align-items:center;justify-content:center;font-size:1.2rem;} @keyframes slideUp{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}} @keyframes slideLeft{from{opacity:0;transform:translateX(50px);}to{opacity:1;transform:translateX(0);}} @keyframes pulse{0%{transform:scale(1);opacity:0.4;}100%{transform:scale(1.1);opacity:0.6;}} .fade-in{opacity:0;transform:translateY(30px);transition:0.8s;} .fade-in.visible{opacity:1;transform:translateY(0);} .cert-clickable { cursor: pointer; position: relative; } .view-cert-text { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; color: var(--primary); font-size: 0.9rem; font-weight: 600; opacity: 0; transition: 0.3s; transform: translateY(5px);} .cert-clickable:hover .view-cert-text { opacity: 1; transform: translateY(0); } .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(11, 17, 32, 0.9); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.4s ease; } .modal.show { display: block; opacity: 1; } .modal-content { position: relative; margin: 5% auto; padding: 20px; width: 90%; max-width: 900px; height: 80vh; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); transform: translateY(30px); transition: transform 0.4s ease; } .modal.show .modal-content { transform: translateY(0); } .close-btn { color: var(--text-muted); position: absolute; top: 15px; right: 25px; font-size: 35px; font-weight: bold; cursor: pointer; transition: 0.3s; z-index: 10; } .close-btn:hover { color: var(--primary); text-shadow: 0 0 10px var(--primary-glow); } .cert-layout { display: flex; flex-direction: row; gap: 2rem; width: 100%; height: 100%; } .cert-info { width: 30%; min-width: 250px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .modal-badge { width: 150px; height: 150px; object-fit: contain; margin-bottom: 1.5rem; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2)); } .cert-info h3 { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--primary); } .cert-info p { font-size: 1rem; color: var(--text-muted); } .cert-container { flex-grow: 1; height: 100%; border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;} #certFrame { width: 100%; height: 100%; object-fit: contain; } @media(max-width:768px){   .nav-links{position:fixed;top:70px;left:-100%;flex-direction:column;width:100%;height:100vh;background:var(--nav-bg);transition:0.4s;}   .nav-links.active{left:0;}   .menu-toggle{display:block;}   .hero-section{grid-template-columns:1fr;text-align:center;padding-top:6rem;padding-left:1.5rem;padding-right:1.5rem;}   .hero-content{order:2;}   .hero-image-wrapper{order:1;}   .timeline::before{left:10px;}   .timeline-item{margin-left:30px;padding:1.5rem;}   .timeline-dot{left:-47px;}   .section{padding:4rem 1.5rem;}   .cert-layout { flex-direction: column; overflow-y: auto; padding-right: 10px; }   .cert-info { width: 100%; padding: 1rem 0; min-height: max-content; }   .modal-badge { width: 100px; height: 100px; }   .cert-container { min-height: 400px; flex-shrink: 0; }   .about-card{padding:2rem 1.5rem;}   .contact-card{padding:2rem 1.5rem;} } @media(max-width:480px){   .section{padding:3rem 1rem;}   .hero-section{padding-left:1rem;padding-right:1rem;}   .name{font-size:2.5rem;}   .role{font-size:1.2rem;}   .section-header h2{font-size:2rem;}   .hero-actions{flex-direction:column;gap:1rem;}   .hero-actions .btn{width:100%;text-align:center;}   .profile-img{max-width:250px;}   .contact-item{flex-direction:column;text-align:center;gap:1rem;}   .skills-grid{grid-template-columns:1fr;}   .projects-grid{grid-template-columns:1fr;} }