@import url('https://fonts.googleapis.com/css2?family=Clicker+Script&family=Poppins:wght@200;300;400;500;600;700&display=swap');
:root{--bg-black-900:#f2f2fc;--bg-black-100:#fdf9ff;--bg-black-50:#e8dfec;--text-black-900:#302e4d;--text-black-700:#504e70}
body.dark{--bg-black-900:#151515;--bg-black-100:#222;--bg-black-50:#393939;--text-black-900:#fff;--text-black-700:#e9e9e9}
body{line-height:1.5;font-size:16px;font-family:'Poppins' sans-serif}*{margin:0;padding:0;outline:none;text-decoration:none;box-sizing:border-box}::before,::after{box-sizing:border-box}ul{list-style:none}.section{background:var(--bg-black-900);min-height:100vh;display:block;padding:0 30px;opacity:1}.hidden{display:none!important}.main-content{padding-left:270px}.padd-15{padding-left:15px;padding-right:15px}.container{max-width:1180px;width:100%;margin:auto}.section .container{padding-top:60px;padding-bottom:70px}.section-title{flex:0 0 100%;max-width:100%;margin-bottom:60px}.section-title h2{font-size:40px;color:var(--text-black-900);font-weight:700;position:relative}.section-title h2::before{content:'';height:4px;width:50px;background-color:var(--skin-color);position:absolute;top:100%;left:0}.section-title h2::after{content:'';height:4px;width:25px;background-color:var(--skin-color);position:absolute;top:100%;left:0;margin-top:8px}.row{display:flex;flex-wrap:wrap;margin-left:-15px;margin-right:-15px;position:relative}.btn{font-size:16px;font-weight:500;padding:12px 35px;color:white;border-radius:40px;display:inline-block;white-space:nowrap;border:none;background:var(--skin-color);transition:all .3s ease}.btn:hover{transform:scale(1.05)}.shadow-dark{box-shadow:0 0 20px rgba(48,46,77,.15)}
.aside{width:270px;background:var(--bg-black-100);position:fixed;left:0;top:0;padding:30px;height:100%;border-right:1px solid var(--bg-black-50);display:flex;justify-content:center;align-items:center;z-index:10}.aside .logo{position:absolute;top:50px;font-size:30px;text-transform:capitalize}.aside .logo a{color:var(--text-black-900);font-weight:700;padding:15px 20px;font-size:30px;letter-spacing:5px;position:relative}.aside .logo a span{font-family:'Clicker Script',cursive;font-size:40px}.aside .logo a::before{content:'';position:absolute;width:20px;height:20px;border-bottom:5px solid var(--skin-color);border-left:5px solid var(--skin-color);bottom:0;left:0}.aside .logo a::after{content:'';position:absolute;width:20px;height:20px;border-top:5px solid var(--skin-color);border-right:5px solid var(--skin-color);top:0;right:0}.aside .nav-toggler{height:40px;width:45px;border:1px solid var(--bg-black-50);cursor:pointer;position:fixed;left:300px;top:20px;border-radius:5px;background:var(--bg-black-100);display:none;align-items:center;justify-content:center}.aside .nav-toggler span{height:2px;width:18px;background:var(--skin-color);display:inline-block;position:relative}.aside .nav-toggler span::before{content:'';height:2px;width:18px;background:var(--skin-color);position:absolute;top:-6px;left:0}.aside .nav-toggler span::after{content:'';height:2px;width:18px;background:var(--skin-color);position:absolute;top:6px;left:0}.aside .nav{margin-top:50px}.aside .nav li{margin-bottom:20px;display:block}.aside .nav li a{font-size:16px;font-weight:600;display:block;border-bottom:1px solid var(--bg-black-50);color:var(--text-black-900);padding:5px 15px}.aside .nav li a.active{color:var(--skin-color)}.aside .nav li a i{margin-right:15px}
.home{min-height:100vh;display:flex;justify-content:center;align-items:center;color:var(--text-black-900)}.home .home-info{flex:0 0 60%;max-width:60%}h3.hello{font-size:28px;margin:15px 0}h3.hello span{font-family:'Clicker Script',cursive;font-size:30px;font-weight:700;color:var(--skin-color)}h3.my-profession{font-size:30px;margin:15px 0}.typing{color:var(--skin-color)}.home-info p{margin-bottom:70px;font-size:20px;color:var(--text-black-700)}.home .home-img{flex:0 0 40%;max-width:40%;text-align:center;position:relative;width:100%}.home-img::after{content:'';position:absolute;height:80px;width:80px;border-bottom:10px solid var(--skin-color);border-right:10px solid var(--skin-color);right:40px;bottom:40px}.home-img::before{content:'';position:absolute;height:80px;width:80px;border-top:10px solid var(--skin-color);border-left:10px solid var(--skin-color);left:40px;top:-35px}.home .home-img img{max-width:100%;height:300px;display:inline-block;margin-bottom:40px}
.about .about-content{flex:0 0 100%;max-width:100%}.about .about-content .about-text{flex:0 0 100%;max-width:100%}.about .about-content .about-text h3{font-size:24px;margin-bottom:15px;font-weight:700;color:var(--text-black-900)}.about .about-content .about-text h3 span{color:var(--skin-color)}.about .about-content .about-text p{font-size:16px;line-height:25px;color:var(--text-black-700)}.about .about-content .personal-info{flex:0 0 60%;max-width:60%;margin-top:40px}.about .about-content .personal-info .info-item{flex:0 0 50%;max-width:50%}.about .about-content .personal-info .info-item p{font-weight:600;padding:10px 0;font-size:16px;color:var(--text-black-900);border-bottom:1px solid var(--bg-black-50)}.about .about-content .personal-info .info-item p span{font-weight:400;color:var(--text-black-700);margin-left:4px;display:inline-block}.about .about-content .personal-info .buttons{margin-top:30px}.about .about-content .personal-info .buttons .btn{margin-right:15px;margin-top:10px}.about .about-content .skills{flex:0 0 40%;max-width:40%;margin-top:40px}.about .about-content .skills .skill-item{flex:0 0 100%;max-width:100%;margin-bottom:25px}.about .about-content .skills .skill-item h5{line-height:40px;font-weight:600;font-size:16px;color:var(--text-black-900);text-transform:capitalize}.about .about-content .skills .skill-item .progress{background-color:var(--bg-black-50);height:7px;border-radius:4px;width:100%;position:relative}.about .about-content .skills .skill-item .progress .progress-in{position:absolute;left:0;top:0;height:100%;border-radius:4px;background-color:var(--skin-color)}.about .about-content .skills .skill-item .skill-percent{position:absolute;right:0;color:var(--text-black-900);top:-40px;font-weight:400;line-height:40px}
/* portfolio */
.portfolio .container{max-width:1180px;padding-bottom:50px}.portfolio .porfolio-heading{flex:0 0 100%;max-width:100%;margin-bottom:35px}.portfolio .porfolio-heading h2{color:var(--text-black-900);font-weight:500}body.dark .portfolio-heading h2{color:white}
.portfolio .portfolio-item{flex:0 0 33.333%;max-width:33.333%;margin-bottom:34px;padding-left:9px;padding-right:9px}
.portfolio .portfolio-item-inner{border:6px solid var(--bg-black-100);border-radius:14px;overflow:hidden;cursor:pointer;width:100%;background:var(--bg-black-100);transition:transform .25s ease,box-shadow .25s ease}
.portfolio .portfolio-item-inner:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(48,46,77,.2)}
.portfolio .portfolio-item-inner .portfolio-img{width:100%;aspect-ratio:16/10;overflow:hidden}
.portfolio .portfolio-item-inner .portfolio-img img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .3s ease}
.portfolio .portfolio-item-inner:hover .portfolio-img img{transform:scale(1.025)}
.portfolio .row:nth-of-type(2){margin-left:-9px;margin-right:-9px}
.footer{margin:80px 0 10px;text-align:center}.footer a{text-decoration:none;color:#999;font-size:22px;margin:0 10px}.footer hr{background:#999;height:1px;width:100%;border:0;margin:20px 0}.footer p{padding-bottom:15px;color:#999}
@media(max-width:1199px){.aside{left:-270px}.main-content{padding-left:0}.about .about-content .personal-info .info-item p span{display:block;margin-left:0}}@media(max-width:991px){.contact .contact-info-item,.portfolio .portfolio-item,.service .service-item{flex:0 0 50%;max-width:50%}.home .home-info{flex:0 0 100%;max-width:100%}.home .home-img{display:none}.portfolio .container{max-width:900px}}@media(max-width:767px){.portfolio .portfolio-item,.about .about-content .experience,.about .about-content .education,.about .about-content .skills,.about .about-content .personal-info{flex:0 0 100%;max-width:100%}.portfolio .portfolio-item-inner .portfolio-img{aspect-ratio:16/10}}