@import "https://cdn.jsdelivr.net/npm/remixicon@4.7.0/fonts/remixicon.css";*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;background-color:var(--bg-color);font-family:sans-serif}:root{--bg-color:#ECECEC;--bg-secondary-color:#FEFCFC;--bg-dark-color:#000;--text-color:#1f1f1f;--text-secondary-color:#333;--text-light-color:#666;--text-lightest-color:gray;--text-opacity:#8080805e;--border-color:#e0e0e0;--xl-text:3rem;--l-text:1.8rem;--m-text:1.7rem;--s-text:.9rem;--xs-text:.7rem;--radius:25px}main{margin-top:150px}section{max-width:1070px;margin:0 auto}h2{color:var(--text-opacity);margin:2rem;margin-top:4rem;font-size:var(--m-text)}.btn{display:inline-block;padding:10px 32px;border-radius:var(--radius);text-decoration:none;font-weight:500;border:none;font-size:18px;color:var(--text-lightest-color);background-color:#f0f0f0;transition:.3s ease;box-shadow:0 4px 8px #00000014}.btn:hover{transform:translateY(-6px);background-color:transparent;color:var(--text-color);box-shadow:0 4px 12px #0000001a}header{display:flex;justify-content:center;align-items:center;padding:0;position:fixed;left:0;width:100%;top:0;z-index:100}nav{width:60%;max-width:1200px;border-radius:40px;backdrop-filter:blur(20px);background-color:transparent;display:flex;padding:0 50px;margin:20px auto;justify-content:space-between;align-items:center;box-shadow:0 10px 20px 2px #80808054;position:relative}nav ul{display:flex;width:100%;list-style:none}nav ul li{position:relative}nav ul li a{display:flex;align-items:center;justify-content:center;padding:25px 16px;color:var(--text-lightest-color);text-decoration:none;font-size:var(--s-text);font-weight:600;transition:all .3s ease}nav ul li a:hover{color:var(--text-light-color);box-shadow:0 4px 8px #00000014}nav ul li a i{font-size:1.2rem;transition:transform .3s ease;margin:auto 0}.nav-main{display:flex;flex:1}.nav-main i{margin-right:8px;font-size:1rem;transition:transform .3s ease}.nav-social{display:flex}.nav-social ul{gap:6px}.nav-social a{padding:18px 12px!important;min-width:50px;justify-content:center}.nav-social a i{margin-right:0}.hero{text-align:center;padding:60px 20px;display:flex;height:calc(100%-100px);flex-direction:column;justify-content:center;align-items:center}.hero h1{font-size:var(--xl-text);color:var(--text-light-color);margin-bottom:1px;margin-top:45px;font-weight:700}.hero h1 span{color:var(--text-light-color);font-weight:100}.hero-p{font-size:1.6rem;color:var(--bg-dark-color);max-width:700px;font-weight:350;margin:10px auto 20px;line-height:1.6}.title{font-size:1.4rem;color:var(--text-light-color);max-width:800px;margin:0 auto 10px;font-weight:200}.title span{font-weight:600;font-size:1.4rem}.hero-btns{display:flex;justify-content:center;gap:20px;width:50%;margin-top:3rem}.project-card{position:relative;overflow:hidden;width:100%;margin-top:30px;background:var(--bg-secondary-color);border-radius:var(--radius);padding:25px;transition:all .36s ease-in-out;box-shadow:0 20px 40px #00000012;z-index:1}.project-top{background:var(--bg-secondary-color);padding:12px 10px;border-radius:30px;display:inline-block;box-shadow:0 10px 20px #0000000d;transition:all .6s ease-in}.read-time{font-size:.9rem;transition:all .6s ease-in;color:#777}.project-content{display:flex;align-items:center;justify-content:space-between;margin-top:25px;gap:20px}.project-text{flex:1}.tags{display:flex;flex-wrap:wrap}.tags span{font-size:.85rem;background:#f1f1f1;color:var(--text-light-color);padding:6px 12px;border-radius:20px;width:fit-content;line-height:2rem;margin-right:8px;margin-top:8px}.project-text h3{margin-top:25px;font-size:var(--m-text);font-weight:400;color:var(--text-light-color)}.sub{color:#666;margin-bottom:20px}.achievements h4{font-size:var(--xs-text);color:#888;margin-bottom:5px}.achievements p{color:#1f9909;font-size:var(--s-text);font-weight:500;margin-bottom:6px}.project-image img{width:350px;position:relative;border-radius:20px;box-shadow:0 15px 30px #00000014}.btn-hover{padding:13px 40px;background:var(--bg-dark-color);color:var(--bg-color);text-decoration:none;border-radius:8px;border-radius:50px;font-size:var(--s-text);transition:.3s ease}.overlay{position:absolute;top:0;right:0;transform:translateX(60%);width:100%;height:100%;background:#ffffff40;backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;opacity:0;transition:.5s ease}.project-card:hover .overlay{opacity:1;transform:translateX(0)}.project-card:hover .overlay .btn-hover{opacity:1}.contact{text-align:left}.h2-2{text-align:center;font-size:2.4rem;margin-top:7rem;font-weight:lighter}.contact-btns{max-width:500px;justify-content:space-around;margin:4rem auto;border:none;display:flex}.contact-btn{padding:18px 38px;font-size:1.2rem;border-radius:40px;color:var(--text-lightest-color);border:none;background-color:#f0f0f0;transition:.3s ease;box-shadow:0 4px 8px #00000014}.contact-btn:hover{transform:translateY(-6px);color:var(--text-color);box-shadow:0 4px 12px #0000001a}.contact-btn a{text-decoration:none;color:var(--text-light-color)}.about{display:grid;grid-template-columns:1fr 380px;gap:30px;margin:2.5rem auto;max-width:900px}.profile-myself{display:flex;justify-content:space-between}.cv-btn{text-align:right}.cv-btn button{background-color:var(--bg-secondary-color);color:var(--text-color);padding:10px 20px;border:none;border-radius:50px;text-decoration:none;font-weight:550;font-size:var(--xs-text);box-shadow:0 20px 40px #00000012;transition:all .3s ease}.cv-btn button:hover{background-color:var(--text-color);color:var(--bg-secondary-color)}.card{background-color:var(--bg-secondary-color);border-radius:16px;box-shadow:0 14px 18px #00000010;padding:25px;transition:var(--transition)}.profile-card{text-align:left;padding:30px 20px}.profile-image{width:140px;height:140px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:2px solid #000;margin-bottom:20px;background-color:var(--bg-secondary-color)}.name{font-size:var(--l-text);text-align:left;font-weight:600;margin-bottom:15px;color:var(--text-light-color)}.social-icons{display:flex;justify-content:left;gap:15px;margin-bottom:20px}.social-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;box-shadow:0 20px 40px #00000012;border-radius:50%;color:var(--text-light-color);transition:var(--transition);font-size:18px;color:var(--text-lightest-color);box-shadow:0 4px 8px #00000025}.social-icons a{text-decoration:none}.bio{text-align:left;font-size:15px;color:var(--light-text);margin-top:30px;line-height:1.7}.card-title,.service-card{font-size:var(--s-text);font-weight:550;color:var(--text-light-color);margin-bottom:10px}.learning-section{margin-top:40px;display:flex;flex-wrap:wrap;gap:20px}.learning-item{display:flex;align-items:center;margin-bottom:15px;padding:10px;border-radius:8px;transition:var(--transition);background-color:transparent}.learning-item i{margin-right:10px;color:var(--text-light-color);font-size:var(--m-text)}.learning-item span{font-size:15px;color:var(--text-light-color);font-weight:550}.sidebar{display:flex;flex-direction:column;gap:20px}.services{max-width:1000px;margin:0 auto;padding:0}.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px}.service-card{text-decoration:none;background:#fff;border-radius:20px;padding:12px 30px;text-align:center;border:1px solid #eaeaea;box-shadow:0 20px 40px #0000000f;transition:all .4s ease;position:relative;overflow:hidden;color:inherit}.service-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000000a,transparent);opacity:0;transition:opacity .4s ease}.service-card:hover::after{opacity:1}.service-card:hover{transform:translateY(-2px);box-shadow:0 35px 70px #0000001f;border-color:#dcdcdc}.service-icon{font-size:3rem;color:var(--text-light-color);margin-bottom:22px;transition:transform .4s ease}.service-card:hover .service-icon{transform:scale(1.15)}.service-card h3{font-size:20px;font-weight:600;margin-bottom:6px;color:var(--text-lightest-color)}.service-card p{font-size:15px;color:var(--text-lightest-color);margin-bottom:20px;font-weight:300}.cta{font-size:14px;font-weight:500;color:var(--text-light-color);border-bottom:1px solid transparent;display:inline-block;transition:all .3s ease}.service-card:hover .cta{border-bottom-color:#111;letter-spacing:.3px}.contact-form input{padding:16px 20px;border:2px solid #e2e8f0;border-radius:12px;font-size:1rem;color:#1e293b;background:#f8fafc;transition:all .3s cubic-bezier(0.4,0,0.2,1);font-weight:500}.form-input:focus{outline:none;border-color:#64748b;background:#fff;box-shadow:0 0 0 4px #64748b1a;transform:translateY(-1px)}.user-info{display:flex;flex-direction:column;gap:24px}label{font-weight:550;color:#000000de;font-size:.95rem;letter-spacing:-.2px}.message{display:flex;flex-direction:column;gap:10px}.message textarea{padding:16px 20px;border:2px solid #e2e8f0;border-radius:12px;font-size:1rem;color:#1e293b;background:#f8fafc;resize:vertical;min-height:180px;font-weight:500;transition:all .3s cubic-bezier(0.4,0,0.2,1);line-height:1.5}.contact-form .formm{padding:25px 40px;display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:32px}.form-group{display:flex;flex-direction:column;gap:10px}.contact-form{max-width:900px;margin:0 auto;background-color:var(--bg-secondary-color);border-radius:40px;padding:20px 10px}.btn-form{text-align:center}footer{display:flex;color:#adadad;padding:30px 60px;justify-content:space-between}footer div{font-weight:lighter;font-size:small}hr{color:#adadad81}@media (max-width: 992px){nav ul li a span{display:none}nav ul li a i{margin-right:0;font-size:1.4rem}.nav-social a{padding:18px 10px!important;min-width:10px;margin:0}}@media (max-width: 850px){h2{margin:2rem;margin-left:10vw;margin-top:4rem;font-size:1.3rem}.sidebar,.profile-card,.project-card{max-width:320px;margin:15px auto;border-radius:20px}.profile-card,.sidebar{max-width:330px}.project-content{flex-direction:column-reverse;text-align:center}.project-text{font-size:var(--s-text);text-align:left}.achievements{display:none}.project-image img{width:90%}}@media (max-width: 768px){nav{flex-direction:column;padding:15px;border-radius:80px}nav ul li a:hover{border:none;background-color:none;box-shadow:none}.nav-main,.nav-social{width:100%}.nav-main ul{flex-wrap:wrap;justify-content:center;gap:8px}.nav-social ul{justify-content:center;margin-top:12px;gap:10px}nav ul li a{padding:14px 12px}.nav-social a{padding:14px 12px!important;margin:0}.about{grid-template-columns:1fr;gap:0}.name{font-size:x-large}.projects{grid-template-columns:1fr}.hero{padding:30px 10px;max-width:350px}.hero h1{font-size:2.2rem}.hero p{font-size:1.2rem}.hero-p{font-size:1.2rem}.hero-btns{flex-direction:column}.h2-2{font-size:var(--m-text)}footer{padding:33px 18px}footer div{font-size:x-small;font-weight:400}}@media (max-width: 599px){.nav-social{display:none}nav{padding:0 15px}nav ul li a{padding:15px 8px}.services{margin:0 8vw}.contact-form .formm{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.contact-form{margin:0 4vw}}@media (max-width: 480px){nav ul li a{padding:15px 5px;font-size:.95rem}nav ul li a i{font-size:1.1rem}.hero h1{font-size:2rem;margin-top:7rem}.hero-p{font-size:.8rem;max-width:400px;margin:0 12px}.title{font-size:1.3rem;font-weight:400}.title span{font-size:1.2rem}.hero p{margin-top:9px;font-size:1rem}.contact-btns{flex-wrap:wrap;justify-content:center;gap:20px}.contact-btns .btn{padding:12px 60px;width:30vw}.btn{padding:17px 24px;font-size:1rem}}