.loading{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;background:#000}.loading video{width:100%;height:auto;object-fit:cover}#vanta-bg{position:fixed;width:100vw;height:100vh;top:0;left:0;z-index:-1}#go-top{display:none;width:40px;height:40px;position:fixed;bottom:10px;right:10px;background-color:#fff;border-radius:50%;z-index:10;transition:all .3s ease}#go-top:hover{background-color:#a1a1a1}#go-top img{width:40px;height:40px;display:flex;margin:auto;justify-content:center;align-items:center;color:#000;cursor:pointer;transition:all 1s ease}.sajjad-nav{display:flex;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin:20px 10px;border-radius:20px;border:1px solid #9b9b9b;justify-content:space-between;align-items:center;height:70px;padding:5px 20px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff05;box-shadow:0 4px 18px #0000000f}nav .quick-link a span{margin:0 10px;font-size:.95rem;color:#c8c8c8;font-weight:500;transition:all .5s ease}nav .quick-link a span:hover{text-decoration:underline;cursor:pointer;color:#3d7eff}.brand img{width:30px;height:30px;margin-right:7px;border:1.5px solid #c8c8c8;border-radius:50%;vertical-align:middle}.brand{display:inline-flex;justify-content:center;gap:30px;align-items:center}.logo{color:#fff;font-weight:700;font-size:1.3rem;letter-spacing:.5px;vertical-align:middle}.accent{margin-left:5px;margin-right:10px;color:#fff;padding-right:35px;border-right:2px solid #9b9b9b}.resume .resume-btn{border:2px solid #3d7eff;padding:7px;border-radius:10px;background-color:transparent;color:#fff;letter-spacing:.3px;transition:all .5s ease}.resume .resume-btn:hover{background-color:#3d7eff;transform:scale(1.03);cursor:pointer}.menu-items{display:flex;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin:0 10px;border-radius:0 0 20px 20px;border:1px solid #9b9b9b;padding:0 15px;align-items:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff05;box-shadow:0 4px 18px #0000000f;flex-direction:column}.menu-item img{width:25px;height:25px}.menu-items span{color:#fff}.menu-items div{display:flex;width:100%;padding:10px 5px;margin:auto;justify-content:space-between;align-items:center;color:#e8ebed;border-bottom:1px solid #464646}.menu-items div:last-child{border:none}@media(max-width:768px){.quick-link{display:none}.accent{border-color:transparent}.tagline{font-size:.9rem}}.profile{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:1fr;margin:auto;gap:20px}.profile-about{grid-area:1 / 1 / 2 / 2;color:#fff;margin:30px;justify-content:center;align-items:center}.profile-about h1{display:inline-block;font-weight:600;margin:auto}.profile-about h5{margin:auto;font-size:14px;font-weight:300;margin-top:1rem;margin-bottom:1.5rem}.profile-about h3{margin:auto;font-size:16px;font-weight:600;margin-top:.8rem}.profile-img{grid-area:1 / 2 / 2 / 3;justify-content:center;align-items:center;margin:auto;width:300px;height:300px}main .contact-icons{display:inline-block}main .contact-icons img{width:35px;height:35px;gap:1rem;opacity:.7;margin:3px;padding:5px;transition:transform .5s ease}main .contact-icons img:hover{transform:scale(1.2);opacity:1}.skill-title{display:flex;justify-content:space-between;align-items:center;margin:15px 30px;color:#fff}.skill{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr;justify-content:center;align-items:center;text-align:center;margin:50px 20px;gap:20px}.skill .icon{display:inline-block;opacity:.7;width:80px;height:80px;margin-top:10px;margin-bottom:30px;justify-content:center;align-items:center;transition:all .3s ease}.skill .skill-name{margin:auto;color:#696969}.skill .icon:hover{transform:scale(1.1);opacity:1}.skill .skill-name-percentage{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:1rem;color:#fff;margin:auto 10px}.bar{height:10px;border-radius:20px;overflow:hidden}.full-bar{width:100%;height:10px;background:#888;border-radius:5px;overflow:hidden;margin-top:10px}.html{background-color:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:10px;height:200px;box-shadow:0 4px 20px #00000040;color:#fff;padding:15px;width:95%;margin:auto;transition:all .5s ease}.html:hover{border:1.3px solid rgba(169,169,169,.876)}.html .bar{background:#4da3ff;width:90%;animation:full-bar-html 6s ease}.css{background-color:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:10px;height:200px;box-shadow:0 4px 14px #0000004d;color:#fff;padding:15px;width:95%;margin:auto;transition:all .5s ease}.css:hover{border:1.3px solid rgba(169,169,169,.876)}.css .bar{background:#4da3ff;width:85%;animation:full-bar-css 6s ease}@keyframes full-bar-html{0%{width:0%}to{width:90%}}@keyframes full-bar-css{0%{width:0%}to{width:85%}}@keyframes full-bar-js{0%{width:0%}to{width:60%}}@keyframes full-bar-git{0%{width:0%}to{width:90%}}.js{background-color:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:10px;height:200px;box-shadow:0 0 20px #00000040;color:#fff;padding:15px;width:95%;margin:auto;transition:all .5s ease}.js:hover{border:1.3px solid rgba(169,169,169,.876)}.js .bar{background:#3d7eff;width:60%;animation:full-bar-js 4s ease}.git{background-color:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:10px;height:200px;box-shadow:0 4px 14px #0000004d;color:#fff;padding:15px;width:95%;margin:auto;transition:all .5s ease}.git:hover{border:1.3px solid rgba(169,169,169,.876)}.git .bar{background:#3d7eff;width:90%;animation:full-bar-git 4s ease}.project-title{display:flex;justify-content:space-between;align-items:center;margin:15px 30px;color:#fff}.projects{justify-content:center;text-align:center;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:30px;margin:20px 20px 30px}.projects h3{color:#fff;text-align:center;font-weight:600;font-size:1.1rem;margin-top:20px}.projects img{border-radius:25px;transition:all .3s ease;padding:10px;width:100%;height:55%}.projects img:hover{transform:scaleY(1.02);filter:brightness(85%)}.projects button{border-radius:10px;background-color:transparent;color:#fff;border:2px solid #3d7eff;cursor:pointer;width:90%;height:40px;transition:all .3s ease;margin:10px}.projects button:hover{transform:scale(1.03);background-color:#3d7eff}.project1{grid-area:1 / 1 / 3 / 3;background-color:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:10px;box-shadow:0 4px 12px #0000004d;padding:15px;transition:all .5s ease}.project1:hover{border:1.3px solid rgba(169,169,169,.876)}.project2{background-color:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:10px;box-shadow:0 4px 12px #0000004d;color:#fff;height:auto;padding:15px;grid-area:1 / 3 / 3 / 5;transition:all .5s ease}.project2:hover{border:1.3px solid rgba(169,169,169,.876)}.project3{background-color:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:10px;box-shadow:0 4px 12px #0000004d;color:#fff;height:auto;padding:15px;grid-area:3 / 1 / 5 / 3;transition:all .5s ease}.project3:hover{border:1.3px solid rgba(169,169,169,.876)}.project4{background-color:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:10px;box-shadow:0 4px 12px #0000004d;color:#fff;height:auto;padding:15px;grid-area:3 / 3 / 5 / 5;transition:all .5s ease}.project4:hover{border:1.3px solid rgba(169,169,169,.876)}.other-projects{display:flex;justify-content:center;align-items:center;margin:auto auto 30px}.other-projects h2:hover{transform:scale(1.05);border:1.3px solid}.other-projects h2{background-color:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:20px;box-shadow:0 4px 20px #0000004d;color:#fff;padding:15px;transition:all .5s ease}.about-title{display:flex;justify-content:space-between;align-items:center;margin:15px;color:#fff}.about{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:10px;background-color:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:20px;box-shadow:0 4px 20px #0000004d;color:#fff;padding:40px;margin:10px 15px 60px;transition:all .5s ease}.about:hover{border:1.3px solid rgba(169,169,169,.876)}.about-img{grid-area:1 / 1 / 3 / 3;display:flex;justify-content:center;align-items:center;margin:auto;padding:15px}.about-img img{width:80%;max-width:300px;height:auto;border-radius:50%;margin:auto}.about-info{grid-area:1 / 3 / 3 / 6;display:flex;flex-direction:column;justify-content:center;text-align:left}.about-info h3{font-weight:bolder;-webkit-background-clip:text;background-clip:text;color:transparent;animation:textcolor 1s infinite alternate}.about-info h5{font-weight:200;font-size:1rem}.about-info h3 img{border:1px solid white;border-radius:30%;margin-right:10px;vertical-align:middle;align-items:center;justify-content:center;width:30px;height:30px;padding:5px}@keyframes textcolor{0%{background:#69e4fd;-webkit-background-clip:text;background-clip:text;color:transparent}to{background:#e8ebed;-webkit-background-clip:text;background-clip:text;color:transparent}}.contact{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr;grid-column-gap:10px;justify-content:center;align-items:center;margin:60px 15px;padding:15px}.contact-img{grid-area:1 / 1 / 2 / 2}.contact-img2{grid-area:1 / 3 / 2 / 4}.contact img{display:flex;width:300px;height:300px;justify-content:center;align-items:center;margin:auto}form{grid-area:1 / 2 / 2 / 3;border:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:20px;box-shadow:0 0 20px #00000040;color:#fff;display:flex;background-color:#ffffff14;flex-direction:column;justify-content:center;align-items:center;padding:15px 15px 50px;width:90%;transition:all .5s ease}form:hover{border:1.3px solid rgba(169,169,169,.876)}form input{width:100%;height:40px;border:none;color:#fff;border-bottom:1px solid rgb(167,167,167);background-color:transparent;margin:10px;text-align:start}form button{width:95%;color:#fff;background-color:transparent;height:40px;border:2px solid #3d7eff;border-radius:10px;margin-top:30px;cursor:pointer;transition:all .3s ease}form button:hover{transform:scale(1.05);background-color:#3d7eff}input:focus{outline:none}input::placeholder{color:#fff}input:focus::placeholder{color:transparent}textarea{width:100%;height:50px;border:none;border-bottom:1px solid #ffffff;background-color:transparent;padding:10px;color:#fff;resize:none;justify-content:center;align-items:center;text-align:left}textarea::placeholder{color:#fff}textarea:focus::placeholder{color:transparent}textarea:focus{outline:none}.form h1{color:#fff}footer{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr;grid-column-gap:15px;grid-row-gap:0px;background:#0a0f18;color:#e2e8f0}.footer-about{grid-area:1 / 1 / 2 / 2}.footer-quick-links{grid-area:1 / 2 / 2 / 3}.footer-links{grid-area:1 / 3 / 2 / 4}.footer-contact{grid-area:1 / 4 / 2 / 5}footer hr{grid-column:1 / 5;border:none;border-top:1px solid white}footer .copyright{grid-column:1 / 5;text-align:center;font-size:14px;opacity:.8}footer div{margin:20px}footer a h5{color:#e2e8f0;transition:all .5s ease}footer a h5:hover{transform:scale(1.05)}footer img{width:20px;height:20px}footer .footer-quick-links h5{margin:15px}footer .footer-links h5{vertical-align:middle;display:inline-block;margin:5px;padding:2px}footer .footer-links img{vertical-align:middle}footer .footer-links div{margin:0}footer h4{text-align:center}.menu-btn{display:none;border:1px solid gray;background-color:transparent;border-radius:8px;padding:6px;color:#fff}.menu-items{max-height:0;opacity:0;overflow:hidden;transition:all .4s ease}.nav-after-menu{margin:20px 10px 0;border-radius:20px 20px 0 0}.menu-items-display{max-height:300px;opacity:1}.error{color:#ff4646;font-weight:500}@media(max-width:1024px){footer{grid-template-columns:repeat(2,1fr);grid-template-rows:auto auto auto;text-align:center}.projects img{height:40%}.footer-about{grid-area:1 / 1 / 2 / 2}.footer-quick-links{grid-area:1 / 2 / 2 / 3}.footer-links{grid-area:2 / 1 / 3 / 2}.footer-contact{grid-area:2 / 2 / 3 / 3}footer hr,footer .copyright{grid-column:1 / 3}.contact{display:flex;width:70%;margin:auto auto 30px}.contact-img{display:none}.about{display:flex;flex-wrap:wrap}}@media(max-width:768px){.profile{display:block}.skill{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);padding:12px;margin:50px 5px;gap:20px}.skill-name-percentage span:first-child{display:block;margin-bottom:8px;font-size:.8rem}.skill-name-percentage span:last-child{display:block;margin-bottom:8px;font-size:.8rem}.skill-title{display:block}.skill-title h4{display:none}.skill-title h2{text-align:center;justify-content:center;align-items:center}.project-title{display:block}.project-title h4{display:none}.project-title h2{text-align:center;justify-content:center;align-items:center}.projects{display:flex;flex-wrap:wrap}.projects img{height:48%}.contact{display:flex;width:100%;margin:auto auto 40px}.about-title{display:block}.about-title h4{display:none}.about-title h2{text-align:center;justify-content:center;align-items:center}footer{grid-template-columns:1fr;grid-template-rows:auto auto auto auto auto auto;text-align:center}.footer-about{grid-area:1 / 1 / 2 / 2}.footer-quick-links{grid-area:2 / 1 / 3 / 2}.footer-links{grid-area:3 / 1 / 4 / 2}.footer-contact{grid-area:4 / 1 / 5 / 2}footer hr,footer .copyright{grid-column:1 / 2}.about-img{grid-area:1 / 1 / 2 / 2;display:flex;justify-content:center;align-items:center;width:100%}.about-img img{width:60%;max-width:250px;height:auto;margin:0}.about-info{grid-area:2 / 1 / 3 / 2}}.brand-logo img{display:none}@media(max-width:480px){.menu-btn{display:block}.resume-btn{display:none}}@media(max-width:1100px){.contact img{display:none}}a{text-decoration:none}*{direction:ltr;box-sizing:border-box;font-family:Vazirmatn,Poppins}html{scroll-behavior:smooth}body{font-family:Montserrat,Poppins,sans-serif;font-size:16px;margin:0;cursor:default;-webkit-user-select:none;user-select:none}img{max-width:100%;height:auto}.poppins-thin{font-family:Poppins,sans-serif;font-weight:100;font-style:normal}.poppins-extralight{font-family:Poppins,sans-serif;font-weight:200;font-style:normal}.poppins-light{font-family:Poppins,sans-serif;font-weight:300;font-style:normal}.poppins-regular{font-family:Poppins,sans-serif;font-weight:400;font-style:normal}.poppins-medium{font-family:Poppins,sans-serif;font-weight:500;font-style:normal}.poppins-semibold{font-family:Poppins,sans-serif;font-weight:600;font-style:normal}.poppins-bold{font-family:Poppins,sans-serif;font-weight:700;font-style:normal}.poppins-extrabold{font-family:Poppins,sans-serif;font-weight:800;font-style:normal}.poppins-black{font-family:Poppins,sans-serif;font-weight:900;font-style:normal}.poppins-thin-italic{font-family:Poppins,sans-serif;font-weight:100;font-style:italic}.poppins-extralight-italic{font-family:Poppins,sans-serif;font-weight:200;font-style:italic}.poppins-light-italic{font-family:Poppins,sans-serif;font-weight:300;font-style:italic}.poppins-regular-italic{font-family:Poppins,sans-serif;font-weight:400;font-style:italic}.poppins-medium-italic{font-family:Poppins,sans-serif;font-weight:500;font-style:italic}.poppins-semibold-italic{font-family:Poppins,sans-serif;font-weight:600;font-style:italic}.poppins-bold-italic{font-family:Poppins,sans-serif;font-weight:700;font-style:italic}.poppins-extrabold-italic{font-family:Poppins,sans-serif;font-weight:800;font-style:italic}.poppins-black-italic{font-family:Poppins,sans-serif;font-weight:900;font-style:italic}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f4f3f3;border-radius:10px}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2c2c2c,#4a4a4a);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#2c2c2c,#4a4a4a)}hr{border:none;height:1px;width:100%;margin:2rem 0;background:#646464;opacity:.8}span,p,h1,h2,h3,h4,h5,h6{line-height:1.6}