@font-face{font-family:Regular;src:url(/fonts/Graphik-Regular.eot);src:url(/fonts/Graphik-Regular.eot?#iefix) format("embedded-opentype"),url(/fonts/Graphik-Regular.woff) format("woff"),url(/fonts/Graphik-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Semibold;src:url(/fonts/Graphik-Semibold.eot);src:url(/fonts/Graphik-Semibold.eot?#iefix) format("embedded-opentype"),url(/fonts/Graphik-Semibold.woff) format("woff"),url(/fonts/Graphik-Semibold.ttf) format("truetype");font-weight:600;font-style:normal}@font-face{font-family:Medium;src:url(/fonts/Graphik-Medium.eot);src:url(/fonts/Graphik-Medium.eot?#iefix) format("embedded-opentype"),url(/fonts/Graphik-Medium.woff) format("woff"),url(/fonts/Graphik-Medium.ttf) format("truetype");font-weight:500;font-style:normal}.v-text{text-align:center;width:49.7%;background-color:#fff;color:#1d0000;border:1px solid grey;transition:var(--transition-speed)}.v-text:hover{border-bottom:3px solid #a8a8a8}.vsa2{position:absolute;right:0;top:-19px;border-radius:0 0 9px 9px;border-left:3px solid #a8a8a8}.vsa{position:absolute;left:0;top:-19px;border-radius:0 0 9px 9px;border-right:3px solid #a8a8a8}p.simall{font-family:Medium;font-size:18px;margin-bottom:0}.cen{text-align:center;font-family:Medium;font-size:16px;margin-bottom:0}.top-bottom-margin{margin:50px 0!important}.bordes{border:4px solid #3b3b3b;border-radius:20px 20px 10px 10px}.tete{line-height:100%;font-size:2em;margin-bottom:auto;text-align:center}.mw{margin:0 4%!important}@media only screen and (max-width: 1000px){.v-text{width:49.5%}}@media only screen and (max-width: 650px){.v-text{width:49.3%}.tete{font-size:1.5em}}@media only screen and (max-width: 477px){.v-text{width:49.1%}.tete{font-size:1.3em;padding-top:5px}}html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;padding:0;margin:0;font-size:calc(1em + 1vw)}::selection{color:#fffffffc;background:rgba(0,0,0,.99)}::-moz-selection{color:#fffffffc;background:rgba(0,0,0,.99)}.website-background-black{background:#000000}.website-background-white{background:#ffffff}.text-color-white{color:#fff}.text-color-red{color:#ea0f1e}.text-color-black{color:#000}.text-color-gray{color:#888}.underline{text-decoration:underline}.hide-text-block{position:relative;display:block;overflow:hidden}h1{font-family:Semibold;position:fixed;line-height:110%;letter-spacing:-2px;font-size:3.2em;font-size:18vm;font-size:18vmin}@media screen and (max-width: 767px){h1{line-height:130%}}h2{font-family:Semibold;line-height:140%;font-size:100px;font-size:2.222em}h3{font-family:Medium;line-height:120%;font-size:64px}h4{font-family:Semibold;line-height:140%;font-size:40px;margin:16vh 0 4vh;margin:24vh 0 4vh}@media screen and (max-width: 767px){h4{font-size:30px}}h5{font-family:Semibold;line-height:140%;font-size:30px;margin:12vh 0 5vh;margin:12vh 0 3vh}@media screen and (max-width: 767px){h5{font-size:20px}}h6{font-family:Semibold;line-height:140%;font-size:24px;margin:8vh 0 2vh}p{line-height:170%;font-family:Regular;font-size:18px;margin-bottom:3vh}p.size-small{font-family:Medium;font-size:16px;margin-bottom:0}@media screen and (max-width: 767px){p.size-small{font-size:14px}}.size-medium{line-height:180%;font-size:20px}.size-large{line-height:160%;font-size:24px;margin-bottom:4vh}b{font-family:Medium}i{font-style:italic}ul{line-height:180%;font-family:Regular;font-size:18px;margin-bottom:5vh}li{margin-left:5vh}blockquote{line-height:170%;font-family:Regular;font-size:18px;color:#666;margin:6vmin 0;padding:10px 20px 10px 30px;border-left:4px solid #dddddd}.on-hover-40,.on-hover--40{transition:all .4s cubic-bezier(.2,.6,.2,1)}.on-hover-40:hover{margin-left:30px;transition:all .4s cubic-bezier(.2,.6,.2,1)}.on-hover--40:hover{margin-left:-40px;transition:all .4s cubic-bezier(.2,.6,.2,1)}@media screen and (max-width: 767px){.on-hover-40:hover,.on-hover--40:hover{margin-left:0}}img{max-width:100%;max-height:100%;pointer-events:none!important}video{display:block;max-width:100%;height:auto}.no-js .lazy{display:none}.top-bottom-margin{margin:40vh 0 20vh;margin:35vh 0 20vh;margin:35vh 0 30vh}.max-width{max-width:68%;max-width:21.5em;margin:0 auto}@media screen and (max-width: 767px){.max-width{max-width:86%}}.logo{float:right}.logo-inner{position:fixed;top:5%;right:15%;z-index:999}@media screen and (max-width: 767px){.logo-inner{top:5%;right:5%}}.label-logo:after{font-family:Semibold;font-size:25px;content:"Mostafa."}@media screen and (max-width: 767px){.label-logo:hover:after{content:"Mostafa."}}.label-logo{animation:fadelogo .6s cubic-bezier(.2,.6,.2,1);animation-fill-mode:backwards}@keyframes fadelogo{0%{opacity:0;transform:translateY(10vh)}to{opacity:1;transform:translateY(0)}}.rpi-progress-bar{box-sizing:border-box;position:fixed;width:100%;top:0;left:0;padding-bottom:20px;z-index:1}.rpi-progress-bar__position{box-sizing:inherit;height:4px;width:100%;background-color:#d1001d;transform-origin:0 50%;transition:transform 50ms;transform:scaleX(0);will-change:transform;position:relative}.vertical-center{position:absolute;height:100%;display:flex;align-items:center}.label-hello:after{content:"Hello."}.label-hello:hover:after{content:"About"}.label-iam:after{content:"I am"}.label-iam:hover:after{content:"Work"}.label-sasa:after{content:"Mostafa"}.label-sasa:hover:after{content:"Contact"}.label-error:after{content:"Oops!"}.label-error:hover:after{content:"Home"}.animate{animation:animate .6s cubic-bezier(.2,.6,.2,1);animation-fill-mode:backwards}@keyframes animate{0%{opacity:0;transform:translateY(30vh)}to{opacity:1;transform:translateY(0)}}.delay02{animation-delay:.2s}.delay04{animation-delay:.4s}.delay06{animation-delay:.6s}.delay08{animation-delay:.8s}.delay10{animation-delay:1s}.delay12{animation-delay:1.2s}.bg-photo{z-index:-9;position:fixed;inset:0 0 0 35%;background-image:url(../img/SasaHome2.webp);background-repeat:no-repeat;background-size:cover;animation:bg-photo 1.2s cubic-bezier(.5,.6,.6,1);animation-fill-mode:backwards}@media screen and (max-width: 767px){.bg-photo{animation:bg-photo .6s cubic-bezier(.5,.6,.6,1)}}@keyframes bg-photo{0%{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@media screen and (max-width: 480px){.bg-photo{left:-8%}}@media screen and (min-width: 768px){.hide-mobile{display:none}}@media screen and (max-width: 767px){.hide-web,.toggle-mobile-second{display:none}.mobile-tap-area{background:transparent;position:absolute;width:100%;height:100%}.tap-indication{text-align:center;width:100%;font-family:Medium;color:#fff;position:fixed;bottom:4%;animation:bounce 1s infinite alternate;animation:bounce .5s cubic-bezier(.5,.6,.6,1) infinite alternate}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-8px)}}}.max-width-left-70{max-width:70%}@media screen and (max-width: 767px){.max-width-left-70{max-width:100%}}.label-email{cursor:pointer}.label-email:after{content:"hello@mostafa-mahmoud.online"}.label-email:hover:after{content:"Copy to clipboard"}.label-email:hover:active:after{content:"Email copied"}@media screen and (max-width: 767px){.label-email:hover:after{content:"Copied to clipboard"}}.work-block{margin:6vh 0}.top-bottom-margin .work-block:first-child{margin-top:11vh}@media screen and (max-width: 767px){.work-block{margin-top:10vh 0}}.block-image-overflow{width:100%;overflow:hidden}.hero-image{width:100vw;height:90vh;overflow:hidden;margin:30vh 0}@media screen and (max-width: 767px){.hero-image{margin:20vh 0}}.hero-image img{width:100%;height:100vh;-o-object-fit:cover;object-fit:cover}@media screen and (max-width: 767px){.hero-image img{background-position:right bottom}}.max-width-70{max-width:70%;margin:0 auto}@media screen and (max-width: 767px){.max-width-70{max-width:100%;margin:auto}}.links a{display:block;margin:4vh 0;font-family:Medium;font-size:19px}.images{margin:8vh 0}@media screen and (max-width: 767px){.images{margin:4vh 0}}.images img{margin:4vh 0}@media screen and (max-width: 767px){.images img{margin:2vh 0}}.video{margin:8vh 0}@media screen and (max-width: 767px){.video{margin:4vh 0}}.iphone-video{width:100%;height:80vh;display:flex;align-items:center;position:relative}.iphone-notch{background-image:url(../img/devices-iphone-notch.png);background-repeat:no-repeat;background-size:contain;background-position:center;height:20%;width:100%;position:absolute;z-index:1;margin-top:-17%}.iphone-mask{border-radius:28px;overflow:hidden;position:relative;margin:0 auto;height:70vh}.iphone-video video{width:auto;height:70vh}.devices-iphone{background-image:url(../img/devices-iphone.png);background-repeat:no-repeat;background-size:contain;background-position:center;height:100%;width:100%;position:absolute;z-index:-1}@media screen and (max-width: 767px){.iphone-video{height:60vh}.iphone-mask{border-radius:18px;height:52vh}.iphone-video video{height:52vh}}:root{font-family:Open Sans;--text-primary: #a8a8a8;--text-secondary: #ff00f2a1;--bg-primary: hsl(0, 0%, 12%);--bg-secondary: #993636;--transition-speed: .6s}body{color:#000;background-color:#000;margin:0;padding:0}body::-webkit-scrollbar{width:.25rem}body::-webkit-scrollbar-track{background:#16162b}body::-webkit-scrollbar-thumb{background:var(--text-secondary);border-radius:4rem}.navbar{position:fixed;z-index:2;background-color:var(--bg-primary);transition:width .6s ease}.navbar-nav{list-style:none;padding:0;margin:0;margin-right:5vh;display:flex;flex-direction:column;align-items:center;height:90%}.nav-item{width:100%;padding:15px;border-top:1px solid #424242;font-family:Semibold;line-height:140%;font-size:24px}.nav-item:last-child{border-bottom:2px solid #473847}.logo-text img{filter:drop-shadow(0 0 0 #ffffff);height:200px;margin-top:10px;transition:.4s}.logo-text:hover img{filter:drop-shadow(0 0 0 #ff0000)}.logo-span{display:inline-block!important;min-width:147px;background-image:url(/img/logo.webp);background-repeat:no-repeat;background-size:cover;filter:drop-shadow(0 0 0 #ffffff);height:200px;margin-top:10px;transition:.4s}.logo-span:hover{filter:drop-shadow(0 0 0 #ff0000)}.nav-linkm{display:block!important;align-items:center!important;color:var(--text-primary)!important;text-decoration:none;text-align:left!important;transition:var(--transition-speed)}.nav-link{display:block!important;align-items:center!important;color:var(--text-primary)!important;text-decoration:none;text-align:center!important;transition:var(--transition-speed)}.nav-link:hover{filter:grayscale(0%) opacity(1);color:var(--text-secondary)!important}.nav-link svg{width:2rem;min-width:2rem;margin:0 1.5rem}.fa-primary{color:#21b3fd}.fa-secondary{color:#027ab6}.fa-primary,.fa-secondary{transition:var(--transition-speed)}.logo{text-transform:uppercase;margin-bottom:10px;text-align:center;color:var(--text-secondary);font-family:Semibold;line-height:110%;letter-spacing:-2px;font-size:15vmin}.logo svg{transform:rotate(0);transition:var(--transition-speed)}.navbar{top:0;width:100%;height:100%;overflow:scroll}.theme-icon{display:none}.dark #darkIcon,.light #lightIcon,.solar #solarIcon{display:block}li#themeButton{display:none}nav::-webkit-scrollbar{width:0rem}.buts{position:fixed;top:0%;left:0%;z-index:10}@media screen and (max-width: 767px){.buts{position:absolute;top:0%;left:0%;z-index:10}}.nav-linkm svg{width:50px}.social li{display:list-item!important;margin-left:auto;margin-right:auto}.social{width:100%;z-index:20;margin:0;padding:0;list-style:none;display:flex!important;position:fixed}.social li a{padding:2rem 7px;margin-top:1%}.social svg{width:1.5rem;color:#909096;transition:var(--transition-speed)}.social li:hover svg{width:1.6;color:var(--text-secondary)}