@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Cairo:wght@200..1000&display=swap');


/* ------------------------------ */
/* :reset */
/* ------------------------------ */
* {
   margin: 0;
   border: none;
   outline: none;
   color: inherit;
   font: inherit;
   text-decoration: none;
   box-sizing: border-box;
   appearance: none;
}


/* ------------------------------ */
/* :theme:light:default */
/* ------------------------------ */
.light-theme {
   --primary-color: #4895ef;
   --border-color: #ced4da;
   --primary-text: #343a40;
   --secondary-text: #f8f9fa;
   --accent-text: #adb5bd;
   --background-primary: #f8f9fa;
   --background-secondary: #e9ecef;
   --background-messages: #f8e4cd;
   --background-transparent: rgba(0, 0, 0, 0.05);
   --background-transparent-plus: rgba(0, 0, 0, 0.1);
}


/* ------------------------------ */
/* :theme:dark */
/* ------------------------------ */
.dark-theme {
   --primary-color: #4895ef;
   --border-color: #495057;
   --primary-text: #f8f9fa;
   --secondary-text: #f8f9fa;
   --accent-text: #adb5bd;
   --background-primary: #212529;
   --background-secondary: #343a40;
   --background-messages: #f8e4cd;
   --background-transparent: rgba(255, 255, 255, 0.05);
   --background-transparent-plus: rgba(255, 255, 255, 0.1);
}


/* ------------------------------ */
/* ------------------------------ */
/* SCALE */
:root {
   --scale-elements: 1.0;
   --scale-header: 1.0;
}

@media (max-width: 1024px) {

 :root {
      --scale-elements: 0.8;
      --scale-header: 1.0;
   }

}

@media (max-width: 768px) {

 :root {
      --scale-elements: 1.0;
      --scale-header: 1.0;
   }

}

@media (max-width: 460px) {

   :root {
      --scale-elements: 0.6;
      --scale-header: 0.7;
   }

}


/* ------------------------------ */
/* :root */
/* ------------------------------ */
:root {
   --header-height: calc(76px * var(--scale-header));
   --container-width: calc(1200px * var(--scale-elements));
}


/* ------------------------------ */
/* :html */
/* ------------------------------ */
body {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: center;
   min-height: 100vh;
   padding-top: calc(76px * var(--scale-header));
   overflow: visible;
   background-color: var(--background-primary);
   color: var(--primary-text);
   font-family: "Cairo", sans-serif;
   font-size: calc(15px * var(--scale-elements));
   font-weight: 400;
   line-height: 1;
}

::placeholder {
   color: var(--accent-text);
}

::-webkit-scrollbar {
   width: 0;
}


/* ------------------------------ */
/* :global */
/* ------------------------------ */
.float-left {
   float: left !important;
}

.float-right {
   float: right !important;
}

.hidden {
   display: none !important;
}

.padding {
   padding: calc(20px * var(--scale-elements));
}

.gap {
   gap: calc(20px * var(--scale-elements));
}

.underline,
.underline-active:hover {
   cursor: pointer !important;
   text-decoration: underline !important;
}

.highlight,
.highlight-active:hover {
   cursor: pointer !important;
   color: var(--primary-color) !important;
}

.cover {
   width: 100% !important;
   height: 100% !important;
}

.span-2 {
   grid-column: span 2 !important;
}

.span-3 {
   grid-column: span 3 !important;
}

.span-4 {
   grid-column: span 4 !important;
}

.margin-top {
   margin-top: auto !important;
}

.margin-right {
   margin-right: auto !important;
}

.margin-bottom {
   margin-bottom: auto !important;
}

.margin-left {
   margin-left: auto !important;
}

.scroll-to {
   cursor: pointer;
   position: fixed;
   bottom: calc(25px * var(--scale-b));
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(50px * var(--scale-b));
   height: calc(50px * var(--scale-b));
   background-color: var(--primary-color);
   border-radius: calc(50px * var(--scale-b));
   color: #f8f9fa;
}

.scroll-to.to-top {
   right: calc(25px * var(--scale-b));
   bottom: calc(100px * var(--scale-b));
}

.scroll-to.to-bottom {
   right: calc(25px * var(--scale-b));
   bottom: calc(25px * var(--scale-b));
}

.scroll-to .material-icons-outlined {
   font-size: calc(25px * var(--scale-b));
}


/* ------------------------------ */
/* :header */
/* ------------------------------ */
.header {
   position: fixed;
   display: flex;
   flex-direction: column;
   align-items: center;
   top: 0;
   width: 100%;
   height: var(--header-height);
   background-color: var(--background-primary);
   border-bottom: calc(1px * var(--scale-header)) solid var(--border-color);
   border-top: calc(5px * var(--scale-header)) solid var(--primary-color);
   z-index: 5;
}

.header .header-container {
   display: grid;
   grid-template-columns: 2fr 1fr;
   width: var(--container-width);
   height: calc(70px * var(--scale-header));
   border-left: calc(1px * var(--scale-header)) solid var(--border-color);
   border-right: calc(1px * var(--scale-header)) solid var(--border-color);
}

.header .website-name {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   color: var(--primary-text);
   font-size: calc(24px * var(--scale-header));
   font-weight: 600;
}

.header .header-nav {
   display: flex;
   flex-direction: row;
}

.header .header-link {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(70px * var(--scale-header));
   background-color: var(--background-primary);
   border-bottom: calc(5px * var(--scale-header)) solid var(--border-color);
   color: var(--accent-text);
   font-size: calc(20px * var(--scale-header));
   font-weight: 800;
   text-transform: uppercase;
}

.header :is(.website-name,.header-link):hover {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}


/* ------------------------------ */
/* :layout */
/* ------------------------------ */
.wrapper {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: center;
   width: var(--container-width);
   min-height: calc(100vh - var(--header-height));
   border-left: calc(1px * var(--scale-elements)) solid var(--border-color);
   border-right: calc(1px * var(--scale-elements)) solid var(--border-color);
}


/* ------------------------------ */
/* :section:header */
/* ------------------------------ */
.section-header {
   display: flex;
   flex-direction: row;
   justify-content: end;
   align-items: center;
   width: 100%;
   height: 100px;
   background-color: var(--background-transparent);
}

.section-header .name {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: auto;
   height: 100px;
   padding: 0px 50px;
   background-color: var(--background-primary);
   color: var(--primary-text);
   font-size: 50px;
   font-weight: 800;
   text-transform: uppercase;
}


/* ------------------------------ */
/* :about */
/* ------------------------------ */
.about {
   display: grid;
   grid-template-columns: auto auto;
   width: 100%;
   min-height: 150px;
   overflow: visible;
   background-color: var(--background-primary);
   border: 1px solid var(--border-color);
}

.about .image {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 10px;
   background-color: var(--background-transparent);
   border-left: 1px solid var(--border-color);
   aspect-ratio: 1 / 1;
}

.about .description {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: center;
   padding: 40px;
   color: var(--primary-text);
   font-size: 26px;
   font-weight: 300;
   line-height: 1.5;
   text-align: right;
}


/* ------------------------------ */
/* :languages */
/* ------------------------------ */
.languages {
   display: flex;
   flex-direction: row;
   width: 100%;
   height: auto;
   color: var(--primary-text);
   font-size: 25px;
   font-weight: 800;
}

.languages .language {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: auto;
   aspect-ratio: 1 / 0.5;
   border: 1px solid var(--border-color);
}


/* ------------------------------ */
/* :projects */
/* ------------------------------ */
.projects {
   display: grid;
   grid-template-columns: 1fr 1fr;
   width: 100%;
   height: auto;
   overflow: visible;
}

.projects .project {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: auto;
   overflow: visible;
   border: 1px solid var(--border-color);
}

.projects .project-image {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: auto;
   padding: 10px;
   overflow: visible;
   background-color: var(--background-transparent);
   border-bottom: 1px solid var(--border-color);
   margin-bottom: 20px;
}

.projects .project-name {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 40px;
   color: var(--primary-text);
   font-size: 25px;
   font-weight: 600;
   text-align: center;
}

.projects .project-description {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: center;
   padding: 10px;
   color: var(--primary-text);
   font-size: 18px;
   font-weight: 300;
   line-height: 1.5;
}

.projects .project-links {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 110px;
   padding: 20px;
}

.projects .project-link {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 70px;
   background-color: var(--background-primary);
   border: 1px solid var(--border-color);
   color: var(--accent-text);
   font-size: 20px;
   font-weight: 800;
   text-align: center;
   text-transform: uppercase;
}

.projects .project-link:hover {
   cursor: pointer;
   color: var(--primary-text);
   background-color: var(--background-transparent);
}


/* ------------------------------ */
/* :services */
/* ------------------------------ */
.services {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: auto;
   overflow: visible;
}

.services .service {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 150px;
   background-color: var(--background-primary);
   border: 1px solid var(--border-color);
}

.services .service-image {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 150px;
   height: 150px;
   padding: 10px;
   aspect-ratio: 1 / 1;
   background-color: var(--background-transparent);
   border-left: 1px solid var(--border-color);
}

.services .service-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 10px;
   width: 100%;
   height: 200px;
   padding: 20px;
}

.services .service-name {
   display: flex;
   flex-direction: row;
   justify-content: end;
   align-items: center;
   width: 100%;
   height: 30px;
   color: var(--primary-text);
   font-size: 30px;
   font-weight: 600;
}

.services .service-description {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: end;
   width: 100%;
   height: 20px;
   color: var(--primary-text);
   font-size: 20px;
   font-weight: 300;
   line-height: 1.5;
   text-align: right;
}


/* ------------------------------ */
/* :pricing */
/* ------------------------------ */
.pricing {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   width: 100%;
   height: auto;
   overflow: visible;
}

.pricing .price {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: auto;
   padding: 20px;
   overflow: visible;
   background-color: var(--background-primary);
   border: 1px solid var(--border-color);
}

.pricing .price-sar {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   aspect-ratio: 1 / 0.5;
   background-color: var(--primary-color);
   color: var(--primary-text);
   font-size: 50px;
   font-weight: 800;
}

.pricing .price-items {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 30px;
   width: 100%;
   height: auto;
   padding: 30px 0px;
}

.pricing .items-item {
   display: flex;
   flex-direction: row-reverse;
   justify-content: end;
   align-items: center;
   gap: 10px;
   width: 100%;
   height: 20px;
   color: var(--primary-text);
   font-size: 20px;
   font-weight: 400;
   text-transform: uppercase;
}

.pricing .item-icon * {
   color: #4895ef;
}


/* ------------------------------ */
/* :contact */
/* ------------------------------ */
.contact {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   width: 100%;
   height: auto;
   padding: 20px;
   overflow: visible;
   background-color: var(--background-primary);
   border: 1px solid var(--border-color);
}

.contact .contact-info {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: start;
   gap: 20px;
   width: 100%;
   height: auto;
   overflow: visible;
}

.contact .my-info {
   display: flex;
   flex-direction: row;
   gap: 20px;
   width: 100%;
   height: 100px;
}

.contact .info-image {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 80px;
   height: 100px;
   aspect-ratio: 4 / 5;
   background-color: var(--background-transparent-plus);
}

.contact .info-more {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   gap: 10px;
}

.contact .info-copy {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   color: var(--primary-text);
   font-size: 16px;
   font-weight: 200;
   line-height: 1.5;
}

.contact .info-location {
   display: block;
   width: 100%;
   height: 20px;
   color: var(--primary-color);
   font-size: 20px;
   font-weight: 300;
   line-height: 1;
}

.contact .info-link {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   gap: 20px;
   width: 100%;
   height: 60px;
   padding: 20px;
   background-color: var(--background-primary);
   border: 1px solid var(--border-color);
   color: var(--primary-text);
   font-size: 20px;
   font-weight: 600;
}

.contact .link-value {
   margin-left: auto;
}

.contact .info-link:hover {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}


/* ------------------------------ */
/* :form */
/* ------------------------------ */
.form {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: start;
   gap: 10px;
   width: 100%;
   height: auto;
   padding: 10px;
   overflow: visible;
   background-color: var(--background-transparent);
}

.form .input-text {
   display: block;
   width: 100%;
   height: 60px;
   padding: 20px;
   background-color: var(--background-primary);
   border: 1px solid var(--border-color);
   color: var(--primary-text);
   font-size: 18px;
   font-weight: 400;
   text-align: right;
}

.form .input-area {
   display: block;
   width: 100%;
   height: 107px;
   padding: 20px;
   background-color: var(--background-primary);
   border: 1px solid var(--border-color);
   color: var(--primary-text);
   font-size: 18px;
   font-weight: 400;
   text-align: right;
}

.form .input-submit {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 60px;
   padding: 20px;
   background-color: var(--primary-color);
   border: var(--primary-color);
   color: var(--primary-text);
   font-size: 18px;
   font-weight: 800;
   text-align: center;
   text-transform: uppercase;
}