@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap";*{box-sizing:border-box;margin:0;padding:0;font-family:Outfit,system-ui,-apple-system,sans-serif;cursor:none!important}html{scroll-behavior:smooth}h1,h2,h3,h4,h5,h6{letter-spacing:-.03em}body{background-image:linear-gradient(#ff000012 1px,#0000 1px),linear-gradient(90deg,#ff000012 1px,#0000 1px),linear-gradient(135deg,#0a0000 0%,#4a0000 50%,#000 100%);background-size:40px 40px,40px 40px,100% 100%;background-attachment:fixed;min-height:100vh}.loading-screen{z-index:9999;background-image:linear-gradient(#ff000012 1px,#0000 1px),linear-gradient(90deg,#ff000012 1px,#0000 1px),linear-gradient(135deg,#0a0000 0%,#4a0000 50%,#000 100%);background-size:40px 40px,40px 40px,100% 100%;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .5s,visibility .5s;display:flex;position:fixed;top:0;left:0}.loading-screen.hidden{opacity:0;visibility:hidden}.loader{border:4px solid #f003;border-top-color:red;border-radius:50%;width:60px;height:60px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{color:red;letter-spacing:2px;margin-top:20px;font-size:18px;animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.main nav{-webkit-backdrop-filter:blur(12px);z-index:1000;background:linear-gradient(135deg,#0a0000b3 0%,#4a0000b3 50%,#000000b3 100%);border-bottom:1px solid #f003;justify-content:space-between;align-items:center;width:100%;height:80px;display:flex;position:sticky;top:0;box-shadow:0 4px 30px #00000080}.main nav .logo img{opacity:.8;width:80px}.main nav .logo img:hover{opacity:1}.main nav .nav-links{gap:30px;display:flex}.main nav .nav-links a{color:#a00000;font-size:20px;font-weight:500;text-decoration:none;transition:color .3s}.main nav .nav-links a:hover{color:red}.main nav .hamburger img{width:80px}.main .hero{background:linear-gradient(135deg,#8e0000 20%,red 60%,#8e0000 100%);justify-content:center;align-items:center;height:100vh;display:flex}.main .hero img{z-index:1;height:100%}.main .hero #front_name{color:#0000;-webkit-text-stroke:2px #a00000;z-index:2;opacity:0;font-size:200px;transition:all 1s ease-out;position:absolute;top:80%;left:50%;transform:translate(-50%,-50%)translateY(100px)}.main .hero #front_name.animate{opacity:1;transform:translate(-50%,-50%)translateY(0)}.main .hero #back_name{color:#a00000;opacity:0;font-size:200px;transition:all 1s ease-out;position:absolute;top:80%;left:50%;transform:translate(-50%,-50%)translateY(100px)}.main .hero #back_name.animate{opacity:1;transform:translate(-50%,-50%)translateY(0)}.main .hero #front-role{color:#0000;-webkit-text-stroke:2px #a00000;z-index:2;opacity:0;font-size:100px;transition:all 1s ease-out;position:absolute;top:100%;left:50%;transform:translate(-50%,-50%)translateY(100px)}.main .hero #front-role.animate{opacity:1;transform:translate(-50%,-50%)translateY(0)}.main .hero #back-role{color:#a00000;opacity:0;font-size:100px;transition:all 1s ease-out;position:absolute;top:100%;left:50%;transform:translate(-50%,-50%)translateY(100px)}.main .hero #back-role.animate{opacity:1;transform:translate(-50%,-50%)translateY(0)}.main .about{color:#fff;background:0 0;flex-direction:column;justify-content:center;align-items:center;gap:50px;min-height:100vh;padding:80px 20px;display:flex}.main .about h1{text-align:center;background:linear-gradient(90deg,red,#f44);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:10px;font-size:60px;font-weight:700}.main .about p{text-align:center;color:#e0e0e0;max-width:800px;font-size:22px;font-weight:300;line-height:1.8}.main .about .about-container{flex-direction:column;align-items:center;gap:30px;width:100%;max-width:1000px;display:flex}.main .about .about-header-card{-webkit-backdrop-filter:blur(10px);text-align:center;background:linear-gradient(145deg,#ff000014,#8e00000d);border:1px solid #ff000026;border-radius:20px;width:100%;padding:40px;box-shadow:0 10px 30px #00000080,inset 0 0 10px #ff00000d}.main .about .about-header-card h2{color:#f33;text-shadow:0 2px 10px #f006;margin-bottom:15px;font-size:36px}.main .about .about-header-card p{color:#e0e0e0;margin:0;font-size:18px;line-height:1.6}.main .about .info-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;width:100%;display:grid}.main .about .info-grid .info-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(145deg,#14000099,#000c);border:1px solid #ff000026;border-radius:15px;align-items:center;gap:15px;padding:20px;transition:transform .3s,box-shadow .3s;display:flex;box-shadow:0 5px 15px #0006}.main .about .info-grid .info-card:hover{border-color:#f006;transform:translateY(-5px);box-shadow:0 10px 25px #ff00004d}.main .about .info-grid .info-card .info-icon{color:#f33;background:#ff00001a;border:1px solid #f003;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:50px;height:50px;display:flex;box-shadow:inset 0 0 8px #f003}.main .about .info-grid .info-card .info-content{text-align:left;flex-direction:column;display:flex}.main .about .info-grid .info-card .info-content .info-label{color:#f99;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;font-size:13px;font-weight:600}.main .about .info-grid .info-card .info-content .info-value{color:#fff;font-size:16px;font-weight:500}.main .about .info-grid .info-card .info-content .info-value.status-available{color:#4ade80;text-shadow:0 0 8px #4ade8080}.main .skills{color:#fff;background:0 0;flex-direction:column;justify-content:center;align-items:center;gap:50px;min-height:100vh;padding:80px 20px;display:flex}.main .skills h1{text-align:center;background:linear-gradient(90deg,red,#f44);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:10px;font-size:60px;font-weight:700}.main .skills .skills-container{grid-template-columns:repeat(2,1fr);gap:40px;width:90%;max-width:1200px;display:grid}.main .skills .skills-container .skill-category{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(145deg,#ff000014,#8e00000d);border:none;border-radius:25px;outline:none;padding:35px 30px;transition:transform .3s,box-shadow .3s;box-shadow:0 20px 40px -12px #00000080}.main .skills .skills-container .skill-category:hover{transform:translateY(-5px);box-shadow:0 25px 50px -12px #ff00004d}.main .skills .skills-container .skill-category h2{color:#f44;text-align:center;border-bottom:2px solid #ff00004d;margin-bottom:25px;padding-bottom:15px;font-size:32px;font-weight:600}.main .skills .skills-container .skill-category .skill-items{flex-direction:column;gap:20px;display:flex}.main .skills .skills-container .skill-category .skill-items .skill-item{flex-direction:column;gap:8px;display:flex}.main .skills .skills-container .skill-category .skill-items .skill-item span{color:#e0e0e0;font-size:18px;font-weight:500}.main .skills .skills-container .skill-category .skill-items .skill-item .skill-bar{background:#0009;border:1px solid #ff000026;border-radius:10px;width:100%;height:8px;position:relative;overflow:hidden;box-shadow:inset 0 2px 6px #000c}.main .skills .skills-container .skill-category .skill-items .skill-item .skill-bar .skill-progress{background:linear-gradient(90deg,#590000,#ff1a1a);border-radius:10px;width:0;height:100%;transition:width 1.5s cubic-bezier(.22,1,.36,1);position:relative;box-shadow:0 0 12px #ff1a1a99}.main .skills .skills-container .skill-category .skill-items .skill-item .skill-bar .skill-progress:after{content:"";background:linear-gradient(90deg,#0000,#fff6,#0000);animation:2s linear infinite shimmer;position:absolute;inset:0}.main .certificates{color:#fff;background:0 0;flex-direction:column;justify-content:center;align-items:center;gap:50px;min-height:100vh;padding:80px 0;display:flex}.main .certificates h1{text-align:center;background:linear-gradient(90deg,red,#f44);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:10px;font-size:60px;font-weight:700}.main .certificates .certificates-container{cursor:grab;scrollbar-width:none;gap:30px;width:100%;max-width:100%;padding:40px 10vw 100px;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000);mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000)}.main .certificates .certificates-container::-webkit-scrollbar{display:none}.main .certificates .certificates-container:active{cursor:grabbing}.main .certificates .certificates-container:has(.certificate-card:hover) .certificate-card:not(:hover){opacity:.3;transform:scale(.95)}.main .certificates .certificates-container .certificate-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-user-select:none;user-select:none;background:linear-gradient(145deg,#ff000014,#8e00000d);border:none;border-radius:25px;outline:none;flex-direction:column;flex:0 0 400px;height:480px;padding:40px 35px;transition:transform .3s,box-shadow .3s;display:flex;box-shadow:0 20px 40px -12px #00000080}.main .certificates .certificates-container .certificate-card:hover{transform:translateY(-10px);box-shadow:0 30px 60px -12px #ff00004d}.main .certificates .certificates-container .certificate-card .certificate-icon{text-align:center;margin-bottom:10px;font-size:48px}.main .certificates .certificates-container .certificate-card h2{color:#f44;text-align:center;margin-bottom:5px;font-size:26px;font-weight:600}.main .certificates .certificates-container .certificate-card h3{color:#fff;text-align:center;margin-bottom:10px;font-size:20px;font-weight:500}.main .certificates .certificates-container .certificate-card p{color:#d0d0d0;text-align:center;flex-grow:1;font-size:16px;line-height:1.6}.main .certificates .certificates-container .certificate-card .certificate-date{color:red;text-align:center;border-top:1px solid #f003;margin-top:10px;padding-top:15px;font-size:14px;font-weight:600}.main .certificates .certificates-container .certificate-card .verify-btn{-webkit-backdrop-filter:blur(10px);color:#fff;letter-spacing:.5px;text-align:center;background:linear-gradient(145deg,#ff000026,#6400000d);border:none;border-radius:12px;outline:none;margin-top:20px;padding:12px 25px;font-size:16px;font-weight:600;text-decoration:none;transition:all .4s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 10px 20px -5px #0000004d}.main .certificates .certificates-container .certificate-card .verify-btn:hover{color:#fff;background:linear-gradient(145deg,#ff000040,#b4000026);border:none;outline:none;transform:translateY(-3px);box-shadow:0 15px 30px -5px #f003}.main .projects{color:#fff;background:0 0;flex-direction:column;justify-content:center;align-items:center;gap:50px;min-height:100vh;padding:80px 20px;display:flex}.main .projects h1{text-align:center;background:linear-gradient(90deg,red,#f44);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:10px;font-size:60px;font-weight:700}.main .projects .projects-container{grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:40px;width:90%;max-width:1200px;display:grid}.main .projects .projects-container .project-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(145deg,#ff000014,#8e00000d);border:none;border-radius:25px;outline:none;transition:transform .3s,box-shadow .3s;overflow:hidden;box-shadow:0 20px 40px -12px #00000080}.main .projects .projects-container .project-card:hover{transform:translateY(-10px);box-shadow:0 30px 60px -12px #ff00004d}.main .projects .projects-container .project-card .project-image{background:linear-gradient(135deg,#f003,#8e00001a);border-bottom:1px solid #f003;width:100%;height:200px;position:relative;overflow:hidden}.main .projects .projects-container .project-card .project-image .image-carousel{width:300%;height:100%;transition:transform .5s ease-in-out;display:flex}.main .projects .projects-container .project-card .project-image .image-carousel .carousel-slide{background:linear-gradient(135deg,#ff00004d,#8e000033);border-right:1px solid #ff00001a;justify-content:center;align-items:center;width:33.333%;height:100%;display:flex;overflow:hidden}.main .projects .projects-container .project-card .project-image .image-carousel .carousel-slide img{object-fit:cover;width:100%;height:100%}.main .projects .projects-container .project-card .project-image video{object-fit:cover;width:100%;height:100%}.main .projects .projects-container .project-card .project-image .video-container{cursor:pointer;width:100%;height:100%;position:relative;overflow:hidden}.main .projects .projects-container .project-card .project-image .video-thumbnail{object-fit:cover;width:100%;height:100%;transition:opacity .3s}.main .projects .projects-container .project-card .project-image .play-button-overlay{opacity:1;background:linear-gradient(135deg,#0006,#0003);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.main .projects .projects-container .project-card .project-image .play-button{color:#fff;background:linear-gradient(135deg,#f44,#c00);border:3px solid #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:70px;height:70px;font-size:20px;display:flex;position:relative;overflow:hidden;box-shadow:0 8px 25px #f446}.main .projects .projects-container .project-card .project-image .play-button i{margin-left:3px}.main .projects .projects-container .project-card .project-image .play-button:hover{background:linear-gradient(135deg,#f66,#e60000);transform:scale(1.1);box-shadow:0 12px 35px #f449}.main .projects .projects-container .project-card .project-image .play-button:active{transform:scale(.95)}.main .projects .projects-container .project-card .project-image .video-container:hover .play-button-overlay{opacity:.9}.main .projects .projects-container .project-card .project-content{flex-direction:column;gap:15px;padding:30px;display:flex}.main .projects .projects-container .project-card .project-content h2{color:#f44;margin-bottom:5px;font-size:28px;font-weight:600}.main .projects .projects-container .project-card .project-content p{color:#d0d0d0;font-size:16px;line-height:1.6}.main .projects .projects-container .project-card .project-content .project-tech{flex-wrap:wrap;gap:10px;display:flex}.main .projects .projects-container .project-card .project-content .project-tech span{color:#fff;background:linear-gradient(135deg,#ff00004d,#8e000033);border:none;border-radius:20px;outline:none;padding:8px 15px;font-size:14px;font-weight:500}.main .projects .projects-container .project-card .project-content .project-links{gap:15px;margin-top:10px;display:flex}.main .projects .projects-container .project-card .project-content .project-links .btn{text-align:center;border-radius:10px;padding:12px 25px;font-size:16px;font-weight:600;text-decoration:none}.main .projects .projects-container .project-card .project-content .project-links .btn:first-child{-webkit-backdrop-filter:blur(10px);color:#fff;letter-spacing:.5px;background:linear-gradient(145deg,#ff000026,#6400000d);border:none;border-radius:12px;outline:none;font-weight:500;transition:all .4s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 10px 20px -5px #0000004d}.main .projects .projects-container .project-card .project-content .project-links .btn:first-child:hover{background:linear-gradient(145deg,#ff000040,#b4000026);transform:translateY(-3px);box-shadow:0 15px 30px -5px #f003}.main .projects .projects-container .project-card .project-content .project-links .btn.github-btn{color:#f33;text-shadow:0 0 8px #f339;-webkit-backdrop-filter:blur(10px);background:#0000004d;border:1.5px solid #f33;font-weight:600;transition:all .3s;box-shadow:0 0 12px #f336,inset 0 0 8px #f333}.main .projects .projects-container .project-card .project-content .project-links .btn.github-btn:hover{color:#fff;text-shadow:0 0 10px #fffc;background:#ff33331a;border:1.5px solid #ff1a1a;transform:translateY(-3px)scale(1.02);box-shadow:0 0 20px #ff1a1acc,inset 0 0 15px #ff1a1a80}.main .resume{color:#fff;background:0 0;flex-direction:column;justify-content:center;align-items:center;gap:50px;min-height:100vh;padding:80px 20px;display:flex}.main .resume h1{text-align:center;background:linear-gradient(90deg,red,#f44);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:10px;font-size:60px;font-weight:700}.main .resume .resume-container{grid-template-columns:repeat(2,1fr);gap:40px;width:90%;max-width:1200px;display:grid}.main .resume .resume-container .resume-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(145deg,#ff000014,#8e00000d);border:none;border-radius:25px;outline:none;padding:40px 35px;transition:transform .3s,box-shadow .3s;box-shadow:0 20px 40px -12px #00000080}.main .resume .resume-container .resume-section:hover{transform:translateY(-5px);box-shadow:0 25px 50px -12px #ff00004d}.main .resume .resume-container .resume-section h2{color:#f44;text-align:center;border-bottom:2px solid #ff00004d;margin-bottom:30px;padding-bottom:15px;font-size:36px;font-weight:600}.main .resume .resume-container .resume-section .resume-item{border-bottom:1px solid #ff000026;padding:25px 0}.main .resume .resume-container .resume-section .resume-item:last-child{border-bottom:none}.main .resume .resume-container .resume-section .resume-item .resume-date{color:red;margin-bottom:10px;font-size:16px;font-weight:600}.main .resume .resume-container .resume-section .resume-item h3{color:#fff;margin-bottom:5px;font-size:24px;font-weight:600}.main .resume .resume-container .resume-section .resume-item h4{color:#f44;margin-bottom:15px;font-size:18px;font-weight:500}.main .resume .resume-container .resume-section .resume-item p{color:#d0d0d0;font-size:16px;line-height:1.6}.main .resume .resume-download{justify-content:center;gap:20px;margin-top:20px;display:flex}.main .resume .resume-download .download-btn{-webkit-backdrop-filter:blur(10px);color:#fff;letter-spacing:.5px;background:linear-gradient(145deg,#ff000026,#6400000d);border:none;border-radius:30px;outline:none;padding:15px 40px;font-size:18px;font-weight:600;text-decoration:none;transition:all .4s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 10px 30px -10px #ff000080}.main .resume .resume-download .download-btn:hover{color:#fff;background:linear-gradient(145deg,#ff000040,#b4000026);border:none;outline:none;transform:translateY(-3px);box-shadow:0 15px 30px -5px #f003}.main .contact{color:#fff;background:0 0;flex-direction:column;justify-content:center;align-items:center;gap:50px;min-height:100vh;padding:80px 20px;display:flex}.main .contact h1{text-align:center;background:linear-gradient(90deg,red,#f44);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:10px;font-size:60px;font-weight:700}.main .contact .contact-container{grid-template-columns:repeat(2,1fr);gap:40px;width:90%;max-width:1200px;display:grid}.main .contact .contact-container .contact-info{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(145deg,#ff000014,#8e00000d);border:none;border-radius:25px;outline:none;flex-direction:column;gap:25px;padding:40px 35px;display:flex;box-shadow:0 20px 40px -12px #00000080}.main .contact .contact-container .contact-info h2{color:#f44;margin-bottom:10px;font-size:36px;font-weight:600}.main .contact .contact-container .contact-info>p{color:#d0d0d0;font-size:18px;line-height:1.6}.main .contact .contact-container .contact-info .contact-item{background:#ff00000d;border:1px solid #ff000026;border-radius:15px;padding:20px}.main .contact .contact-container .contact-info .contact-item:hover{background:#ff00001a;transform:translate(5px)}.main .contact .contact-container .contact-info .contact-item h3{color:red;margin-bottom:8px;font-size:20px;font-weight:600}.main .contact .contact-container .contact-info .contact-item p{color:#e0e0e0;font-size:16px}.main .contact .contact-container .contact-info .contact-item p a{color:#fff;text-decoration:none;transition:color .3s}.main .contact .contact-container .contact-info .contact-item p a:hover{color:red;text-decoration:underline}.main .contact .contact-container .contact-form{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(145deg,#ff000014,#8e00000d);border:none;border-radius:25px;outline:none;padding:40px 35px;box-shadow:0 20px 40px -12px #00000080}.main .contact .contact-container .contact-form form{flex-direction:column;gap:20px;display:flex}.main .contact .contact-container .contact-form form .form-group{flex-direction:column;gap:8px;display:flex}.main .contact .contact-container .contact-form form .form-group label{color:#f44;font-size:16px;font-weight:500}.main .contact .contact-container .contact-form form .form-group input,.main .contact .contact-container .contact-form form .form-group textarea{color:#fff;background:#ffffff0d;border:1px solid #ff00004d;border-radius:10px;padding:15px;font-size:16px}:is(.main .contact .contact-container .contact-form form .form-group input,.main .contact .contact-container .contact-form form .form-group textarea):focus{background:#ff00000d;border-color:red;outline:none;box-shadow:0 0 15px -5px #ff000080}:is(.main .contact .contact-container .contact-form form .form-group input,.main .contact .contact-container .contact-form form .form-group textarea)::placeholder{color:#ffffff4d}.main .contact .contact-container .contact-form form .form-group textarea{resize:vertical;min-height:120px}.main .contact .contact-container .contact-form form .submit-btn{-webkit-backdrop-filter:blur(10px);color:#fff;letter-spacing:.5px;cursor:pointer;background:linear-gradient(145deg,#ff000026,#6400000d);border:none;border-radius:10px;outline:none;padding:15px 30px;font-size:18px;font-weight:600;transition:all .4s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 10px 30px -10px #ff000080}.main .contact .contact-container .contact-form form .submit-btn:hover{color:#fff;background:linear-gradient(145deg,#ff000040,#b4000026);border:none;outline:none;transform:translateY(-3px);box-shadow:0 15px 30px -5px #f003}.footer{background:0 0;border-top:2px solid #ff00004d;padding:50px 30px 30px}.footer .footer-container{text-align:center;max-width:1200px;margin:0 auto}.footer .footer-container .sitename{color:#e0e0e0;margin-bottom:15px;font-size:28px;font-weight:700}.footer .footer-container p{color:#e0e0e0;margin-bottom:25px;font-size:16px;line-height:1.6}.footer .footer-container .social-links{justify-content:center;gap:20px;margin-bottom:30px;display:flex}.footer .footer-container .social-links a{color:#fff;background:linear-gradient(90deg,#f003,#ff00001a);border:1px solid #ff00004d;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:20px;text-decoration:none;display:flex}.footer .footer-container .social-links a i{color:#fff}.footer .footer-container .social-links a:hover{-webkit-backdrop-filter:blur(10px);color:#fff;letter-spacing:.5px;background:linear-gradient(145deg,#ff000026,#6400000d);border:none;border-radius:12px;outline:none;font-weight:500;transition:all .4s cubic-bezier(.175,.885,.32,1.275);transform:translateY(-3px);box-shadow:0 5px 20px #f006}.footer .footer-container .social-links a:hover i{color:#fff}.footer .footer-container .copyright{border-top:1px solid #f003;padding-top:20px;font-size:14px}.footer .footer-container .copyright span{color:#a0a0a0}.footer .footer-container .copyright .sitename{color:#a0a0a0;font-size:14px;font-weight:600}@media screen and (width<=767px){body{width:100%;font-size:14px;overflow-x:hidden}*{box-sizing:border-box;max-width:100%}.main{width:100%;overflow-x:hidden}.main nav{height:70px;padding:0 20px;position:fixed}.main nav .logo img{width:45px}.main nav .hamburger{cursor:pointer;z-index:1001;display:flex}.main nav .hamburger img{width:35px}.main nav .nav-links{z-index:1000;background:linear-gradient(#0a0a0a 0%,#1a0505 100%);border-left:2px solid #ff00004d;flex-direction:column;gap:25px;width:70%;max-width:300px;height:100vh;padding:100px 30px 30px;transition:right .3s;display:none;position:fixed;top:0;right:-100%;box-shadow:-5px 0 20px #00000080}.main nav .nav-links a{text-align:left;border-radius:8px;padding:12px 15px;font-size:20px}.main nav .nav-links a:hover{background:#ff00001a;padding-left:25px}.main nav .nav-links.active{display:flex;right:0}.main .hero{height:100vh;padding-top:70px;position:relative}.main .hero img{object-fit:cover;z-index:1;width:100%;height:auto;max-height:50vh;position:absolute;bottom:0;left:0}.main .hero #front_name,.main .hero #back_name{font-size:60px;top:42%}.main .hero #front-role,.main .hero #back-role{font-size:30px;top:50%}.main .about{padding:80px 20px 60px}.main .about h1{font-size:32px}.main .about p{font-size:15px}.main .about .container{border-radius:20px;width:100%;padding:35px 25px}.main .about .container h1{font-size:28px}.main .about .container p{font-size:15px}.main .skills{padding:60px 20px}.main .skills h1{font-size:32px}.main .skills .skills-container{grid-template-columns:1fr;gap:25px;width:100%}.main .skills .skills-container .skill-category h2{font-size:22px}.main .skills .skills-container .skill-category .skill-item span{font-size:14px}.main .certificates{padding:60px 20px}.main .certificates h1{font-size:32px}.main .certificates .certificates-container{grid-template-columns:1fr;gap:25px;width:100%}.main .certificates .certificates-container .certificate-card{padding:25px}.main .certificates .certificates-container .certificate-card h2{font-size:18px}.main .certificates .certificates-container .certificate-card h3{font-size:14px}.main .certificates .certificates-container .certificate-card .verify-btn{padding:12px 25px;font-size:14px}.main .projects{padding:60px 20px}.main .projects h1{font-size:32px}.main .projects .projects-container{grid-template-columns:1fr;gap:35px;width:100%}.main .projects .projects-container .project-card .project-image{height:180px}.main .projects .projects-container .project-card .project-image .image-carousel{width:100%;height:100%;position:relative}.main .projects .projects-container .project-card .project-image .image-carousel .carousel-slide{opacity:0;z-index:1;width:100%;height:100%;transition:opacity .5s ease-in-out;position:absolute;top:0;left:0}.main .projects .projects-container .project-card .project-image .image-carousel .carousel-slide img{object-fit:cover;width:100%;height:100%}.main .projects .projects-container .project-card .project-image .image-carousel .carousel-slide.active{opacity:1;z-index:2;position:relative}.main .projects .projects-container .project-card .project-content h2{font-size:20px}.main .projects .projects-container .project-card .project-content p{font-size:14px}.main .projects .projects-container .project-card .project-content .project-tech span{padding:6px 14px;font-size:12px}.main .projects .projects-container .project-card .project-content .btn{padding:12px 25px;font-size:14px}.main .resume{padding:60px 20px}.main .resume h1{font-size:32px}.main .resume .resume-container{grid-template-columns:1fr;gap:30px;width:100%}.main .resume .resume-container .resume-section{border-radius:20px;padding:30px 25px}.main .resume .resume-container .resume-section h2{font-size:26px}.main .resume .resume-container .resume-section .resume-item h3{font-size:18px}.main .resume .resume-container .resume-section .resume-item h4,.main .resume .resume-container .resume-section .resume-item p{font-size:14px}.main .resume .resume-download{flex-direction:column;gap:15px}.main .resume .resume-download .download-btn{text-align:center;width:100%;padding:14px 30px}.main .contact{padding:60px 20px}.main .contact h1{font-size:32px}.main .contact .contact-container{grid-template-columns:1fr;gap:30px;width:100%}.main .contact .contact-container .contact-info{border-radius:20px;padding:30px 25px}.main .contact .contact-container .contact-info h2{font-size:26px}.main .contact .contact-container .contact-info>p{font-size:15px}.main .contact .contact-container .contact-info .contact-item{padding:18px}.main .contact .contact-container .contact-info .contact-item h3{font-size:16px}.main .contact .contact-container .contact-info .contact-item p{font-size:14px}.main .contact .contact-container .contact-form{border-radius:20px;padding:30px 25px}.main .contact .contact-container .contact-form .form-group label{font-size:14px}.main .contact .contact-container .contact-form .form-group input,.main .contact .contact-container .contact-form .form-group textarea{padding:14px;font-size:14px}.main .contact .contact-container .contact-form .form-group .submit-btn{padding:14px 30px;font-size:16px}.footer{padding:50px 25px 30px}.footer .footer-container .sitename{font-size:24px}.footer .footer-container p{font-size:14px}.footer .footer-container .social-links{gap:18px}.footer .footer-container .social-links a{width:45px;height:45px;font-size:18px}.footer .footer-container .copyright{font-size:13px}.footer .footer-container .copyright .sitename{font-size:13px}}@media screen and (width<=480px){body{width:100%;overflow-x:hidden}*{box-sizing:border-box;max-width:100%}.main{width:100%;overflow-x:hidden}.main nav{height:60px;padding:0 15px}.main nav .logo img{width:40px}.main nav .hamburger img{width:30px}.main nav .nav-links{width:80%;padding:80px 20px 20px}.main nav .nav-links a{font-size:18px}.main .hero{padding-top:60px;position:relative}.main .hero img{object-fit:cover;z-index:1;width:100%;height:auto;max-height:45vh;position:absolute;bottom:0;left:0}.main .hero #front_name,.main .hero #back_name{font-size:45px;top:37%}.main .hero #front-role,.main .hero #back-role{font-size:22px;top:43%}.main .about{padding:70px 15px 50px}.main .about h1{font-size:28px}.main .about p{font-size:14px}.main .about .container{border-radius:15px;padding:30px 20px}.main .about .container h1{font-size:24px}.main .about .container p{font-size:14px}.main .skills{padding:50px 15px}.main .skills h1{font-size:28px}.main .skills .skills-container{padding:0 5px}.main .skills .skills-container .skill-category h2{font-size:20px}.main .certificates{padding:50px 15px}.main .certificates h1{font-size:28px}.main .certificates .certificates-container{gap:20px;padding:40px 5px 80px}.main .projects{padding:50px 15px}.main .projects h1{font-size:28px}.main .projects .projects-container{gap:30px;padding:0 5px}.main .projects .projects-container .project-card .project-image{height:160px}.main .projects .projects-container .project-card .project-image .image-carousel{width:100%;height:100%;position:relative}.main .projects .projects-container .project-card .project-image .image-carousel .carousel-slide{opacity:0;z-index:1;width:100%;height:100%;transition:opacity .5s ease-in-out;position:absolute;top:0;left:0}.main .projects .projects-container .project-card .project-image .image-carousel .carousel-slide img{object-fit:cover;width:100%;height:100%}.main .projects .projects-container .project-card .project-image .image-carousel .carousel-slide.active{opacity:1;z-index:2;position:relative}.main .resume{padding:50px 15px}.main .resume h1{font-size:28px}.main .resume .resume-container{padding:0 5px}.main .resume .resume-container .resume-section{border-radius:15px;padding:25px 20px}.main .resume .resume-container .resume-section h2{font-size:22px}.main .contact{padding:50px 15px}.main .contact h1{font-size:28px}.main .contact .contact-container{padding:0 5px}.main .contact .contact-container .contact-info,.main .contact .contact-container .contact-form{border-radius:15px;padding:25px 20px}.footer{padding:40px 20px 25px}.footer .footer-container .sitename{font-size:22px}.footer .footer-container p{font-size:13px}.footer .footer-container .social-links{gap:15px}.footer .footer-container .social-links a{width:40px;height:40px;font-size:16px}.footer .footer-container .copyright{font-size:12px}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.certificate-modal-overlay{-webkit-backdrop-filter:blur(15px);z-index:1000;background:#000000b3;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.3s ease-out forwards modalFadeIn;display:flex;position:fixed;top:0;left:0}.certificate-modal-content{background:linear-gradient(145deg,#140000cc,#000000e6);border:1px solid #ff00004d;border-radius:20px;flex-direction:column;align-items:center;width:90%;max-width:800px;padding:40px 30px;animation:.4s cubic-bezier(.175,.885,.32,1.275) forwards modalPopIn;display:flex;position:relative;transform:scale(.9);box-shadow:0 20px 50px #000c,inset 0 0 15px #ff00001a}.close-modal-btn{color:#f33;cursor:pointer;z-index:2;background:#1a0000;border:1px solid #ff000080;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:24px;transition:all .3s;display:flex;position:absolute;top:-15px;right:-15px;box-shadow:0 5px 15px #00000080}.close-modal-btn:hover{color:#fff;background:red;transform:scale(1.1)rotate(90deg);box-shadow:0 0 15px #ff000080}.certificate-modal-image{object-fit:contain;border:1px solid #ff00001a;border-radius:12px;width:100%;max-height:65vh;margin-bottom:20px}.certificate-modal-info{text-align:center;color:#fff;margin-top:10px;font-family:Inter,Segoe UI,Roboto,sans-serif}.certificate-modal-info h2{letter-spacing:.5px;color:#fff;text-shadow:0 2px 10px #f006;margin-bottom:8px;font-size:26px;font-weight:700}.certificate-modal-info p{color:#e0e0e0;letter-spacing:.3px;opacity:.9;font-size:16px;font-weight:400}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalPopIn{0%{opacity:0;transform:scale(.95)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.reveal{opacity:0;transition:all .8s cubic-bezier(.175,.885,.32,1.275);transform:translateY(50px)}.reveal.active{opacity:1;transform:translateY(0)}@media (pointer:fine){.cursor-dot{pointer-events:none;z-index:9999;background-color:#f33;border-radius:50%;width:8px;height:8px;transition:opacity .3s;position:fixed;transform:translate(-50%,-50%);box-shadow:0 0 10px #f33c,0 0 20px #f339}.cursor-outline{pointer-events:none;z-index:9998;border:2px solid #ff333380;border-radius:50%;width:40px;height:40px;transition:width .2s,height .2s,background-color .2s,border-color .2s,opacity .3s;position:fixed;transform:translate(-50%,-50%)}.cursor-outline.hovering{background-color:#ff33331a;border-color:#f33;width:60px;height:60px;box-shadow:0 0 20px #f336,inset 0 0 10px #f333}}@media screen and (width<=1024px){.hero #front_name,.hero #back_name{font-size:120px!important}.hero #front-role,.hero #back-role{font-size:70px!important}}@media screen and (width<=768px){.hero #front_name,.hero #back_name{font-size:80px!important}.hero #front-role,.hero #back-role{font-size:45px!important}}@media screen and (width<=480px){.hero #front_name,.hero #back_name{font-size:10vw!important}.hero #front-role,.hero #back-role{white-space:nowrap;letter-spacing:2px!important;font-size:5.5vw!important}}