@import "fonts/fonts.css";:root{--color1:#000000; --color2:#302987; --color3: rgba(241, 241, 241, 0.75); --color4:rgb(245, 245, 245); --color5: rgb(252 119 44); --color6:rgba(241, 241, 241, 0.5); --color7:#6D6E76; --color8: #e9e9e9; --color9:rgba(0, 0, 0, 0.3); --fontsize1:56px; --fontsize2:46px; --fontsize3:36px; --fontsize4:24px; --fontsize5:18px; --fontsize6:16px; --fontsize7:14px; --fontsize8:12px; --fontsize9:10px;}body{margin: 0; background: var(--color4); font-family: 'Inter';}html[lan=ar] body{font-family: 'Noto Kufi Arabic';}body{padding-top: 70px;}a{text-decoration: none; cursor: pointer; user-select: none; -webkit-user-drag: none;}h1{font-size: var(--fontsize1); font-weight: 600; margin: 24px 0;}h2{font-size: var(--fontsize2); font-weight: 600; margin: 19px 0;}h3{font-size: var(--fontsize3); font-weight: 600; margin: 13px 0;}h4{font-weight: 300; font-size: var(--fontsize6); margin: 10px 0px;}h5{font-weight: 600;}h6{margin: 24px 0px; font-size: var(--fontsize6); font-weight: 700;}img{width: 100%; height: auto; max-width: 600px;}.row{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}.col-10{width:10%;}.col-20{width: 20%;}.col-30{width:30%;}.col-33{width: 30%;}.col-40{width: 40%;}.col-50{width:50%;}.col-60{width: 60%;}.col-70{width:70%;}.col-80{width:80%;}.col-90{width:90%;}.col-100{width:100%;}.menu{display: flex; flex-direction: row-reverse; font-weight: 400; font-size: var(--fontsize6); text-transform: capitalize; align-items: center;}.menu a{margin: 0 0px 0px 40px; text-decoration: none; color: var(--color1);}.menu a:hover{color: var(--color5);}.container{padding: 120px 180px;}.container .content{font-size: var(--fontsize6);}.dark{color: var(--color8); background: var(--color2);}.dark-text{color: var(--color1);}.dark-text-alt{color: var(--color2);}.container.dark .content{color: var(--color3);}#header img, #footer img{width: 162px; height: auto; max-width: 100%; transition-duration: 300ms;}div#header{padding: 35px 180px; position: fixed; width: calc(100% - 360px); background: var(--color4); z-index: 1; top: 0; left: 0; transition-duration: 300ms; transition-property: padding-top,padding-bottom;}div#header.scrolled{padding-top: 20px; padding-bottom: 20px; box-shadow: 0 1px 7px 0px var(--color9);}div#header.scrolled img{width: 130px;}.intro h1{color: var(--color4);}.intro .content{font-size: var(--fontsize6); color: var(--color3); font-weight: 400;}.intro .button-container, .container.our-work .button-container, .container.about-us .button-container{margin-top: 64px;}#text-cursor{font-family: "Inter";}a.button.b-underlined{color: var(--color5); text-transform: capitalize; font-size: var(--fontsize5); font-weight: 600; width: 200px; display: block; text-align: center; position: relative; padding-bottom: 20px;}a.button.b-underlined:after{content:""; display: block; width: 100%; height: 8px; background: var(--color5); position: absolute; left: 0; right: 0; margin: auto; bottom: 0;}.services h3{text-align: center; text-transform: capitalize;}.services .content{text-align: center; margin-bottom: 35px;}.container.services{display: flex; flex-direction: column; align-items: center;}.row.box{width: 100%; align-items: stretch;}.row.box img{max-width: 48px; margin: 10px 0;}.box .col-20{text-align: center; width: 15%;}.services .box .content{text-align: unset; font-size: var(--fontsize7); margin: 0;}.box .col-33{margin: 30px 0;}.box .row{align-items: flex-start;}.container.our-work, .container.about-us{background-image: url(../imgs/bg.svg); background-size: cover; background-repeat: no-repeat; background-position-x: -150px;}.container.about-us{background-image: url(../imgs/bg_filpped.svg); background-position-x: calc(-100% + 49px); background-position-y: 80px;}html[lan=ar] .container.about-us{background-image: url(../imgs/bg.svg); background-size: cover; background-repeat: no-repeat; background-position-x: -150px;}html[lan=ar] .container.our-work, .container.about-us{background-image: url(../imgs/bg_filpped.svg); background-position-x: calc(10%); background-position-y: 80px;}#footer{padding: 220px 250px 120px 250px;}#footer .content{font-size: var(--fontsize7);; font-weight: 400; color: var(--color7); margin-top: 16px;}.row.flex-end{justify-content: flex-end;}ul{list-style: none; margin: 0; padding: 0;}#footer ul{font-size: var(--fontsize7);; font-weight: 400;}#footer ul a{color: var(--color7);}#footer ul a:hover{color: var(--color5);}li{margin: 16px 0px;}.text-center{text-align: center;}.button-container.flex-middle{display: flex; justify-content: center; align-items: center;}a.button.small.round{display: inline-block; padding: 16px; background: var(--color8); border: none; border-radius: 100%; width: 24px; height: 24px;}#footer a.button.small.round img{width: 24px; height: 24px;}#footer .button-container.flex-middle{margin: 33px 0px 53px;}.at-devourcode .bigcard{text-align: center; height: 380px; position: absolute; top: 81px; left: 0; right: 0; margin: auto; width: calc(100% - 360px); padding: 40px 0; backdrop-filter: blur(67px);}.bigcard h3{color: var(--color5);}.container.at-devourcode{position: relative; height: 162px;}.container.at-devourcode{position: relative; height: 162px;}.at-devourcode .bigcard .content{padding: 60px 329px; color: var(--color8);}.flashing{-webkit-animation-duration: 0.5s;animation-duration: 0.5s;-webkit-animation-name: typer_flashing;animation-name: typer_flashing;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}@keyframes typer_flashing{0%{opacity: 1;}50%{opacity: 0;}100%{opacity: 1;}}#screencontent,#cssbox,#cssbox,#jsbox,#cssboxline,#jsboxline,#leftcodemenu,#leftcodetext,#rightcodemenu,#rightcodetext,#uppercodemenu,#uppercodetext,#upperrightmenu,#upperrighttext,#keyboardconntect polyline,#screentext path,#inscreenconnection,#wrenchshadow,#guyshadow,#magshadow,#keyshadow,#lockshadow,#screenshadow,#objshadow,#deskshadow,#computerdesk,#keyboard,#lastobj,#wrench,#magglass,#key,#lock,#otherstuff,#computerguy,#otherstuff,.screenpart,.chairpart{opacity:0}.menu a.active:after{content: ""; background: var(--color5); width: calc(100% + 10px); display: block; height: 3px; margin-top: 2px; margin-left: -5px; margin-bottom: -20px;}#work .container.intro{background: var(--color4);}#work .intro h1{color: var(--color1);}#work .intro .content{color: var(--color7);}.project h3{color: var(--color4); text-align: center; text-transform: capitalize;}.project .content{color: var(--color6); text-align: center; margin-bottom: 35px;}.slideshow-tabs{display: inline-flex; justify-content: space-evenly; width: 100%; flex-wrap: wrap;}.slideshow-tabs a{color: var(--color4); font-size: var(--fontsize5); position: relative; margin: 9px 9px; cursor: pointer;}.slideshow-tabs a.active{color: var(--color5);}.slideshow-tabs a.active:before{content: ""; display: inline-block; height: 100%; width: 2px; background: var(--color5); position: absolute; left: -8px;}html[lan=ar] .slideshow-tabs a.active:before{left:unset; right:-8px;}.slideshow-slides{margin: 80px 0; position: relative; display: grid;}.project-slideshow{margin: 90px 0;}.project .slide h3{text-align: unset;}.slideshow-slides h1{color: var(--color4);}.project .slide .content{text-align: unset;}.slide-tags{width: 100%; display: inline-flex; max-width: 520px; justify-content: flex-end;}.slide-tags .tag{color: var(--color5); padding: 19px; border: 1px solid; border-radius: 5px; margin: 0 5px; font-weight: 300; min-width: 175px; display: flex; flex-direction: column; align-items: center;}.slide-tags .tag div{text-align: initial;}.slide-tags .tag .tag-number{font-size: var(--fontsize3); font-weight: 900;}.slide{opacity: 0; transition-duration: 300ms; filter: blur(5px); pointer-events: none; width: 100%; grid-area: 1 / 1 / 2 / 2; FONT-WEIGHT: 200; overflow: hidden;}.slide.active{opacity: 1; filter: blur(0px); pointer-events: all;}.modal-container{position: fixed; width: 100%; height: 100%; z-index: 99999; top: 0; /* backdrop-filter: blur(3px); */ background: var(--color9);}.modal-container .modal-inner{position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 400px; background: var(--color2); border: none; border-radius: 13px; overflow: hidden; color: var(--color4); height: fit-content; display: flex; flex-direction: column; justify-content: space-between; min-height: 190px; max-width: 80%;}.modal-container{display: flex; justify-content: space-around;}.modal-container .top-bar{display: flex; justify-content: space-between; background: var(--color3); height: 40px; color: var(--color1);}.modal-container .top-bar a.modal-button{width: 42px; position: relative; display: block; height: 100%; text-align: center; line-height: 42px; font-size: var(--fontsize5);}.modal-container .top-bar div{display: block; position: relative;}.modal-buttons{display: flex; justify-content: flex-end; width: 100%; left: 0; border: solid; border-width: 1px 0 0; padding: 7px 0; border-color: var(--color6);}.modal-buttons a{padding: 9px; color: var(--color3); border: solid 1px; border-radius: 8px; margin: 0 6px; border-color: var(--color6); min-width: 91px; text-align: center; font-size: var(--fontsize7); transition-duration: 300ms; display: inline-block;}.modal-buttons a:hover{color: var(--color2); background: var(--color4);}.modal-content{padding: 0 30px;}#about .container.intro{background: var(--color4);}#about .intro h1, #about .intro h3{color: var(--color2);}#about .intro .content{color: var(--color2);}.line-left{position: relative; padding-left: 38px;}.line-left:before{content:""; display:block; width: 4px; height: calc(100% - 35px); position: absolute; background: var(--color2); bottom: 0; left: 0;}html[lan=ar] .line-left:before{left: unset; right:0;}html[lan=ar] .line-left{position: relative; padding-right: 38px; padding-left: 0px;}.line-left-h3:before{height: calc(100% - 16px);}.padding-top-120{padding-top:120px;}.text-end{text-align: end;}.text-start{text-align: start;}.container.dark-text .content{color: var(--color7);}.margin-top-64{margin-top:64px;}/* contact-form */.modal-container.contact-modal .modal-inner{max-width: 600px; background: var(--color4); padding-bottom: 0; color: var(--color2); width: calc(100% - 25px);}#contact-form{width: 100%; margin-top: 20px;}#contact-form .title{font-size: 50px; background: black; width: 275px; color: white; left: 0; right: 0; margin: auto; text-transform: uppercase; z-index: 1; position: relative; box-shadow: #000000 0 0 3px;}#contact-form .wrapper form{width: calc(100%); padding: 0px 0 15px;}#contact-form .field{background: var(--color8); margin: 11px 0px; padding: 10px 10px 0px 10px; border: none; border-radius: 7px;}#contact-form label{display: block; text-transform: capitalize; font-size: 12px; margin-bottom: 0px; color: #727272;}#contact-form .fields{display: inline-block; width: calc(100%); max-width: 900px;}#contact-form input[type="text"], #contact-form input[type="email"], #contact-form input[type="tel"], #contact-form select, #contact-form textarea{-moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; background: none; border: none; outline: 0; width: calc(100% - 11px); height: 50px; box-shadow: inset 100px 100px var(--color8);}#contact-form input[type="text"]::placeholder , #contact-form input[type="email"]::placeholder, #contact-form input[type="tel"]::placeholder, #contact-form select::placeholder, #contact-form textarea::placeholder{opacity: 0.2}#contact-form textarea{height: 106px; margin-top: 14px; max-width: calc(100% - 11px); min-width: calc(100% - 11px); min-height: 26px; max-height: 56px;}#contact-form .textfield{background: var(--color8);}#contact-form input[type="submit"], #contact-form input[type="reset"], #contact-form input[type="button"]{-moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; border-radius: 100px; border: 0; display: inline-block; font-size: 0.8rem; font-weight: 300; height: 2.75rem; line-height: 2.75rem; outline: 0; padding: 0 1.25rem 0 1.35rem; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; background: var(--color2); color: var(--color4); width: calc(100% - 30px); max-width: 900px; cursor: pointer;}#contact-form .wrongemailwarning{font-size: 12px; padding: 0px 0 10px; color: red;}#contact-form .empty-warning{font-size: 11px; padding: 6px 0; color: #ff006a; text-transform: capitalize;}#contact-form .budget{padding-bottom: 13px; padding-right: 15px; background: transparent; display: none;}#contact-form .budgetlable{margin-bottom: 14px; display: block; text-transform: uppercase; font-size: 12px; margin-bottom: 14px; color: #727272;}#contact-form .budgetamount{font-size: 20px;}.modal-container.contact-modal .top-bar{background: var(--color7); height: 42px; color: var(--color4); position: relative;}.radios{display: flex; justify-content: space-around;}.radios input[type=radio]{opacity: 0; position: absolute; left: 0; top: 0;}#contact-form .radios label{position: relative; width: 100%; display: flex; flex-direction: column; align-items: center;}.radio-check{display: block; width: 20px; height: 20px; border: solid; border-radius: 100%; flex-direction: row; position: relative; color: var(--color5); border-width: 4px;}.radios label:after{content: ""; width: calc(100% - 50px); height: 3px; display: block; background: var(--color1); position: absolute; left: calc(50% + 25px); top: 13px; bottom: 0;}.radios label:last-child:after{display: none;}/* html[lan=ar] .radios label:after{content: ""; width: calc(100% - 50px); height: 3px; display: block; background: var(--color1); position: absolute; left: calc(50% + 25px); top: 13px; bottom: 0;}*/html[lan=ar] .radios label:first-child:after{display: none;}html[lan=ar] .radios label:last-child:after{display: block;}.radios label:has(input[type=radio]:checked) .radio-check{color: var(--color2); background: var(--color2); box-shadow: inset 0px 0px 0px 4px var(--color4);}.radios label span{min-height: 42px; display: inline-flex; align-items: center; margin: 12px 0; text-align: center;}.modal-content[disabled]{opacity: 0.6; pointer-events: none;}.menu-button svg{width: 28px; height: auto; margin-bottom: -4px; display: inline-block;}.menu span{display: flex;}.menu .menu-button{display: none;}.menu a.menu-button.active:after{display: none;}.menu-button path{transition-duration: 300ms; transform-origin: center; transform: rotate(0deg)translateY(0%);}.menu-button.active path#secondmenubar{transform: rotate(90deg); transform-origin: center;}.menu-button.active path#thirdmenubar{transform: translateY(10%); transform-origin: center;}.menu-button.active path#firstmenubar{transform: translateY(-10%);}.menu:has(.menu-button.active) span{position: absolute; bottom: -114px; background: var(--color4); display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; box-shadow: 0px 0px 2px 0px var(--color2); width: 143px; border: none; border-radius: 10px; overflow: hidden; transition-duration: 300ms; z-index: 1;}.menu:has(.menu-button.active) span a{padding: 14px 0; margin: 0; width: 100%; text-align: center; transition-duration: 200ms;}.menu:has(.menu-button.active) span a.active{background: var(--color9);}.menu:has(.menu-button.active) span a:hover{background: var(--color2); color: var(--color5);}.scrolled .menu:has(.menu-button.active) span{bottom: -126px;}.menu-overlay{display: none; position: fixed; width: 100%; height: 100%; background: var(--color9); top: 0; right: 0;}.menu:has(.menu-button.active) .menu-overlay{display: block;}.menu:has(.menu-button.active) span a.active:after{display: none;}.language a{color: var(--color1); font-family: 'Noto Kufi Arabic'; margin-right: -4px; font-size: var(--fontsize6);}html[lan=ar] .language a{font-family: 'Inter'; font-size: var(--fontsize6); line-height: var(--fontsize3);}.language span{display: inline-block; height: 2px; background: var(--color1); width: 20px; transform-origin: center; transform: rotate(-68deg); margin-bottom: 4px; margin-right: -5px; margin-left: -5px;}.language a:hover{color: var(--color5);}html[lan=ar]{direction: rtl;}html[lan=ar] .language{right: unset; left: 23px;}html[lan=ar] .menu a{margin: 0 40px 0px 0px;}input,textarea{font-family: inherit;}.button-container.buttons-row{display: flex; justify-content: flex-start;}.button-container.buttons-row a.button.b-underlined{margin-right: 21px;}html[lan=ar] .button-container.buttons-row a.button.b-underlined{margin-left: 21px; margin-right:0;}.slide-tags .tag .tag-number span{margin: 0 5px;}.flex-row-reverse{display: flex; flex-direction: row-reverse;}.loader{position: fixed; z-index: 9999999; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--color9);}.loader svg{width: 3.75em; transform-origin: center; animation: rotate-loader 2s linear infinite;}.loader circle{fill: none; stroke: var(--color5); stroke-width: 4px; stroke-dasharray: 1, 200; stroke-dashoffset: 0; stroke-linecap: round; animation: dash-loader 1.5s ease-in-out infinite;}@keyframes rotate-loader{100%{transform: rotate(360deg);}}@keyframes dash-loader{0%{stroke-dasharray: 1, 200; stroke-dashoffset: 0;}50%{stroke-dasharray: 90, 200; stroke-dashoffset: -35px;}100%{stroke-dashoffset: -125px;}}html[lang='ar'] body,html[lang='ar'] h1,html[lang='ar'] h2,html[lang='ar'] h3,html[lang='ar'] h4,html[lang='ar'] h5,html[lang='ar'] h6{font-family: "Noto Kufi Arabic";}a.flex{display: flex;}.menu-button{margin-left: 30px;}html[lan=ar] .menu-button{margin-right: 30px; margin-left:0px;}