*{box-sizing:border-box;margin:0;padding:0}:root{--purple: #6610f2}html{font-size:62.5%;scroll-behavior:smooth}body{background-color:#f9f9f9;font-family:Poppins,sans-serif;position:relative}nav{font-size:1.7rem;width:100%;height:auto;padding:25px 40px 25px 50px;display:flex;position:fixed;justify-content:space-between;background-color:#fff;top:0;left:0;box-shadow:0 0 10px #00000017;z-index:200;align-items:center}nav ul{display:flex;list-style:none;gap:2rem}nav ul a:hover{color:var(--purple)}nav ul a{color:#2d2e32;text-decoration:none;transition:color 1s;font-weight:600;position:relative}nav ul a:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background-color:#000;transform-origin:center;transition:transform .5s,width .3s;transform:scaleX(0)}nav ul a:hover:after{transform:scaleX(1);background-color:var(--purple)}nav ul a:after{transition:transform .5s,width .3s,background-color .5s}.logo{cursor:pointer;color:var(--purple);animation:colorTransition 5s infinite}.sidebar{background-color:#fff;position:fixed;top:0;right:0;height:100vh;width:100vw;z-index:999;box-shadow:-10px 0 10px #0000001a;display:none;flex-direction:column;align-items:center;justify-content:center}.sidebar a{font-size:1.5em}.mainbar li:last-child{cursor:pointer}.sidebar li:first-child{cursor:pointer}@keyframes colorTransition{0%{color:var(--purple)}25%{color:#2d2e32}50%{color:var(--purple)}75%{color:#2d2e32}to{color:var(--purple)}}@media (min-width: 1001px){.mainbar li:last-child{display:none}}@media (max-width: 1000px){.mainbar li:not(:last-child){display:none}}::-webkit-scrollbar{width:20px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#d6dee1;border-radius:20px;border:6px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background-color:#a8bbbf}.maincontainer{height:100vh;width:100%}.hero-main{display:flex;align-items:center;justify-content:center;gap:10rem;margin-left:5rem;margin-right:5rem;margin-top:10rem}.tech-stack{display:flex;align-items:center;justify-content:center;gap:10rem;margin-left:5rem;margin-right:5rem;margin-top:2.5rem}.tech-text{display:flex;flex-direction:column;font-family:inherit;margin-left:5rem;margin-right:5rem;width:550px}.tech-text h1{color:#2d2e32;font-size:5.5rem;line-height:1.2;margin-bottom:2rem;margin-top:2rem}.tech-text p{color:#555;font-family:Mulish,sans-serif;font-size:1.9rem;font-weight:500;line-height:1.6}.tech-text p span{padding-right:2rem;border-right:2px solid rgba(45,46,50,.5)}.icon-box{height:10rem;position:relative;width:45rem;display:flex;justify-content:center}.icon-box ul{display:flex;list-style-type:none;margin:auto;gap:1.5rem;justify-content:center}.icon-box ul li{align-items:center;cursor:pointer;transition:transform .2s ease;position:relative}.icon-box ul li:before{content:"";position:absolute;top:-10px;left:50%;transform:translate(-50%);width:6px;height:6px;border-radius:50%;background-color:var(--purple);opacity:0;transition:opacity .5s ease}.icon-box ul li:hover{transform:translateY(-5px)}.icon-box ul li:hover:before{animation:fireworks .5s linear infinite}@keyframes fireworks{0%{transform:translate(-50%) translateY(0) scale(1);opacity:1}to{transform:translate(-50%) translateY(-50px) scale(0);opacity:0}}.hero-text{display:flex;flex-direction:column;font-family:inherit;margin-left:5rem;margin-right:5rem;width:550px;text-align:center}.hero-text h1{color:#2d2e32;font-size:5.5rem;line-height:1.2;margin-bottom:2rem;margin-top:2rem;min-height:6.6rem;display:flex;align-items:center;justify-content:center}.hero-text p{color:#555;font-family:Mulish,sans-serif;font-size:1.9rem;font-weight:500;line-height:1.6}.hero-img{-webkit-animation:morph 8s ease-in-out infinite;animation:morph 8s ease-in-out infinite;background-image:url(/assets/bilal-Gr5_Qf2H.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;border:3px solid #2d2e32;border-radius:60% 40% 30% 70%/60% 30% 70% 40%;height:45rem;position:relative;transition:all 1s ease-in-out;width:45rem;box-shadow:0 10px 30px #0003}.icons{font-size:2.5rem;display:flex;gap:1rem;align-items:center}.icons a{color:#000}.social-links{display:flex;align-items:center;gap:1rem;margin-top:1rem}.social-text{font-size:1.4rem;color:#767676;font-weight:500}.hero-cta{display:flex;gap:1.5rem;margin-top:2rem;margin-bottom:2rem}.cta-button{background-color:var(--purple);color:#fff;padding:1.2rem 2.5rem;border-radius:.8rem;text-decoration:none;font-weight:600;font-size:1.6rem;transition:all .3s ease;border:2px solid var(--purple);display:inline-block}.cta-button:hover{background-color:transparent;color:var(--purple);transform:translateY(-2px);box-shadow:0 5px 15px #6610f24d}.cta-button.secondary{background-color:transparent;color:var(--purple);border:2px solid var(--purple)}.cta-button.secondary:hover{background-color:var(--purple);color:#fff;transform:translateY(-2px);box-shadow:0 5px 15px #6610f24d}@media (max-width: 1000px){.hero{height:auto;padding:11rem 0}.icons{justify-content:center}.social-links{justify-content:center;flex-direction:column;gap:.5rem}.hero-cta{justify-content:center;flex-direction:column;align-items:center}.cta-button{width:200px;text-align:center}.icon-box ul{display:flex;list-style-type:none;margin:auto;gap:1rem;justify-content:center}.tech-text p span{padding-right:0;border-bottom:2px solid rgba(45,46,50,.5);border-right:none}}@media (max-width: 1000px){.hero-main{flex-direction:column-reverse;text-align:center;height:auto;gap:3rem}.tech-stack{flex-direction:column;text-align:center;height:auto;gap:3rem}.hero-text h1{color:#2d2e32;font-size:2.4rem;line-height:1.2;margin-bottom:2rem;margin-top:2rem;min-height:4.2rem;display:flex;align-items:center;justify-content:center}.hero-text,.tech-text,.icon-box{width:300px}}@media (max-width: 1000px){.hero-img{height:25rem;position:relative;transition:all 1s ease-in-out;width:25rem}}@keyframes morph{0%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}50%{border-radius:30% 60% 70% 40%/50% 60% 30%}to{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}}.about-container{background-color:#fff;padding-top:2.5rem;padding-bottom:8rem}.about-content{display:grid;grid-template-columns:41rem 41rem;justify-content:center;align-items:center;margin-top:2.5rem;margin-bottom:10rem;gap:7.5rem}.about-img{background-image:url(https://wallpapers.com/images/featured/4k-laptop-yn553k4gdhpc4hlh.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:1.7rem;box-shadow:0 0 10px #00000017}@media (max-width: 600px){.about-content{grid-template-columns:1fr;text-align:center;padding:0 2rem;gap:2rem}.about-img,.about-me,.img-container-project,.info-right{margin-left:auto;margin-right:auto;width:100%;max-width:35rem}.about-container{padding-bottom:8rem}.icon-box ul li img{width:100%;height:auto}.maincontainer{margin-bottom:25rem}.img-container-project{margin:auto;height:20rem;width:31rem}}@media (min-width: 601px) and (max-width: 968px){.about-content,.grid-container{grid-template-columns:1fr;text-align:center;margin-top:2rem;margin-bottom:5rem}.about-content{gap:2rem}.about-img,.about-me,.info-right{height:31rem;width:35rem;margin-left:auto;margin-right:auto}.img-container-project{margin:auto;height:30rem;width:46rem}}@media (min-width: 969px){.about-img,.about-me{height:35rem;width:41rem}.grid-container{grid-template-columns:55% 45%;margin-top:10rem;margin-bottom:10rem}.img-container-project{margin-left:auto;margin-right:0;height:35rem;width:55rem}}.h1-about-me{font-size:1.7rem;margin-bottom:1rem;font-weight:700;background-image:linear-gradient(to right,purple,#00f 80%);color:transparent;background-clip:text;-webkit-background-clip:text}.h1-dev-type{font-size:2.5rem;color:#2d2e32;line-height:1.4;margin-bottom:2rem}.p-dev-info{color:#767676;font-family:Mulish,sans-serif;font-size:1.7rem;font-weight:500;line-height:1.5;margin-bottom:2rem}.Projects-container .header h2{color:var(--purple);font-size:2.2rem}.Projects-container .header h3{font-size:1.6rem}.Projects-container .header{text-align:center;margin-top:5rem;margin-bottom:4rem}.grid-container{display:grid;gap:5rem}.img-container-project{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:1.7rem;box-shadow:0 0 10px #00000017}.img-container-project.zero{background-image:url(/assets/1754954876458-Dpg4XjPM.jpg)}.img-container-project.one{background-image:url(/assets/project-4-sight-tNIXXFtl.png)}.img-container-project.two{background-image:url(/assets/energisuite-vv3s1H3x.png)}.img-container-project.three{background-image:url(/assets/EnergiReaperReborn-Bk1SgpVR.png)}.img-container-project.four{background-image:url(/assets/nemo-the-duck-bot-COt0qUJM.png)}.info-right{height:35rem;width:35rem}.info-right .title{color:#2d2e32;font-size:2rem;font-weight:700;text-align:center}.project-info{text-align:center;margin-top:1rem;font-size:1.5rem;padding:1rem;line-height:1.4;color:#767676}.project-languages ul{list-style:none;text-align:center;list-style-type:none;margin-bottom:2rem}.project-languages ul li{color:var(--purple)}.project-languages li{display:inline-block;margin-right:10px;background-color:#f0f0f0;padding:5px 10px;border-radius:5px;margin-top:5px}.project-links{display:flex;justify-content:center;gap:1.5rem;margin-top:2rem}.project-links .cta-button{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-size:1.2rem;min-width:100px}.links{margin-top:10px;text-align:center}.icons-project{font-size:24px}.icons-project a{color:#333;text-decoration:none}.icons-project a:hover{color:#000}.contact-container{background-color:#f9f9f9;padding:8rem 0;min-height:100vh}.contact-content{max-width:1200px;margin:0 auto;padding:0 2rem}.contact-header{text-align:center;margin-bottom:6rem}.contact-header h2{color:var(--purple);font-size:2.5rem;font-weight:700;margin-bottom:1rem}.contact-header h3{color:#555;font-size:1.6rem;font-weight:400;font-family:Mulish,sans-serif}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:6rem;margin-bottom:4rem}.contact-info{display:flex;flex-direction:column;gap:3rem}.contact-item{display:flex;align-items:flex-start;gap:2rem;padding:2rem;background:#fff;border-radius:1rem;box-shadow:0 5px 20px #00000014;transition:transform .3s ease,box-shadow .3s ease}.contact-item:hover{transform:translateY(-5px);box-shadow:0 10px 30px #00000026}.contact-icon{width:5rem;height:5rem;background:linear-gradient(135deg,var(--purple),#8b5cf6);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.contact-icon i{color:#fff;font-size:1.8rem}.contact-details h4{color:#2d2e32;font-size:1.8rem;font-weight:600;margin-bottom:.5rem}.contact-details p{color:#555;font-size:1.4rem;margin-bottom:.5rem;font-family:Mulish,sans-serif}.contact-details a{color:var(--purple);text-decoration:none;font-weight:600;font-size:1.3rem;transition:color .3s ease}.contact-details a:hover{color:#8b5cf6}.contact-details span{color:#767676;font-size:1.2rem;font-style:italic}.contact-cta{background:#fff;padding:4rem;border-radius:1rem;box-shadow:0 5px 20px #00000014;display:flex;align-items:center;justify-content:center}.cta-content{text-align:center;max-width:50rem}.cta-content h3{color:#2d2e32;font-size:2.5rem;font-weight:700;margin-bottom:2rem}.cta-content p{color:#555;font-size:1.6rem;line-height:1.6;margin-bottom:3rem;font-family:Mulish,sans-serif}.cta-buttons{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap}.cta-button{display:inline-flex;align-items:center;gap:1rem;padding:1.5rem 3rem;border-radius:.8rem;text-decoration:none;font-weight:600;font-size:1.6rem;transition:all .3s ease;border:2px solid transparent}.cta-button.primary{background:linear-gradient(135deg,var(--purple),#8b5cf6);color:#fff}.cta-button.primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px #6610f24d}.cta-button.secondary{background:transparent;color:var(--purple);border:2px solid var(--purple)}.cta-button.secondary:hover{background:var(--purple);color:#fff;transform:translateY(-2px);box-shadow:0 10px 25px #6610f24d}.social-contact{text-align:center;padding:4rem 0;background:#fff;border-radius:1rem;box-shadow:0 5px 20px #00000014}.social-contact p{color:#555;font-size:1.6rem;margin-bottom:2rem;font-family:Mulish,sans-serif}.social-links-contact{display:flex;justify-content:center;gap:3rem}.social-links-contact a{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;background:#f8f9fa;border-radius:1rem;text-decoration:none;color:#2d2e32;transition:all .3s ease;min-width:12rem}.social-links-contact a:hover{background:var(--purple);color:#fff;transform:translateY(-5px);box-shadow:0 10px 25px #6610f24d}.social-links-contact a i{font-size:2.5rem}.social-links-contact a span{font-weight:600;font-size:1.4rem}@media (max-width: 768px){.project-links .cta-button{width:auto}}@media (max-width: 768px){.contact-container{padding-top:4rem}.contact-grid{grid-template-columns:1fr;gap:4rem}.contact-cta{padding:2rem}.contact-item{flex-direction:column;align-items:center;text-align:center;gap:1.5rem}.cta-buttons{flex-direction:column;align-items:center}.cta-button{width:100%;max-width:30rem;justify-content:center}.social-links-contact{flex-direction:column;gap:2rem;align-items:center}.social-links-contact a{flex-direction:row;min-width:auto;width:100%;max-width:25rem}}@media (max-width: 480px){.contact-content{padding:0 1rem}.contact-header h2{font-size:2rem}.contact-header h3{font-size:1.4rem}.contact-cta{padding:1.5rem}.cta-content h3{font-size:2rem}.cta-content p{font-size:1.4rem}}