:root{--primary-color: #ffffff;--secondary-color: #121212;--text-color: #e0e0e0;--light-text: #9e9e9e;--white: #000000;--dark-bg: #ffffff;--box-shadow: 0 5px 15px rgba(255, 255, 255, .1);--transition: all .3s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,sans-serif;line-height:1.6;color:var(--text-color);background-color:var(--white)}section{padding:80px 0}h1,h2,h3,h4{margin-bottom:20px;line-height:1.2}h2{font-size:36px;text-align:center;position:relative;margin-bottom:60px}h2:after{content:"";position:absolute;width:80px;height:4px;background-color:var(--primary-color);bottom:-15px;left:50%;transform:translate(-50%)}p{margin-bottom:20px;color:var(--light-text)}.btn{display:inline-block;background:var(--primary-color);color:var(--white);padding:12px 25px;border:none;border-radius:5px;cursor:pointer;text-decoration:none;font-size:16px;font-weight:500;transition:var(--transition)}.btn:hover{background:#1e6f4a;transform:translateY(-3px);box-shadow:var(--box-shadow)}.section-title{margin-bottom:40px;color:var(--primary-color)}@media screen and (max-width: 1024px){h2{font-size:32px}.container{padding:0 15px}section{padding:60px 0}}@media screen and (max-width: 768px){h2{font-size:28px}h2:after{width:60px;height:3px}.btn{padding:10px 20px;font-size:14px}section{padding:50px 0}}@media screen and (max-width: 480px){h2{font-size:24px}h2:after{width:50px;height:2px}.btn{padding:8px 16px;font-size:12px}section{padding:40px 0}}.header{position:fixed;top:0;left:0;width:100%;padding:20px 0;z-index:1000;transition:var(--transition);background-color:transparent}.header.scrolled{background-color:var(--white);box-shadow:0 2px 10px #0000001a;padding:15px 0}.navbar{display:flex;justify-content:space-between;align-items:center}.logo a{font-size:28px;font-weight:700;color:var(--primary-color);text-decoration:none}.logo span{color:var(--text-color)}.nav-menu ul{display:flex;list-style:none}.nav-menu ul li{margin-left:30px}.nav-menu ul li a{color:var(--text-color);text-decoration:none;font-weight:500;transition:var(--transition);font-size:16px}.nav-menu ul li a:hover{color:var(--primary-color)}.menu-toggle{display:none}@media screen and (max-width: 768px){.menu-toggle{display:block;cursor:pointer}.hamburger{width:30px;height:20px;position:relative}.hamburger span{position:absolute;width:100%;height:3px;background-color:var(--text-color);transition:var(--transition);left:0}.hamburger span:nth-child(1){top:0}.hamburger span:nth-child(2){top:50%;transform:translateY(-50%)}.hamburger span:nth-child(3){bottom:0}.hamburger.open span:nth-child(1){transform:rotate(45deg);top:50%}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:rotate(-45deg);bottom:50%}.nav-menu{position:fixed;top:80px;left:-100%;width:100%;height:calc(100vh - 80px);background-color:var(--white);transition:var(--transition);padding:20px}.nav-menu.active{left:0}.nav-menu ul{flex-direction:column;align-items:center}.nav-menu ul li{margin:15px 0}}.hero{height:100vh;display:flex;align-items:center;position:relative;background:#000;overflow:hidden;padding:0 20px}@keyframes gradientAnimation{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.hero-content{display:flex;align-items:center;justify-content:space-between;margin:0 auto;width:100%}.hero-text{flex:1;z-index:10}.hero-text h1{font-size:48px;margin-bottom:10px;line-height:1.2;opacity:0;animation:fadeIn 1s ease forwards;animation-delay:.2s}.hero-text h3{font-size:28px;font-weight:600;margin-bottom:20px;color:var(--light-text);opacity:0;animation:fadeIn 1s ease forwards;animation-delay:.4s}.hero-text p{font-size:18px;color:var(--light-text);max-width:500px;margin-bottom:30px;opacity:0;animation:fadeIn 1s ease forwards;animation-delay:.6s}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.hero-buttons{display:flex;gap:20px;margin-bottom:30px;opacity:0;animation:fadeIn 1s ease forwards;animation-delay:.8s}.btn-outline{background:transparent;border:2px solid var(--primary-color);color:var(--primary-color)}.btn-outline:hover{background:var(--primary-color);color:var(--white)}.social-links{display:flex;gap:15px;opacity:0;animation:fadeIn 1s ease forwards;animation-delay:1s}.social-links a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background-color:var(--white);border-radius:50%;color:var(--text-color);font-size:20px;transition:var(--transition);box-shadow:var(--box-shadow)}.social-links a:hover{color:var(--white);background-color:var(--primary-color);transform:translateY(-3px)}.shape{width:400px;height:400px;background-color:var(--primary-color);border-radius:5%;position:relative;overflow:hidden;box-shadow:var(--box-shadow);background-image:url(../../assets/profile.jpg);background-size:cover;background-position:center;animation:float 4s ease-in-out infinite}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.hero-scroll{position:absolute;bottom:30px;left:50%;transform:translate(-50%)}.mouse{width:30px;height:50px;border:2px solid var(--text-color);border-radius:20px;position:relative}.mouse:before{content:"";position:absolute;width:5px;height:10px;background-color:var(--text-color);left:50%;top:10px;transform:translate(-50%);border-radius:5px;animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translate(-50%) translateY(0)}40%{transform:translate(-50%) translateY(-10px)}60%{transform:translate(-50%) translateY(-5px)}}@media (max-width: 1200px){.hero-content{flex-direction:column-reverse;text-align:center}.hero-text{margin-top:50px}.hero-text p{margin:0 auto 30px}.hero-buttons,.social-links{justify-content:center}.shape{width:300px;height:300px}}@media (max-width: 768px){.hero-text h1{font-size:36px}.hero-text h3{font-size:24px}.hero-text p{font-size:16px}.hero-buttons{flex-direction:column;gap:10px}.btn,.btn-outline{width:100%;max-width:250px;margin:0 auto}.shape{width:250px;height:250px}}@media (max-width: 480px){.hero-text h1{font-size:28px}.hero-text h3{font-size:20px}.hero-text p{font-size:14px}.shape{width:200px;height:200px}.social-links a{width:35px;height:35px;font-size:18px}}.about{background-color:var(--white);padding:80px 0}.about .container{max-width:1200px;margin:0 auto;padding:0 20px}.stars{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.stars span{position:absolute;background:#fff;border-radius:50%;animation:twinkle linear infinite}@keyframes twinkle{0%{opacity:0}50%{opacity:1}to{opacity:0}}.shooting-star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:shoot 3s linear infinite}@keyframes shoot{0%{transform:translate(-100%) translateY(-100%);opacity:0}50%{opacity:1}to{transform:translate(100%) translateY(100%);opacity:0}}.about h2{font-size:36px;text-align:center;margin-bottom:60px;color:var(--primary-color);position:relative}.about h2:after{content:"";position:absolute;width:80px;height:4px;background-color:var(--primary-color);bottom:-15px;left:50%;transform:translate(-50%)}.about-content{display:flex;align-items:center;gap:50px}.about-image{flex:1;display:flex;justify-content:center}.img-container{width:350px;height:400px;position:relative;overflow:hidden;border-radius:10px;box-shadow:var(--box-shadow);transition:var(--transition)}.img-container:hover{transform:translateY(-10px);box-shadow:0 10px 20px #00000026}.placeholder-img{width:100%;height:100%;background-color:#ddd}.about-text{flex:1}.about-text p{color:var(--light-text);margin-bottom:20px;line-height:1.8}.about-details{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:30px 0}.hero-image{flex:1;display:flex;justify-content:center;position:relative}.shape{width:400px;height:600px;background-color:var(--primary-color);border-radius:5%;position:relative;overflow:hidden;box-shadow:var(--box-shadow);background-image:url(../../assets/profile.jpg);background-size:cover;background-position:center}.detail h4{font-weight:600;margin-bottom:5px;color:var(--primary-color)}.detail p{margin-bottom:0;color:var(--text-color)}.about-cta{margin-top:30px}.about-cta .btn{background-color:var(--primary-color);color:var(--white);padding:12px 25px;border:none;border-radius:5px;cursor:pointer;text-decoration:none;font-size:16px;font-weight:500;transition:var(--transition)}.about-cta .btn:hover{background-color:#333;transform:translateY(-3px);box-shadow:var(--box-shadow)}@media (max-width: 992px){.about-content{flex-direction:column;text-align:center}.about-details{text-align:left;max-width:500px;margin:30px auto}}@media (max-width: 576px){.about-details{grid-template-columns:1fr}.img-container{width:100%;height:300px}}@media screen and (max-width: 1024px){.shape{width:300px;height:450px}}@media screen and (max-width: 768px){.shape{width:250px;height:375px}}@media screen and (max-width: 480px){.shape{width:200px;height:300px}}.experience{background-color:var(--white);position:relative}.timeline-exp{position:relative;max-width:1000px;margin:0 auto;padding:0 20px}.timeline-exp:after{content:"";position:absolute;width:4px;background-color:var(--primary-color);top:0;bottom:0;left:50%;transform:translate(-50%)}.timeline-item-exp{padding:15px 30px;position:relative;background-color:inherit;width:calc(50% - 30px);margin-bottom:40px}.timeline-exp .timeline-item-exp.left{left:0!important;text-align:right}.timeline-exp .timeline-item-exp.left .timeline-content-exp{text-align:left}.timeline-exp .timeline-item-exp.right{left:calc(50% + 30px)!important;text-align:left}.timeline-item-exp:after{content:"";position:absolute;width:20px;height:20px;background-color:var(--white);border:4px solid var(--primary-color);top:24px;border-radius:50%;z-index:1}.timeline-content-exp{padding:20px;background-color:var(--white);border-radius:10px;box-shadow:var(--box-shadow);position:relative}.timeline-content-exp h3{font-size:22px;color:var(--primary-color);margin-bottom:10px}.timeline-content-exp h4{font-size:18px;color:var(--text-color);margin-bottom:15px}.timeline-content-exp ul{margin-left:20px;color:var(--light-text)}.timeline-content-exp ul li{margin-bottom:10px;line-height:1.6}.date{display:inline-block;background-color:var(--primary-color);color:var(--white);padding:5px 15px;border-radius:20px;font-size:14px;margin-bottom:15px}.left:after{right:-10px}.right:after{left:-10px}@media screen and (max-width: 1024px){.timeline-exp{padding:0 15px}.timeline-item-exp{width:calc(50% - 20px);padding:15px 20px}.right{left:calc(50% + 20px)}}@media screen and (max-width: 768px){.timeline-exp{padding:0 10px}.timeline-exp:after{left:31px}.timeline-item-exp{width:100%;padding-left:70px;padding-right:25px;left:0!important;text-align:left!important}.timeline-item-exp:after{left:21px!important}.left:after,.right:after{left:21px!important;right:auto!important}}@media screen and (max-width: 480px){.timeline-exp{padding:0 5px}.timeline-item-exp{padding-left:60px;padding-right:15px}.timeline-exp:after{left:26px}.timeline-item-exp:after{left:16px!important}.left:after,.right:after{left:16px!important}}.projects{background-color:var(--white);padding:80px 0}.projects .container{max-width:1200px;margin:0 auto;padding:0 20px}.projects h2{font-size:36px;text-align:center;margin-bottom:60px;color:var(--primary-color);position:relative}.projects h2:after{content:"";position:absolute;width:80px;height:4px;background-color:var(--primary-color);bottom:-15px;left:50%;transform:translate(-50%)}.project-filter{display:flex;justify-content:center;flex-wrap:wrap;margin-bottom:40px;gap:15px}.project-filter button{padding:10px 20px;border:none;background-color:var(--white);color:var(--text-color);cursor:pointer;border-radius:5px;font-size:16px;transition:var(--transition);box-shadow:0 2px 5px #0000000d}.project-filter button.active,.project-filter button:hover{background-color:var(--primary-color);color:var(--white)}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px}.project-card{background-color:var(--white);border-radius:10px;padding:20px;box-shadow:var(--box-shadow);transition:var(--transition)}.project-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px #00000026}.project-info h3{font-size:20px;margin-bottom:10px;color:var(--text-color)}.project-info p{color:var(--light-text);font-size:14px;margin-bottom:15px;line-height:1.6}.project-tech{display:flex;flex-wrap:wrap;gap:8px}.project-tech span{background-color:#1e88e51a;color:var(--primary-color);padding:5px 10px;border-radius:20px;font-size:12px;font-weight:500}@media screen and (max-width: 768px){.project-filter{flex-direction:column;align-items:center}.project-filter button{width:100%;max-width:250px}.project-grid{grid-template-columns:1fr}}.skills{background-color:var(--white);padding:80px 0}.skills .container{max-width:1200px;margin:0 auto;padding:0 20px}.skills h2{font-size:36px;text-align:center;margin-bottom:60px;color:var(--primary-color);position:relative}.skills h2:after{content:"";position:absolute;width:80px;height:4px;background-color:var(--primary-color);bottom:-15px;left:50%;transform:translate(-50%)}.skills-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px}.skill-category{background-color:var(--secondary-color);padding:25px;border-radius:10px;box-shadow:var(--box-shadow);transition:var(--transition)}.skill-category:hover{transform:translateY(-10px);box-shadow:0 10px 20px #00000026}.skill-category h3{font-size:22px;margin-bottom:25px;color:var(--primary-color);position:relative;padding-bottom:10px}.skill-category h3:after{content:"";position:absolute;width:50px;height:3px;background-color:var(--primary-color);left:0;bottom:0}.skill-list{display:flex;flex-direction:column;gap:20px}.skill-item{margin-bottom:15px}.skill-info{display:flex;justify-content:space-between;margin-bottom:8px}.skill-name{font-weight:500;color:var(--text-color)}.skill-percentage{font-weight:600;color:var(--primary-color)}.skill-bar{width:100%;height:10px;background-color:#eee;border-radius:5px;overflow:hidden}.skill-progress{height:100%;background-color:var(--primary-color);border-radius:5px;transition:width 1s ease-in-out}@keyframes progress{0%{width:0}to{width:var(--progress-width)}}.skill-progress{animation:progress 1.5s ease-in-out forwards}@media screen and (max-width: 768px){.skills-container{grid-template-columns:1fr}.skill-category{padding:20px}.skill-category h3{font-size:20px}}.contact{background-color:var(--white);padding:80px 0}.contact .container{max-width:1200px;margin:0 auto;padding:0 20px}.contact h2{font-size:36px;text-align:center;margin-bottom:60px;color:var(--primary-color);position:relative}.contact h2:after{content:"";position:absolute;width:80px;height:4px;background-color:var(--primary-color);bottom:-15px;left:50%;transform:translate(-50%)}.contact-content{display:grid;grid-template-columns:1fr 1fr;gap:50px}.contact-info,.contact-form{padding:30px;background-color:var(--secondary-color);border-radius:10px;box-shadow:var(--box-shadow);transition:var(--transition)}.contact-info:hover,.contact-form:hover{transform:translateY(-5px);box-shadow:0 10px 20px #00000026}.contact-info h3,.contact-form h3{font-size:24px;margin-bottom:20px;color:var(--text-color)}.contact-info p{color:var(--light-text);margin-bottom:30px;line-height:1.7}.info-item{display:flex;margin-bottom:25px;align-items:flex-start}.info-icon{font-size:24px;color:var(--primary-color);margin-right:15px;min-width:24px}.info-item h4{font-size:18px;font-weight:600;margin-bottom:5px;color:var(--text-color)}.info-item p{color:var(--light-text);margin-bottom:0}.social-links{display:flex;gap:15px;margin-top:30px}.social-links a{width:40px;height:40px;border-radius:50%;background-color:var(--primary-color);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:20px;transition:var(--transition)}.social-links a:hover{transform:translateY(-5px);background-color:var(--dark-bg)}.form-group{margin-bottom:20px}.alert{padding:12px;margin-bottom:20px;border-radius:4px;font-size:14px}.alert-success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.alert-error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.btn:disabled{opacity:.7;cursor:not-allowed}.form-group input,.form-group textarea{width:100%;padding:12px 15px;border:1px solid var(--light-text);border-radius:5px;font-size:16px;color:var(--text-color);background-color:var(--white);transition:var(--transition)}.form-group input:focus,.form-group textarea:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 2px #1e88e533}.form-group textarea{height:150px;resize:vertical}.btn{background-color:var(--primary-color);color:var(--white);padding:12px 25px;border:none;border-radius:5px;cursor:pointer;text-decoration:none;font-size:16px;font-weight:500;transition:var(--transition)}.btn:hover{background-color:var(--dark-bg);transform:translateY(-3px);box-shadow:var(--box-shadow)}@media screen and (max-width: 992px){.contact-content{grid-template-columns:1fr}.contact-info,.contact-form{padding:20px}}@media screen and (max-width: 576px){.contact h2{font-size:28px}.contact-info h3,.contact-form h3{font-size:20px}.info-item{flex-direction:column;align-items:center;text-align:center}.info-icon{margin-right:0;margin-bottom:10px}}.footer{background-color:var(--white);color:var(--text-color);padding:40px 0 20px}.container{max-width:1200px;margin:0 auto;padding:0 20px}.footer-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;margin-bottom:30px}.footer-logo a{font-size:24px;font-weight:700;color:var(--primary-color);text-decoration:none}.footer-logo span{color:var(--text-color)}.footer-info p{color:var(--light-text);line-height:1.6;margin-top:10px}.footer-social{display:flex;gap:15px}.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background-color:#0000001a;color:var(--text-color);transition:var(--transition)}.footer-social a:hover{background-color:var(--primary-color);color:var(--white);transform:translateY(-3px)}.footer-bottom{padding-top:20px;border-top:1px solid rgba(0,0,0,.1);display:flex;justify-content:space-between;align-items:center}.footer-bottom p{color:var(--light-text);font-size:14px}.scroll-to-top{width:40px;height:40px;background-color:var(--primary-color);color:var(--white);border:none;border-radius:5px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition)}.scroll-to-top:hover{background-color:#1565c0;transform:translateY(-3px)}@media screen and (max-width: 768px){.footer-bottom{flex-direction:column;gap:15px;text-align:center}}