*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Open Sans',sans-serif;color:#333;background-color:#fff;scroll-behavior:smooth;line-height:1.6;overflow-x:hidden}html,body{min-height:100vh;display:flex;flex-direction:column}main{flex:1}body.dark-mode{background-color:#0d0d0d;color:#e0e0e0}h1,h2,h3,h4,h5,h6{font-weight:700}a{color:#007bff;text-decoration:none;transition:color 0.2s ease-in-out}a:hover{color:#0056b3}#header{position:fixed;top:0;left:0;height:100vh;width:200px;background:#f8f9fa;padding:30px 15px;overflow-y:auto;z-index:1000;box-shadow:2px 0 8px rgba(0,0,0,0.05);transition:all 0.3s ease-in-out}body.dark-mode #header{background:#111}.nav-menu{display:flex;flex-direction:column;gap:20px}.nav-menu ul{display:flex;flex-direction:column;list-style:none;padding:0;margin:0;gap:12px}.nav-menu ul li a{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:#333;padding:8px 12px;border-radius:6px;text-transform:uppercase;transition:all 0.3s}.nav-menu ul li a i{font-size:18px}.nav-menu ul li a:hover,.nav-menu ul li a.active{background:#e9ecef;color:#007bff}body.dark-mode .nav-menu ul li a{color:#ddd}body.dark-mode .nav-menu ul li a:hover,body.dark-mode .nav-menu ul li a.active{background:#222;color:#1e90ff}section{padding:60px 20px;scroll-margin-top:80px}.section-title{text-align:center;margin-bottom:40px}.section-title h2{font-size:32px;font-weight:bold;position:relative;padding-bottom:10px}#hero{height:100vh;background:url('../img/hero-bg.jpg') top center;background-size:cover;position:relative;color:#fff;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column}#hero .hero-container{z-index:1;position:relative;animation:fadeIn 1s ease forwards}#hero h1{font-size:48px;font-weight:bold}#hero p{margin-top:10px;font-size:24px;font-weight:300}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.skills .progress{height:60px;display:block;background:#f7f7f7;border-radius:4px;margin-bottom:20px;overflow:hidden}.skills .progress .skill{padding:10px 15px;font-weight:600;color:#333}.skills .progress-bar-wrap{background:#e0e0e0;height:10px;border-radius:4px;overflow:hidden}.skills .progress .progress-bar{height:100%;line-height:60px;background-color:#007bff;text-align:right;padding-right:10px;color:#fff;transition:width 0.6s ease}.portfolio .portfolio-item{margin-bottom:30px}.portfolio .portfolio-wrap{position:relative;overflow:hidden;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.1);transition:transform 0.3s}.portfolio .portfolio-wrap:hover{transform:translateY(-8px)}.portfolio .portfolio-wrap img{width:100%;height:auto;display:block}.portfolio .portfolio-info{position:absolute;bottom:-100%;left:0;right:0;background:rgba(44,62,80,0.95);padding:20px;transition:bottom 0.3s;border-top:2px solid #18d26e;text-align:center}.portfolio .portfolio-wrap:hover .portfolio-info{bottom:0}.portfolio .portfolio-info h4,.portfolio .portfolio-info p{color:#fff;margin-bottom:10px}.portfolio .portfolio-links a{color:#fff;font-size:24px;margin:0 10px;transition:color 0.3s}.portfolio .portfolio-links a:hover{color:#18d26e}.contact .info-box{padding:20px;background:#f9f9f9;border-radius:8px;margin-bottom:20px;text-align:center}.contact .info-box i{font-size:36px;color:#007bff;margin-bottom:10px}.contact .info-box h3{font-size:20px;font-weight:bold}.back-to-top{position:fixed;right:15px;bottom:15px;width:40px;height:40px;background:#007bff;color:#fff;border-radius:50%;align-items:center;justify-content:center;z-index:999;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.4s ease,visibility 0.4s ease,background 0.3s}.back-to-top.show{opacity:1;visibility:visible;pointer-events:auto;display:flex}.back-to-top:hover{background:#0056b3}