@import"https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,700&display=swap";html{font-family:Roboto,sans-serif;letter-spacing:.1px;scroll-behavior:smooth}::-webkit-scrollbar{width:.8rem;background-color:#333}::-webkit-scrollbar-thumb{background-color:#888;border-radius:2px}::-webkit-scrollbar-thumb:hover{background-color:#555}::-webkit-scrollbar-track{background-color:#333;border-radius:4px}*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #000;--secondary: #18181b;--border: rgba(63, 63, 70, .4);--title: rgb(244 244 245);--subtitle: rgb(161 161 170);--bgHeader: rgb(39, 39, 42);--blue: rgb(93, 188, 252);--icon-hover: #d4d4d8;--container-padding: 4.8rem }body{background-color:var(--primary);color:#fff}.light{--primary: rgb(250, 250, 250);--secondary: rgb(255, 255, 255);--border: rgba(202, 202, 202, .518);--title: rgb(39 39 42);--subtitle: rgb(82 82 91);--bgHeader: rgb(253 253 253);--blue: rgb(0, 149, 246);--icon-hover: #333}.container{border:2px solid var(--border);width:80%;margin:0 auto;background-color:var(--secondary);padding:0 var(--container-padding)}.divider{border-top:1px solid var(--border);margin:3rem 0;width:calc(100% + var(--container-padding) + var(--container-padding));margin-left:calc(var(--container-padding) * -1)}ul{list-style:none}a{color:initial;text-decoration:none;transition:.2s}button{all:unset;cursor:pointer}button:active{scale:.7}button:disabled{opacity:.5;cursor:not-allowed}.flex{display:flex;align-items:center}.scroll{background-color:#1976d2d9;width:2.6rem;height:2.6rem;border-radius:50%;position:fixed;bottom:2rem;right:3%;text-align:center;font-size:1.4rem;transition:.3s;color:#fff}.scroll:hover{background-color:#1976d2}@media (max-width:1000px){.container{width:90%;--container-padding: 1.7rem }}@media (max-width:600px){.container{width:99%;--container-padding: 1rem }.scroll{opacity:.6;width:2.2rem;height:2.2rem}.scroll:hover{opacity:.8}}section.contact-us .icon{color:var(--subtitle);margin-right:1.3rem;font-size:1.8rem}section.contact-us .title{font-size:2.1rem;color:var(--title);margin-bottom:1rem}section.contact-us .sub-title{color:var(--subtitle);margin-bottom:2rem;line-height:1.65rem}section.contact-us label{color:var(--subtitle)}section.contact-us #email,section.contact-us #massage{all:unset;background-color:#3f3f4626;border:1px solid rgba(63,63,70);width:16rem;padding:.5rem 1rem;margin-left:1rem;border-radius:5px;transition:.3s;font-size:1.1rem}section.contact-us #massage{min-height:9rem;min-width:16rem;resize:vertical}section.contact-us #email:focus,section.contact-us #massage:focus,section.contact-us #email:hover,section.contact-us #massage:hover{border:1px solid rgb(45 212 191)}.light section.contact-us #email:focus,.light section.contact-us #massage:focus,.light section.contact-us #email:hover,.light section.contact-us #massage:hover{border:1px solid rgb(5,15,15)}section.contact-us button[type=submit]{background-color:#24252e;width:11rem;padding:.75rem 0;text-align:center;font-size:1.05rem;margin-top:1.8rem;border-radius:5px;transition:.3s;border:1px solid rgb(63 63 70)}section.contact-us button[type=submit]:hover{scale:.95}.light section.contact-us #email,.light section.contact-us #massage{background-color:#ffffffe6;color:#000}.light section.contact-us form p{color:#333}@media (max-width:1200px){.contact-animation{display:none}}@media (max-width:550px){section.contact-us .animation{display:none}section.contact-us form{display:flex;flex-direction:column;align-items:start;margin:auto}section.contact-us form div{display:flex;flex-direction:column;align-items:start;gap:.7rem}section.contact-us #email,section.contact-us #massage{margin:0;padding:.5rem 0}section.contact-us button[type=submit]{align-self:center}}footer{justify-content:space-between;padding-bottom:1.9rem}footer ul.flex{gap:1rem}footer ul li a{color:var(--subtitle);font-size:.9rem}footer ul li a:hover{color:var(--blue);font-size:1rem;font-weight:500}footer.flex p{color:#71717a}@media (max-width:800px){footer.flex{flex-direction:column;align-items:center;gap:1.4rem}footer ul.flex{gap:.5rem}}header.flex{justify-content:space-between;padding:0 2.4rem;margin-top:1.2rem}header nav{background-color:var(--bgHeader);padding:.77rem 1.6rem;border-radius:55px;box-shadow:1px 1px 40px #2323242a}header ul.flex{gap:16px}header ul li a{color:var(--title);opacity:.9;font-size:.88rem;font-weight:500}header ul li a:hover{color:var(--blue);opacity:1;font-size:.9rem;font-weight:500}header button.icon{background-color:var(--bgHeader);color:var(--subtitle);width:2.4rem;height:2.4rem;border-radius:50%;align-items:center;font-size:1.3rem;display:flex;justify-content:center;border:1px solid rgba(250,128,114,.205);box-shadow:1px 1px 10px #b5b3b3}header button.icon:hover{transition:.3s;border-color:#fa807293;color:var(--title)}header .menu{display:none}.light .icon-sun{color:orange}header .fixed{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#282830e8;z-index:999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@keyframes modal{0%{scale:0}60%{scale:1.2}to{scale:1}}header .fixed .modal{width:85%;margin-left:auto;margin-right:auto;margin-top:2rem;border-radius:1rem;background-color:var(--secondary);padding:1rem 2rem;animation:modal .67s 1}header .fixed .modal li{border-bottom:1px solid var(--border);padding-bottom:.77rem;padding-top:.5rem}header .fixed .modal li a{font-size:1rem}header .fixed .modal li:last-child{border-bottom:none}header .fixed .modal li:first-child{text-align:right!important;border-bottom:none;padding:0;padding-top:.2rem;margin-bottom:-1.5rem}header .fixed .modal .icon-clear{color:var(--subtitle);font-size:1.5rem;transition:.2s}header .fixed .modal .icon-clear:hover{font-size:1.8rem;color:#dc143c;rotate:180deg}@media (max-width:700px){header nav{display:none}header .menu{display:block}header.flex{padding:0 .5rem}}section.hero{margin-top:2rem;justify-content:space-between}section.hero .hero-content{flex-grow:1}section.hero .hero-content .avatar{width:100px;border-radius:50%;border:1px solid darkorange;padding:1px;box-shadow:1px 1px 40px gray inset;margin-right:.6rem}section.hero .hero-content .avatar-icon{color:var(--blue);font-size:1.1rem;margin-bottom:.5rem}section.hero .hero-content .title{font-size:2.85rem;line-height:3.3rem;margin:24px 0;color:var(--title)}section.hero .hero-content p.sub-title{color:var(--subtitle);font-size:.9rem;line-height:1.2rem;margin-bottom:32px}section.hero .hero-content .social-icons{gap:16px;margin-top:1.5rem}section.hero .hero-content .social-icons a{color:var(--subtitle);font-size:1.3rem;transition:.3s}section.hero .hero-content .social-icons a:hover{font-size:1.4rem;color:var(--icon-hover)}.hero .animation{width:100%;transform:100px 50px}@media (max-width:1200px){.hero .animation{display:none}}@media (max-width:600px){section.hero .hero-content .title{font-size:2rem;line-height:2.2rem}section.hero .hero-content p.sub-title{font-size:.7rem;line-height:1.1rem}}main.flex{gap:2.65rem;align-items:start}main.flex .buttons{flex-direction:column;gap:10px}main.flex .buttons button{background-color:#24252e;width:11rem;padding:.75rem 0;text-align:center;font-size:1.05rem;opacity:.5;border-radius:5px;transition:.3s}main.flex .buttons button:hover{opacity:1}main.flex .buttons button.active{opacity:1;font-weight:700;letter-spacing:.6px;padding:.8rem 0;border:1px solid var(--blue)}.light main.flex .buttons button.active{border:1px solid #333}main.flex .projects{flex-grow:1;flex-wrap:wrap;justify-content:center;column-gap:16px;row-gap:3rem}.card{border:1px solid rgba(93,188,252,.3);border-radius:5px;transition:.3s;background-image:linear-gradient(#ffffff0d,#ffffff0d)}.light .card{border:none;box-shadow:-1px 1px 1px #00000029}.card:hover{border:1px solid var(--blue);rotate:1deg;scale:1.01;cursor:pointer}.card img{border-radius:5px}.card-content{padding:1rem .4rem}.card-content .title{color:var(--title)}.card-content .description{color:var(--subtitle);font-size:.8rem;margin-top:.7rem;margin-bottom:1.1rem}.card-content .icons{justify-content:space-between}.card-content .icons div a{color:var(--subtitle);font-size:1.2rem}.card-content .icons div a:hover{color:var(--icon-hover);font-size:1.25rem}.card-content .icons .link{font-size:.9rem;color:var(--blue);margin-right:12px;gap:5px}@media (max-width:600px){main.flex{flex-direction:column;align-items:center}main.flex .buttons{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px}main.flex .buttons button{width:7rem;padding:.8rem 0;font-size:.9rem}}