@import "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";::-webkit-scrollbar{width:.7rem}::-webkit-scrollbar-track{border:7px solid #292c3b;border-radius:4px;box-shadow:inset 0 0 2.5px 2px #00000080}::-webkit-scrollbar-thumb{background:#999;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#555}html{scroll-behavior:smooth}*{box-sizing:border-box;margin:0;padding:0;font-family:Roboto,sans-serif}:root{--main-color:#000;--seccandry-color:#18181b;--border:#3f3f4666;--text-color-title:#fff;--text-color-subtitle:#a1a1aa;--bgHeader:#27272a;--blue:#5dbcfc;--icon-hover:#d4d4d8;--app-padding:4rem}body.light{--main-color:#fafafa;--seccandry-color:#fff;--border:#cacaca84;--text-color-title:#27272a;--text-color-subtitle:#52525b;--bgHeader:#fdfdfd;--blue:#0095f6;--icon-hover:#333}body{background-color:var(--main-color);color:#fff}.border{border:1px solid red}a{color:initial;text-decoration:none}ul{list-style:none}.app{background-color:var(--seccandry-color);border:2px solid var(--border);width:80%;padding:0 var(--app-padding);margin:0 auto}.divider{border-bottom:1px solid var(--border);width:calc(100% + var(--app-padding) + var(--app-padding));margin:3rem 0;margin-left:calc(-1*var(--app-padding))}.flex{display:flex}button{cursor:pointer}button:active{scale:.8}button.top-arrow{color:#fff;opacity:0;background-color:#1976d2d9;border:none;border-radius:50%;width:45px;height:45px;line-height:50px;transition:opacity .5s,background-color .3s;position:fixed;bottom:20px;right:50px}button.top-arrow:hover{background-color:#1976d2}button.top-arrow.show{opacity:1}@media (max-width:1076px){.app{--app-padding:2.4rem;width:90%}button.top-arrow{right:30px}}@media (max-width:600px){.app{--app-padding:2rem;width:98%}}header{justify-content:space-between;align-items:center;margin-top:1.5rem;padding:0 2.4rem;display:flex}header nav{background-color:var(--bgHeader);border-radius:30px;padding:12px 25px;box-shadow:1px 1px 40px #2323243f}header ul{gap:16px}header ul li a{color:var(--text-color-title);opacity:.8;font-size:15px;font-weight:500;transition:all .3s}header ul li a:hover{color:var(--blue);opacity:1;font-size:16px}header button{font-size:1.2rem}header button.btn-mode,header button.btn-show{background-color:var(--bgHeader);color:var(--text-color-subtitle);border:1px solid #f4a5603f;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:22px;transition:all .3s;display:flex;box-shadow:1px 1px 30px #2323243f}header button.btn-mode:hover,header button.btn-show:hover{color:var(--text-color-title);border-color:#f4a560}header button.btn-show{display:none}header .pop-up{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#282830e6;position:fixed;inset:0}header .modal{background-color:var(--seccandry-color);border-radius:18px;width:75%;margin:30px auto;padding:15px 40px;animation:.7s myModalAnim}@keyframes myModalAnim{0%{scale:0}60%{scale:1.15}to{scale:1}}header .modal li:not(:last-child):not(:first-child){border-bottom:1px solid var(--border);margin-bottom:10px;padding-bottom:10px}header .modal li .close-icon svg{font-size:35px}header .modal li .close-icon{color:var(--text-color-subtitle);background-color:#0000;border:none;font-size:20px;transition:all .3s}header .modal li .close-icon:hover{color:#dc143c;transform:rotate(180deg)}header .modal li a{font-size:16px}@media (max-width:767px){header nav{display:none}header button.btn-show{display:flex}}section.hero{flex-wrap:wrap;align-items:center;margin:5rem 0}section.hero .leftSection{flex-grow:1}section.hero .leftSection .avatar{border:1px solid #ff8c00;border-radius:50%;width:88px;margin-right:10px;padding:1px;box-shadow:inset 2px 2px 40px #ece8e850}section.hero .avatar-paren{min-height:88px}section.hero .avatar-parent svg{color:var(--blue);margin-bottom:.3rem;font-size:18px}section.hero .title{text-transform:capitalize;color:var(--text-color-title);padding-top:25px;padding-bottom:30px;font-size:40px;line-height:1.4}section.hero .info{color:var(--text-color-subtitle);margin-bottom:30px;font-size:14px;line-height:1.8}section.hero .icons{color:var(--text-color-subtitle);gap:20px}section.hero .icons svg{cursor:pointer;font-size:20px;transition:all .3s}section.hero .icons svg:hover{color:var(--icon-hover);font-size:22px}@media (max-width:767px){section.hero .title{font-size:30px}}.main{gap:1rem}.main .category{flex-direction:column;gap:1rem;display:flex}.main .category button{color:#fff;opacity:.5;text-transform:capitalize;background-color:#24252e;border:1px solid #0000;border-radius:5px;width:185px;padding:10px 0;font-size:18px;transition:all .3s}.main .category button:hover{opacity:1}.main .category button.active{opacity:1;border:1px solid var(--blue);font-weight:700}body.light .main .category button.active{border:1px solid #0000}.main .projects-box{flex-wrap:wrap;flex-grow:1;justify-content:center;gap:30px 16px;display:flex}.main .projects-box .card{background-image:linear-gradient(#ffffff0d,#ffffff0d);border:1px solid #5dbcfc4d;border-radius:4px;transition:all .3s;overflow:hidden}body.light .main .projects-box .card{border:1px solid #99999985}.main .projects-box .card:hover{border-color:#5dbcfc;transform:rotate(1deg)scale(1.01)}.main .projects-box .info{margin-top:-5px;padding:15px 5px}.main .projects-box .info .title{text-transform:capitalize;color:var(--text-color-title);font-size:22px}.main .projects-box .info .subtitle{color:var(--text-color-subtitle);margin:10px 0;font-size:13px}.main .projects-box .info .more{justify-content:space-between;align-items:center}.main .projects-box .info .more .icon svg{color:var(--text-color-subtitle);margin-right:10px;font-size:20px;transition:all .3s}.main .projects-box .info .more .icon svg:hover{color:var(--icon-hover);font-size:22px}.main .projects-box .info .more .arrow{align-items:center;gap:4px;margin-right:10px;display:flex}.main .projects-box .info .more .arrow,.main .projects-box .info .more .arrow svg{color:var(--blue);font-size:14px}.main .projects-box .info .more .arrow svg{align-self:end}@media (max-width:767px){.main{flex-direction:column;align-items:center}.main .category{flex-flow:wrap;justify-content:center;width:100%}.main .category button{width:120px;font-size:14px}.main .projects-box{margin-top:20px}}.contact .title svg{color:var(--text-color-subtitle);margin-right:2rem;font-size:30px}.contact .title{color:var(--text-color-title);margin-bottom:1rem;font-size:40px}.contact .subtitle{color:var(--text-color-subtitle);margin-bottom:2rem;line-height:1.6}.contact .contact-parent{justify-content:space-between;align-items:center}.contact .contact-parent form{flex-direction:column;align-items:start;gap:1rem;display:flex}.contact .contact-parent form div{align-items:center;display:flex}.contact .contact-parent form label{color:var(--text-color-subtitle);text-transform:capitalize;margin-right:1rem}.contact .contact-parent form input,.contact .contact-parent form textarea{width:300px;color:var(--text-color-title);background-color:#3f3f4626;border:1px solid #3f3f46;border-radius:5px;outline:none;padding:10px;font-size:17px;transition:all .3s}body.light .contact .contact-parent form input,body.light .contact .contact-parent form textarea{border:1px solid #3f3f466c}.contact .contact-parent form textarea{resize:vertical;min-height:150px}.contact .contact-parent form input:hover,.contact .contact-parent form textarea:hover,.contact .contact-parent form input:focus,.contact .contact-parent form textarea:focus{border-color:#2dddbf}body.light .contact .contact-parent form input:hover,body.light .contact .contact-parent form textarea:hover,body.light .contact .contact-parent form input:focus,body.light .contact .contact-parent form textarea:focus{border-color:#4e5050}.contact .contact-parent form button{color:#fff;text-transform:capitalize;background-color:#24252e;border:1px solid #3f3f46;border-radius:5px;padding:10px 30px;font-size:17px;transition:all .3s}.contact .contact-parent form button:hover{scale:.95}.contact .contact-parent form button:disabled{opacity:.5;cursor:no-drop}.message{color:var(--text-color-title);padding-top:10px;font-size:24px}@media (max-width:767px){.contact .animation-contact{display:none}.contact .contact-parent form{align-items:center;width:100%}.contact .contact-parent form button{padding:10px 40px}.contact .contact-parent form div{flex-direction:column;align-items:start;width:100%}.contact .contact-parent form div label{margin-bottom:1rem}.contact .contact-parent form input,.contact .contact-parent form textarea{width:100%}}footer{justify-content:space-between;align-items:center;padding-bottom:2rem;display:flex}footer .links{gap:10px;display:flex}footer .links li a{color:var(--text-color-subtitle);font-size:15px;font-weight:400;transition:all .2s}footer .links li a:hover{color:var(--blue);font-size:16px;font-weight:500}footer p{color:#71717a}@media (max-width:800px){footer{flex-direction:column;gap:2rem}footer li a{font-size:14px}}