#check,.banner br,.mobile-menu{display:none}*,.sidebar ul{margin:0;padding:0}.sidebar ul li a,a{text-decoration:none}.fixed,.sidebar,header{position:fixed}section h3::after,section h3::before{content:'';position:absolute;display:block}*{font-family:Quicksand,sans-serif;color:#333}header{height:70px;z-index:1000}header p{display:inline-block;float:left;font-size:32px;font-weight:700;padding:15px 24px}header p a,header ul li a{transition:.3s;color:#fff}.col-3 p :hover,header p a:hover,header ul li a:hover{color:#f84744}header ul{float:right}header ul li{padding:24px;display:inline-block}header ul li a.active{border-bottom:2px solid #f84744;color:#f84744}.container{width:90%;margin:0 auto}.container::after{content:'';display:block;clear:both}.mobile-menu{float:right;padding:18px}.col-3,.col-4{box-sizing:border-box;float:left}.mobile-menu:hover{cursor:pointer}.sidebar{top:0;bottom:0;left:-300px;width:300px;background-color:rgba(16,47,80,.9);transition:.3s;z-index:9999}#check:checked~.sidebar{left:0}.sidebar ul{list-style:none}.banner h2,.banner img{margin-bottom:10px}.sidebar ul li a{display:block;padding:24px;color:#fff;transition:.3s}.sidebar ul li a:hover{background-color:#f84744;color:#fff}.sidebar ul li a.active{background-color:#fff;color:#f84744;border-left:4px solid #f84744}.fixed{width:100%;background-color:#1f68b6}.banner{background-color:#2d81db;padding:140px 0 50px}.banner img{width:200px;border-radius:10px;box-shadow:0 3px 5px #ddd}.banner h2,.banner p,.banner span,.skills-list .icon i,footer small{color:#fff}.banner p{font-size:18px}.banner-left{padding-left:24px}section{padding:50px 0}#about h2,#achievement h2,#contact h2,#skills h2{text-align:center;margin:20px}section h3{padding-bottom:1px;margin:20px;position:relative}section h3::before{bottom:0;width:120px;height:1px;background-color:#ddd;left:calc(50% - 60px)}section h3::after{bottom:-1px;width:40px;height:4px;background-color:#f84744;left:calc(50% - 20px)}#about p{margin-bottom:15px}#contact,#skills{background-color:#f9f9f9}#skills .bar{height:30px;background-color:#fff;border:1px solid #ddd;margin:5px 0 20px}.bar .nilai{height:30px;background-color:#f84744;display:inline-block;color:#fff;text-align:center}.html,.php{width:98%}.css{width:95%}.js{width:97%}.ps{width:85%}#skills{background:#f9f9f9;padding:60px 20px}.skills-list{text-align:left;font-family:Poppins,sans-serif}.col-3,.col-4,footer{text-align:center}.skills-list ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:15px}.col-3 h4,.col-4{margin-bottom:15px}.skills-list li{display:flex;align-items:flex-start;gap:15px;padding:15px 20px;background:#fff;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.08);transition:transform .2s,box-shadow .2s;position:relative;z-index:1}.skills-list li:hover{transform:translateY(-4px);box-shadow:0 4px 12px rgba(0,0,0,.12)}.skills-list .icon{width:50px;height:50px;background:#4caf50;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;transition:background .2s}.skills-list li:hover .icon{background:#45a049}.skills-list .text{flex:1;font-size:15px;line-height:1.6;color:#333}.skills-list .text strong{display:block;font-size:16px;color:#222;margin-bottom:4px}.col-3{width:33.33%;padding:50px 10px}.col-3 h4{padding-bottom:10px;border-bottom:1px solid #ddd}.col-3 p{transition:.3s}.col-4{width:25%;padding:5px}.col-4 img{width:100%}.col-4 span:hover img{transform:scale(1.1)}.justify{text-align:justify}footer{background-color:#333;padding:10px}html{scroll-behavior:smooth}@media (max-width:993px){.mobile-menu{display:block}.mobile-menu i{color:#fff;transition:.3s}.mobile-menu i:hover{color:#f84744}header{height:70px;position:fixed}header p{font-size:26px;padding:20px 24px}header h1,header ul{display:none}.col-4{width:50%}.col-3{width:100%}}@media (max-width:768px){footer,header p{padding:20px 24px}.mobile-menu{display:block}.mobile-menu i{color:#fff;transition:.3s}.mobile-menu i:hover{color:#f84744}.banner br{display:inline-block}header p{font-size:18.5px}footer{font-size:15px}}