.navbar{display:flex;width:100%;justify-content:space-between;background:var(--color-bg-primary);color:var(--color-text-primary);align-items:center;position:relative}.navbar ul{display:flex;padding:10px;gap:10px}.navbar ul li{padding:10px;border-radius:10px;transition:all .5s ease-in-out;cursor:pointer}.navbar ul li:hover{background-color:var( --color-bg-secondary)}.togle-menu{display:none}@media (max-width:950px){.togle-menu{display:block;padding:10px}.togle-menu i{font-size:30px}header .home{padding:10px}.navbar nav{display:block;position:absolute;background:var(--color-bg-primary);right:0cqb;top:45px;width:100%;height:0px;overflow:hidden;transition:all .5s ease-in-out;z-index:1000}.navbar nav ul{flex-direction:column;width:100%;text-align:center;height:300px}nav.menu-active{height:270px;overflow:hidden}}.hero{display:flex;width:100%;margin-top:30px;align-items:center;justify-content:center}.hero .left{width:30%;display:flex;flex-direction:column;gap:10px;align-items:center;opacity:0;transform:translateY(-200px);animation:slideIn .6s ease-out forwards}.hero .left a{background:var(--color-btn-bg);padding:10px;border-radius:20px;margin-top:10px;min-width:170px;text-align:center;transition:all .5s ease-in-out;font-size:18px;display:flex;align-items:center;justify-content:center;gap:10px}.hero .left a img{width:30px}.hero .left a:hover{background:var(--color-text-secondary);color:var(--color-btn-bg)}.hero .right{width:400px;height:400px;display:flex;align-items:flex-end;justify-content:center;opacity:0;transform:translateY(-200px);animation:slideIn .6s ease-out forwards}.hero .left p{font-size:24px}.hero .left p span{font-size:24px;background:linear-gradient(to left,var(--color-btn-bg),var(--color-text-secondary));-webkit-background-clip:text;background-clip:clip;color:transparent;font-weight:800}.hero .right img{width:100%;height:100%;border-radius:50%;padding:10px;box-shadow:inset 0 0 10px #adff2f}@media (max-width: 768px){.hero{flex-direction:column;margin-top:0}.hero .left,.hero .right{width:100%;height:auto}.hero .right img{margin-top:20px;width:300px;height:300px}.hero .left a{min-width:150px}.hero .left p{font-size:16px;padding:10px}.link-area{flex-direction:column}}.link-area{display:flex;gap:10px}.link-area a:nth-child(2){background:var(--color-text-secondary);color:var(--color-btn-bg)}.link-area a:nth-child(2):hover{background:var(--color-btn-bg);color:var(--color-text-secondary)}@media (max-width:300px){.hero .right img{width:100px;height:100px;padding:5px}.hero .right{padding:0}}.skills-container{display:flex;flex-direction:column;margin:10px 30px;gap:20px;text-align:center;opacity:0;transform:translateY(-200px);animation:slideIn .6s ease-out .5s forwards}.active{background:red}.skills-container h1{font-size:60px;font-weight:bolder}.skill-item h1{font-size:24px}.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;place-content:center}@keyframes slideIn{0%{opacity:0;transform:translateY(200px)}to{opacity:1;transform:translateY(0)}}.skill-item{box-shadow:0 0 5px var(--color-bg-primary);display:flex;align-items:center;flex-direction:column;padding:15px;transition:all .3s ease-in-out;border-radius:10px}.skill-item img{width:200px;transition:all .3s ease-in-out;padding:10px}.skill-item:hover{background:var(--color-bg-primary);color:#fff;scale:1.3}@media (max-width:680px){.skills-container h1{font-size:20px}.skill-item h1{font-size:16px}}@media (max-width:423px){.skill-item img{padding:0;width:100%}}.projects-container{display:flex;flex-direction:column;width:90%;margin:20px auto}.projects-container h1{text-align:center;margin:30px;font-size:60px}.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;padding-bottom:20px}.project,.project-card{position:relative;display:flex;flex-direction:column;align-items:center;box-shadow:0 12px 30px #00000014;gap:10px;width:100%;max-width:350px;padding:16px;background:#fff;border-radius:12px;overflow:hidden;font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;transform:translate(-100%,-100%) scale(.85);opacity:0;transition:transform .6s cubic-bezier(.22,.61,.36,1),opacity .4s}.project{background:var(--color-bg-primary)}.project.enter,.project-card.enter{transform:translate(0) scale(1);opacity:1}.project.exit,.project-card.exit{transform:translate(100%,100%) scale(.85);opacity:0;transition:transform .4s ease,opacity .3s ease}.project:nth-child(odd),.project-card:nth-child(odd){background:#fff}.project h1{font-size:1.25rem;margin:0;text-align:center}.project img{width:100%;height:auto;border-radius:8px;object-fit:cover}.project a{background:var(--color-btn-bg);padding:10px 14px;border-radius:10px;margin:10px auto;transition:background .25s ease-in-out,transform .2s;display:inline-block;text-decoration:none;color:inherit;font-weight:600}.project a:hover{background:var(--color-bg-primary);transform:translateY(-2px)}.disabled-link{pointer-events:none;opacity:.5;cursor:not-allowed;text-decoration:line-through}.project button{background:transparent;border:none;cursor:pointer;font-size:1rem;padding:4px}@media (max-width: 768px){.projects{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.project img{width:100%;height:auto}.projects-container h1{font-size:32px}.project h1{font-size:1rem}.project a{padding:8px 12px;font-size:14px;margin:8px auto}}.footer{background:var(--color-bg-primary);display:flex;align-items:center;padding:10px;justify-content:center}.social-icons{display:flex;gap:10px;margin:30px}.social-icons a{width:50px;height:50px;background:#000;display:flex;align-items:center;justify-content:center;border-radius:50%}.social-icons i{width:30px;font-size:30px;border-radius:50%;background:#000;display:flex;align-items:center;justify-content:center;padding:5px}.social-icons i:hover{font-size:35px;animation:animateFooterIcons 1s ease-in-out infinite;color:green}@keyframes animateFooterIcons{0%{transform:rotate(0)}50%{transform:rotate(360deg)}to{transform:rotate(0)}}@media (max-width: 600px){.footer{flex-direction:column;align-items:center}.social-icons{margin:10px}.social-icons a{width:20px;height:20px}.social-icons i{width:10px;font-size:10px}.social-icons i:hover{font-size:15px;animation:animateFooterIcons .5s ease-in-out infinite;color:#adff2f}}.container{display:flex;flex-direction:column;gap:20px}.contact-container{display:flex;flex-direction:column;width:100%;margin:20px auto;align-items:center}.contact-form{padding:10px;display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}.contact-container .contact-form form{background:var(--color-bg-primary);padding:10px;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;width:70%}.contact-container .contact-form form .input-field{display:flex;align-items:flex-start;flex-direction:column;gap:10px;width:100%}.contact-container .contact-form form .input-field input{width:100%;padding:10px;outline:none;border:0}.contact-container .contact-form form .input-field textarea{width:100%;max-width:100%;min-width:70%;min-height:150px;max-height:150px;padding:10px;display:flex;align-self:center;outline:none}@media (max-width: 600px){.contact-container .contact-form form{width:100%}form button[type=submit]{width:100%;font-size:15px;padding:10px;margin-top:10px}form button[type=submit]:hover{background:green;color:#fff}.contact-container h1{font-size:16px}}label{color:#fff;font-size:24px}button[type=submit]{background:var(--color-bg-secondary);color:var( --color-text-secondary);font-size:18px;text-align:center;padding:10px;border-radius:10px;width:70%;border:0;font-weight:bolder;cursor:pointer;transition:all .5s ease-in-out}button[type=submit]:hover{color:green}.error{color:red;font-size:16px;animation:animateMessage .3s infinite forwards}.success{animation:animateMessage .3s infinite forwards;color:green}@keyframes animateMessage{0%,50%{transform:translate(-10px);background:#fff;padding:10px;border-radius:10px}to,0%{transform:translate(10px);background:#fff;padding:10px;border-radius:10px}}:root{--color-bg-primary:#3D3D3D;--color-bg-secondary:#578E7E;--color-text-primary:#FFFAEC;--color-text-secondary:#F5ECD5;--color-btn-bg:#F14A00;--font-poppins:poppins,"sans-serif" }*{padding:0;margin:0;box-sizing:border-box}a{color:var(--color-text-primary);font-size:24px;font-weight:800;text-decoration:none}ul{list-style:none}body{background:#578e7e;font-family:var(--font-poppins)}html{scroll-behavior:smooth}