@import"https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap";section.hero{margin-top:3rem}section .left-sec{flex:1}section .parent-avatar{align-items:end;gap:.4rem}section .avatar{width:6rem;border-radius:50%;border:1px solid rgb(229,93,179);padding:2px}section .icon-verified{color:#4c9ef1;font-size:1.2rem;margin-bottom:.4rem}section h1.title{font-size:3rem;margin:24px 0;color:var(--title)}section p.subTitle{color:var(--subTitle);letter-spacing:1px;font-size:.9rem;line-height:1.7;margin-bottom:22px;width:70%}section .social{font-size:1.3rem;gap:1.5rem}section .social a{color:var(--subTitle)}.Light section .social a:hover{color:#000}section .social a:hover{font-size:1.5rem;transition:.3s all}@media (max-width:767px){section p.subTitle{width:100%}section .social{align-items:center;justify-content:center}}@media (max-width:900px){section .contact{display:none}}@media (max-width:1300px){section h1.title,section p.subTitle,section .social{justify-content:center;width:100%}}header.flex{justify-content:space-between;padding:0 2.4rem;margin-top:1rem}header .samy{background-color:var(--blue);border-radius:17px;width:7rem;text-align:center;box-shadow:var(--box-shadow);padding:0 .3rem;font-weight:700;text-transform:uppercase}header .samy span{font-size:1.5rem;color:var(--title);font-weight:600;opacity:.9;cursor:pointer;font-weight:700}header.flex nav{background-color:var(--blue);padding:.7rem 1.6rem;border-radius:55px;box-shadow:var(--box-shadow)}header ul.flex{gap:20px}header ul li a{color:var(--title);opacity:.8;font-size:1rem;font-weight:700;letter-spacing:1px;transition:.3s all;text-transform:uppercase}header ul li a:hover{color:var(--color-hover);opacity:1;font-size:1.07rem;transition:.3s all}header .menu{display:none}header .fixed{top:0;right:0;bottom:0;left:0;background-color:#778da9a5;position:fixed;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}header ul.model{width:75%;margin:2rem auto 0;padding:1rem 2rem;border-radius:1rem;background-color:var(--secondary);animation:semo .5s 1;text-transform:uppercase}header ul.model li{border-bottom:1px solid #ffffff1f;padding-bottom:.77rem;padding-top:.5rem}header ul.model li:nth-child(6){border-bottom:none}header ul.model li a{font-size:1rem}header ul.model li:first-child{text-align:right;border-bottom:none;padding-bottom:0;padding-top:.2rem;margin-bottom:-30px}header .mode{background-color:var(--blue);width:3rem;height:3rem;justify-content:center;font-size:1.5rem;text-align:center;border:1px solid var(--border);border-radius:50%;color:var(--subTitle);box-shadow:var(--box-shadow)}header .icon-menu{background-color:var(--blue);width:2rem;height:2rem;justify-content:center;text-align:center;border:1px solid var(--border);border-radius:50%;color:var(--subTitle);box-shadow:var(--box-shadow)}header .icon-wb_sunny{color:#ed9e0b90}header .mode:hover,header .icon-menu:hover{border:1px solid rgba(176,112,8,.841);transition:.3s all;color:#fff}header .icon-close{color:var(--subTitle);font-size:1.3rem;transition:.3s}header .icon-close:hover{color:#ce0a0a;font-size:1.6rem;rotate:180deg}@media (max-width:800px){nav{display:none}header .menu{display:block;margin-left:-20px}header .mode{width:2rem;height:2rem;justify-content:center;text-align:center;margin-right:-20px}}@media (max-width:990px){nav{margin:0 1.5rem 0 6rem}header .samy{margin-left:-6rem;padding:0}}@media (min-width:1000px){header .samy{margin-left:-30px}}@media (min-width:300px){header .samy{padding:0 .3rem;margin-left:0}}@keyframes semo{0%{scale:0}60%{scale:1.2}to{scale:1}}main.flex{gap:3rem;align-items:start}main section.left-sect{flex-direction:column;gap:10px}main section.left-sect button{background-color:var(--button);width:11rem;padding:.75rem 0;text-align:center;color:#ffffff9f;font-size:1.05rem;border-radius:10px;letter-spacing:1px;box-shadow:1px 1px 5px #354154;opacity:.7;transition:.3s all}main section.left-sect button:hover{color:#fff;font-size:1.09rem;opacity:1;scale:1.01}main section.left-sect button.active{border:1px solid #bfdbf7;opacity:1;color:#fff}.Light main section.left-sect button.active{border:1px solid #ffffff41}main section.right-sect{flex-grow:1;flex-wrap:wrap;column-gap:16px;row-gap:2rem;justify-content:center}article .photo{width:266px;border-radius:5px}article .box{width:266px;padding:.3rem}.right-sect .card{border:1px solid #bfdbf72e;padding:.1rem .2rem;border-radius:5px;transition:.3s all;background-image:var(--liner)}.Light .right-sect .card{border:1px solid #ffffff1a;background-image:linear-gradient(#dee2e6,#84a98c29)}.right-sect .card:hover{border:1px solid #bfdbf7;rotate:1deg;scale:1.01;cursor:pointer}.Light .right-sect .card:hover{border:1px solid #ffffff37}.right-sect .title{color:var(--title)}.right-sect .sub{color:var(--subTitle);font-size:.8rem}.right-sect .icons{justify-content:space-between;padding-top:8px}.card .icon-github1,.card .icon-link{color:var(--subTitle);font-size:1.3rem;transition:.3s all}.card .icon-github1:hover,.card .icon-link:hover{font-size:1.4rem;color:#d4d4d8}.Light .card .icon-github1:hover,.card .icon-link:hover{color:#212529}.card .more{color:var(--blue);gap:3px;font-weight:700}.Light .card .more{color:#354f52}@media (max-width:600px){main.flex{flex-direction:column;align-items:center}main section.left-sect{flex-direction:row;flex-wrap:wrap;gap:15px;justify-content:center}main section.left-sect button{width:7rem;font-size:.8rem}main section.left-sect button:hover{font-size:.9rem}}@media (min-width:1080px){main section.right-sect{gap:3rem}}section .icon-mail1{font-size:1.5rem;color:var(--subTitle);padding-right:8px}section h2{font-size:1.7rem;color:var(--title)}section p{color:var(--subTitle);letter-spacing:1px;margin:20px 0 2rem}section .form-div label{color:var(--subTitle);margin-right:10px;font-size:1.1rem}section #email,section #message{all:unset;width:16rem;border:1px solid rgba(150,195,240,.388);background-color:#3f517b2c;padding:.5rem 1rem;border-radius:5px;transition:.3s all}.Light section #email,section #message{border:1px solid #1841073a}section #email::placeholder,section #message::placeholder{color:var(--title);font-size:.8rem}section #email:focus,section #message:focus{color:#ffffffb3;background-color:none;border:1px solid rgba(150,195,240,.388)}.Light section #email:focus,section #message:focus{color:#000;border:1px solid #52796f64}section #email:hover,section #message:hover{border:1px solid rgba(164,188,211,.868)}.Light section #email:hover,section #message:hover{border:1px solid #1339043a}section #message{min-height:9rem;resize:vertical}section .form-div button{background-color:var(--button);padding:.75rem 2rem;text-align:center;color:#ffffff9f;font-size:1.05rem;border-radius:10px;letter-spacing:1px;box-shadow:1px 1px 30px #354154;transition:.3s all;margin-top:1.8rem}.Light section .form-div button{box-shadow:var(--box-shadow)}section .form-div button:hover{color:#fff;scale:.9}@media (max-width:600px){section .form-div{display:flex;flex-direction:column}section .form-div form .flex{flex-direction:column}section .form-div form button{width:10rem;margin-left:2rem}section h2{margin-right:auto;margin-left:auto;display:flex;justify-content:center}section .icon-mail1{margin-top:13px;display:flex;justify-content:center;font-size:1.6rem}section .form-div form .sam{font-size:.8rem}section .lottie{transform:translateY(40px);margin-right:calc(100% + 30px);width:1rem}}@media (max-width:1100px){section .contact{display:none}}footer .flex{gap:3rem;justify-content:center;margin-bottom:15px}footer .flex a{color:var(--subTitle);font-size:1.2rem;transition:.3s all;font-weight:700;text-transform:uppercase}footer .flex a:hover{color:#bfdbf7;scale:1.5}.Light footer .flex a:hover{color:#84a98c}@media (max-width:600px){footer .flex{gap:1rem}footer .flex a{font-size:1rem}}section.flex{justify-content:space-between;gap:3rem}section.flex .left{flex:1;border:1px solid #55555584;border-radius:7px}section.flex .left:hover{background-image:linear-gradient(#bfdbf742,#ffffff28);cursor:pointer;border:1px solid #ffffff4b}section.flex .left span{text-align:center;display:flex;justify-content:center;color:var(--title);gap:10px;margin:10px 0}section.flex .left span h6{font-size:2rem}section.flex .left span i{font-size:2rem;margin-top:12px}section .text{padding-left:15px;color:var(--subTitle);margin-bottom:15px;font-size:1.6rem}section .text h3{margin:13px 0 -35px;color:var(--title)}section .text p{padding-left:15px;margin-bottom:-24px;font-size:1.3rem}section .text .pp{margin-bottom:15px}@media (max-width:1300px){section.flex{flex-direction:column;text-align:center}section .text p{padding:0}}@media (width < 600px){section span .ko{margin-right:5px}section.flex .left span .h{margin-right:7px}section.flex .left span h6{font-size:1.8rem}section.flex .left span i{font-size:1.8rem}}html{font-family:Cairo,sans-serif;letter-spacing:.7px;scroll-behavior:smooth}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:root{--primary:#000;--secondary:#1f2631;--border:#ffffff1f;--title:rgb(244, 244, 245);--subTitle:rgb(161, 161, 170);--border:#75686820;--blue:#283449d6;--box-shadow:2px 1px 30px #354154;--color-hover:#bfdbf7;--button:#283449d6;--liner: linear-gradient(#283449aa,#5d9ac929,#283449c0) }.Light{--primary:#e7ecef;--secondary:#e7ecefc3;--title:#354f52;--subTitle: #2e413c;--blue: #ced4da;--box-shadow: 2px 1px 30px #bbc9e0;--color-hover:#84a98c;--button:#2f3e46;--liner: linear-gradient(var(--blue), #5d9ac929, #283449c0) }body{background-color:var(--primary);color:#fff}*{margin:0;padding:0}.container{width:90%;margin-left:auto;margin-right:auto;background-color:var(--secondary);border:2px solid var(--border);padding:0 4rem}@media (max-width:700px){.container{padding:1rem}}@media (max-width:500px){.container{width:100%}}.line{border-bottom:1px solid var(--border);margin:3rem 0}li{list-style:none}a{text-decoration:none;transition:.2s all}.flex{display:flex;align-items:center}.border{border:2px solid red}header button{font-size:1.2rem}button{all:unset;cursor:pointer}button:active{scale:.95}::-webkit-scrollbar{width:.8rem}::-webkit-scrollbar-track{border:7px solid var(--subTitle);box-shadow:inset 0 0 2.5px 2px var(--subTitle);border-radius:10px;background-color:#333}::-webkit-scrollbar-thumb{background:#1d2f554b;border-radius:10px}.scroll{background-color:#1f80b4ac;width:2.5rem;height:2.5rem;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:1.1rem;position:fixed;bottom:1.1rem;right:2rem;transition:.3s all;border:1px solid #ffffff52;color:#fff}.Light .scroll{background-color:#354f52}.scroll:hover{scale:1.2}@media (max-width:600px){.scroll{bottom:.5rem;width:2rem;height:2rem;font-size:.8rem;right:10px;opacity:.4}}