.topbar{width:100%;height:70px;background-color:#1e1e2d;color:#fff;position:fixed;top:0;z-index:3;transition:all .3s ease;border-bottom:1px solid rgba(255,255,255,.05)}.topbar.active{background-color:#6c5ce7;color:#fff;border-bottom:none}.topbar.active .hamburger span{background-color:#fff!important}.topbar .wrapper{padding:10px 30px;display:flex;align-items:center;justify-content:space-between;height:100%}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.topbar .wrapper{padding:10px 20px}}.topbar .wrapper .left{display:flex;align-items:center}.topbar .wrapper .left .logo{font-size:32px;font-weight:700;text-decoration:none;color:inherit;font-family:Outfit,sans-serif;margin-right:40px;background:linear-gradient(90deg,#fff,#00cec9);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.topbar .wrapper .left .active .logo{background:none;-webkit-text-fill-color:white;color:#fff}.topbar .wrapper .left .itemContainer{display:flex;align-items:center;margin-left:30px}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.topbar .wrapper .left .itemContainer{display:none}}.topbar .wrapper .left .itemContainer .icon{font-size:18px;margin-right:5px;color:#00cec9}.topbar .wrapper .left .itemContainer span{font-size:15px;font-weight:500}.topbar .wrapper .left .itemContainer span a{text-decoration:none;color:inherit;transition:color .2s}.topbar .wrapper .left .itemContainer span a:hover{color:#00cec9}.topbar .wrapper .right .hamburger{width:32px;height:25px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer}.topbar .wrapper .right .hamburger span{width:100%;height:3px;background-color:#fff;transform-origin:left;transition:all 1s ease}.intro{background-color:#0f0f16;display:flex;overflow:hidden;position:relative}.intro:before{content:"";position:absolute;top:-10%;left:-10%;width:50%;height:50%;background:radial-gradient(circle,#6c5ce733,#0000 70%);z-index:0}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.intro{flex-direction:column;align-items:center}}.intro .left{flex:.5;overflow:visible;display:flex;justify-content:center;align-items:center;z-index:1}.intro .left .imgContainer{width:400px;height:400px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(135deg,#6c5ce766,#00cec933);box-shadow:0 0 50px #6c5ce74d;padding:10px}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.intro .left .imgContainer{width:250px;height:250px;margin-top:30px}}@media(max-width:768px)and (max-height:500px),(max-height:500px)and (orientation:landscape)and (max-height:500px){.intro .left .imgContainer{width:150px;height:150px;margin-top:10px}}.intro .left .imgContainer img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:4px solid #1e1e2d}.intro .right{flex:.5;position:relative;z-index:1}.intro .right .wrapper{width:100%;height:100%;padding-left:50px;display:flex;flex-direction:column;justify-content:center}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.intro .right .wrapper{align-items:center;text-align:center;padding:20px}}.intro .right .wrapper h2{font-size:30px;font-weight:300;color:#fff;margin-bottom:10px}.intro .right .wrapper h1{font-size:64px;margin:10px 0;font-weight:800;background:linear-gradient(to right,#fff,#6c5ce7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.intro .right .wrapper h1{font-size:40px}}.intro .right .wrapper h3{font-size:30px;color:#a6a6b0}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.intro .right .wrapper h3{font-size:20px}}.intro .right .wrapper h3 span{font-size:inherit;color:#00cec9;font-weight:600}.intro .right .wrapper h3 .ityped-cursor{animation:blink 1s infinite;color:#fff}@keyframes blink{50%{opacity:1}to{opacity:0}}.intro .right a{position:absolute;bottom:30px;left:50%;transform:translate(-50%)}.intro .right a img{width:30px;animation:arrowBlink 2s infinite;filter:invert(1)}@keyframes arrowBlink{to{opacity:0;transform:translate(-50%,10px)}}.experience{background-color:#0f0f16;display:flex;flex-direction:column;align-items:center;position:relative}.experience h1{font-size:50px;margin-top:50px;font-weight:800;background:linear-gradient(90deg,#fff,#6c5ce7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.experience h1{font-size:30px}}.experience .container{width:100%;height:80%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.experience .container{flex-direction:column;height:auto;padding-bottom:50px}}.experience .container .card{width:300px;height:350px;border-radius:20px;background:#1e1e2d;margin:20px;box-shadow:0 10px 40px #0006;display:flex;flex-direction:column;justify-content:space-between;padding:30px;transition:all .4s ease;border:1px solid rgba(255,255,255,.05)}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.experience .container .card{width:80%;height:auto}}.experience .container .card:hover{transform:translateY(-10px);box-shadow:0 20px 50px #6c5ce733;border:1px solid #6c5ce7}.experience .container .card .top{display:flex;align-items:center;justify-content:space-between}.experience .container .card .top img.left{height:25px;filter:invert(1);opacity:.5}.experience .container .card .top img.right{height:25px;filter:invert(1)}.experience .container .card .top img.user{height:60px;width:60px;border-radius:50%;object-fit:cover;border:2px solid #6c5ce7}.experience .container .card .center{padding:10px 0;font-size:16px;color:#a6a6b0;line-height:1.6;font-style:italic}.experience .container .card .bottom{display:flex;flex-direction:column;align-items:flex-start}.experience .container .card .bottom h3{margin-bottom:5px;color:#fff;font-weight:600}.experience .container .card .bottom h4{color:#00cec9;font-size:14px}.contact{background:radial-gradient(circle at center,#1e1e2d,#0f0f16);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:50px 0;position:relative}.contact .container{width:90%;max-width:1200px;display:flex;flex-wrap:wrap;gap:50px;justify-content:center;align-items:flex-start}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.contact .container{flex-direction:column;align-items:center;gap:30px}}.contact .container .contact-info{flex:1;min-width:300px;display:flex;flex-direction:column;align-items:flex-start}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.contact .container .contact-info{align-items:center;text-align:center;width:100%}}.contact .container .contact-info h1{font-size:50px;margin-bottom:10px;background:linear-gradient(90deg,#fff,#00cec9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-family:Outfit,sans-serif}.contact .container .contact-info .subtitle{font-size:18px;color:#a6a6b0;margin-bottom:40px}.contact .container .contact-info .info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;width:100%}.contact .container .contact-info .info-cards .card{text-decoration:none;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:15px;padding:20px;display:flex;align-items:center;gap:15px;transition:all .3s ease;cursor:pointer}.contact .container .contact-info .info-cards .card:hover{background:#ffffff1a;transform:translateY(-5px);border-color:#6c5ce7}.contact .container .contact-info .info-cards .card:hover .icon-box{background-color:#6c5ce7;color:#fff}.contact .container .contact-info .info-cards .card .icon-box{width:50px;height:50px;background-color:#ffffff1a;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#00cec9;transition:all .3s ease;flex-shrink:0}.contact .container .contact-info .info-cards .card .icon-box .icon{font-size:24px}.contact .container .contact-info .info-cards .card .details{display:flex;flex-direction:column;overflow:hidden}.contact .container .contact-info .info-cards .card .details h3{font-size:16px;color:#fff;margin-bottom:4px}.contact .container .contact-info .info-cards .card .details span{font-size:14px;color:#a6a6b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact .container .contact-form{flex:1;min-width:300px;max-width:500px;background:#1e1e2d99;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:40px;border-radius:20px;border:1px solid rgba(255,255,255,.05);box-shadow:0 10px 30px #0000004d}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.contact .container .contact-form{width:100%;padding:30px 20px}}@media(max-width:768px)and (max-height:500px),(max-height:500px)and (orientation:landscape)and (max-height:500px){.contact .container .contact-form{padding:20px}}.contact .container .contact-form h2{font-size:30px;margin-bottom:30px;color:#fff;font-family:Outfit,sans-serif}.contact .container .contact-form form{display:flex;flex-direction:column;gap:20px}.contact .container .contact-form form input,.contact .container .contact-form form textarea{width:100%;padding:15px;border-radius:10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#fff;font-size:16px;font-family:Inter,sans-serif;transition:all .3s ease}.contact .container .contact-form form input::placeholder,.contact .container .contact-form form textarea::placeholder{color:#ffffff4d}.contact .container .contact-form form input:focus,.contact .container .contact-form form textarea:focus{outline:none;border-color:#6c5ce7;background:#ffffff1a}.contact .container .contact-form form textarea{height:150px;resize:none}.contact .container .contact-form form button{padding:15px;border:none;background:linear-gradient(90deg,#6c5ce7,#8e44ad);color:#fff;font-weight:600;font-size:18px;border-radius:10px;cursor:pointer;transition:transform .2s,box-shadow .2s;margin-top:10px}.contact .container .contact-form form button:hover{transform:scale(1.02);box-shadow:0 5px 15px #6c5ce766}.contact .container .contact-form form span{text-align:center;color:#00cec9;margin-top:10px;font-weight:500}.portfolioList{font-size:16px;margin:0 15px;padding:10px 20px;border-radius:20px;cursor:pointer;color:#a6a6b0;transition:all .3s ease;background-color:transparent;border:1px solid transparent}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.portfolioList{margin:5px;padding:5px 10px;font-size:14px}}.portfolioList:hover{color:#fff;background-color:#ffffff0d}.portfolioList.active{background-color:#6c5ce7;color:#fff;box-shadow:0 0 15px #6c5ce766;border:1px solid #6c5ce7}.portfolio{background-color:#0f0f16;display:flex;flex-direction:column;align-items:center}.portfolio h1{font-size:50px;margin-top:10px;font-weight:800;background:linear-gradient(90deg,#fff,#6c5ce7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.portfolio h1{font-size:24px;margin-top:20px}}.portfolio ul{margin:20px 10px;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.portfolio ul{margin:10px 0}}.portfolio .container{width:80%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px;margin-bottom:30px}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.portfolio .container{width:100%;gap:10px}}.portfolio .container .item{width:250px;height:170px;border-radius:15px;overflow:hidden;margin:0;display:flex;align-items:center;justify-content:center;position:relative;transition:all .4s ease;cursor:pointer;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 15px #0000004d;background-color:#1e1e2d}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.portfolio .container .item{width:140px;height:100px}}.portfolio .container .item h3{position:absolute;font-size:20px;font-weight:600;z-index:2;opacity:0;transition:opacity .3s ease;text-align:center;width:100%;color:#fff}.portfolio .container .item .project-link{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-decoration:none;position:relative}.portfolio .container .item .project-link img{width:100%;height:100%;object-fit:cover;z-index:1;transition:all .4s ease}.portfolio .container .item .project-link h3{position:absolute;font-size:20px;font-weight:600;z-index:2;opacity:0;transition:opacity .3s ease;text-align:center;width:100%;color:#fff}.portfolio .container .item img{width:100%;height:100%;object-fit:cover;z-index:1;transition:all .4s ease}.portfolio .container .item:hover{transform:scale(1.05);border-color:#6c5ce7}.portfolio .container .item:hover .project-link img{opacity:.2;filter:blur(2px)}.portfolio .container .item:hover .project-link h3{opacity:1}.portfolio .container.skills .item,.portfolio .container.tools .item,.portfolio .container.frameworks .item,.portfolio .container.certifications .item{width:150px;height:150px;padding:20px;background-color:#ffffff0d;flex-direction:column;justify-content:space-between}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.portfolio .container.skills .item,.portfolio .container.tools .item,.portfolio .container.frameworks .item,.portfolio .container.certifications .item{width:100px;height:100px;padding:10px}}.portfolio .container.skills .item img,.portfolio .container.tools .item img,.portfolio .container.frameworks .item img,.portfolio .container.certifications .item img{width:60%;height:60%;object-fit:contain;z-index:1;opacity:1!important;filter:none!important}.portfolio .container.skills .item h3,.portfolio .container.tools .item h3,.portfolio .container.frameworks .item h3,.portfolio .container.certifications .item h3{position:static;opacity:1;font-size:14px;margin-top:10px;color:#a6a6b0}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.portfolio .container.skills .item h3,.portfolio .container.tools .item h3,.portfolio .container.frameworks .item h3,.portfolio .container.certifications .item h3{font-size:10px}}.portfolio .container.skills .item:hover,.portfolio .container.tools .item:hover,.portfolio .container.frameworks .item:hover,.portfolio .container.certifications .item:hover{background-color:#6c5ce733}.portfolio .container.skills .item:hover h3,.portfolio .container.tools .item:hover h3,.portfolio .container.frameworks .item:hover h3,.portfolio .container.certifications .item:hover h3{color:#fff}.portfolio .container.skills .item:hover img,.portfolio .container.tools .item:hover img,.portfolio .container.frameworks .item:hover img,.portfolio .container.certifications .item:hover img{transform:scale(1.1)}.skills{background-color:#1e1e2d;display:flex;flex-direction:column;align-items:center;padding:50px 0;text-align:center;min-height:100vh}.skills h1{font-size:50px;margin-bottom:40px;font-weight:800;background:linear-gradient(90deg,#fff,#6c5ce7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.skills h1{font-size:30px;margin-bottom:20px}}@media(max-width:768px)and (max-height:500px),(max-height:500px)and (orientation:landscape)and (max-height:500px){.skills h1{font-size:24px;margin-bottom:10px}}.skills .container{width:80%;display:flex;flex-direction:column;gap:50px}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.skills .container{width:95%;gap:30px}}.skills .container .category{background:#ffffff05;padding:20px;border-radius:20px;border:1px solid rgba(255,255,255,.05)}.skills .container .category h2{font-size:30px;color:#a6a6b0;margin-bottom:20px;text-align:left;margin-left:20px}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.skills .container .category h2{font-size:20px;text-align:center;margin-left:0}}.skills .container .category .items{display:flex;flex-wrap:wrap;justify-content:center;gap:30px}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.skills .container .category .items{gap:15px}}.skills .container .category .items .item{width:120px;height:120px;background-color:#0f0f16;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px;transition:all .3s ease;border:1px solid rgba(255,255,255,.1);box-shadow:0 5px 15px #0003}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.skills .container .category .items .item{width:90px;height:90px;padding:10px}}.skills .container .category .items .item img{width:50px;height:50px;object-fit:contain;margin-bottom:10px;transition:all .3s ease}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.skills .container .category .items .item img{width:35px;height:35px}}.skills .container .category .items .item h3{font-size:14px;color:#a6a6b0;font-weight:500;margin:0}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.skills .container .category .items .item h3{font-size:10px}}.skills .container .category .items .item:hover{transform:translateY(-5px);border-color:#6c5ce7;box-shadow:0 10px 20px #6c5ce733}.skills .container .category .items .item:hover h3{color:#fff}.skills .container .category .items .item:hover img{transform:scale(1.1)}.app{height:100vh}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.app{height:auto}}.app{background-color:#0f0f16;color:#fff;font-family:Inter,sans-serif}.app .sections{width:100%;height:calc(100vh - 70px);position:relative;top:70px;scroll-behavior:smooth;scroll-snap-type:y mandatory;scrollbar-width:none}.app .sections::-webkit-scrollbar{display:none}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.app .sections{height:auto;scroll-snap-type:none}}.app .sections>*{width:100vw;height:calc(100vh - 70px);scroll-snap-align:start;overflow:hidden}@media(max-width:768px),(max-height:500px)and (orientation:landscape){.app .sections>*{height:auto;min-height:calc(100vh - 70px);scroll-snap-align:none;overflow:visible;padding-bottom:2rem}}.menu{width:300px;height:100vh;background-color:#1e1e2df2;border-left:1px solid rgba(255,255,255,.1);position:fixed;top:0;right:-300px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .5s cubic-bezier(.77,.2,.05,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.menu.active{right:0;box-shadow:-10px 0 30px #00000080}.menu ul{margin:0;padding:0;list-style:none;font-size:30px;font-weight:300;color:#a6a6b0;width:60%}.menu ul li{margin-bottom:25px}.menu ul li a{font-size:inherit;color:inherit;text-decoration:none;transition:all .3s ease;position:relative}.menu ul li a:hover{color:#6c5ce7;padding-left:10px}.menu ul li a:after{content:"";position:absolute;width:0;height:2px;bottom:-5px;left:0;background-color:#6c5ce7;transition:width .3s ease}.menu ul li a:hover:after{width:100%}
