@import url("https://fonts.googleapis.com/css2?family=Anton&family=Noto+Nastaliq+Urdu&family=Oswald:wght@200&family=Poor+Story&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Cinzel&family=Michroma&family=Noto+Nastaliq+Urdu&family=Oswald:wght@200&family=Poor+Story&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Cinzel&family=Michroma&family=Noto+Nastaliq+Urdu&family=Oswald:wght@200&family=Poor+Story&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Cinzel&family=Michroma&family=Noto+Nastaliq+Urdu&family=Oswald:wght@200&family=Poor+Story&family=Ubuntu:wght@300&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap");

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   text-decoration: none;
   list-style: none;
   font-family: "Tajawal", sans-serif;
   transition: all 0.4s;
   outline: none;
   scroll-behavior: smooth;
}

:root {
   --heading-font: "Michroma", sans-serif;
   --small-font: 'ubuntu', sans-serif;
   --main-color: white;
   --color-red: #ff0505cf;
   --linear-gradient: linear-gradient(rgb(6, 6, 6), #460000);
}

body {
   overflow-x: hidden;
}

.my-service {
   margin: 0px 25px;
}


section#first-section {
   background: rgba(0, 0, 0, 0.7) url("11.jpg");
   height: 100vh;
   background-repeat: no-repeat;
   background-size: cover;
   background-blend-mode: darken;
}

nav {
   background-color: #000000;
   display: flex;
   justify-content: space-evenly;
   width: 100%;
   position: sticky;
   top: 1px;
}

ul {
   display: flex;
}

a.none {
   text-decoration: none;
}

h3 {
   padding-top: 20px;
   font-weight: bold;
   font-size: 45px;
   font-family: sans-serif;
   color: var(--main-color)
}

h3 span {
   font-size: 30px;
   color: var(--color-red);
}

ul li {
   list-style: none;
   padding-top: 20px;
   padding-left: 35px;
   padding-right: 35px;
}

ul li a.nav-items {
   text-decoration: none;
   color: var(--main-color)
}

.nav-items:hover {
   color: var(--color-red);
   transition: 0.5s;
}

ul li a.nav-items.active::after {
   content: "";
   width: 100%;
   height: 1px;
   background-color: var(--color-red);
   margin: auto;
   display: block;
}

ul li a.nav-items.active {
   color: var(--color-red);
}

li a::after {
   content: "";
   width: 0;
   height: 1px;
   background-color: var(--color-red);
   margin: auto;
   display: block;
}

li a:hover::after {
   width: 100%;
   transition: width 0.3s linear;
}

.bi-search {
   font-size: 28px;
   position: absolute;
   top: 7px;
   color: var(--main-color);
   cursor: pointer;
}


i.bi-list {
   position: absolute;
   font-size: 35px;
   color: var(--main-color);
   cursor: pointer;
   display: none;
   top: 5px;
   right: 50px;
}

i.bi-x-lg {
   position: absolute;
   font-size: 30px;
   color: var(--main-color);
   cursor: pointer;
   display: none;
   top: 10px;
   right: 50px;
}

#my-self {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   height: 80vh;
   width: 100vw;
   z-index: 1;
}

.info {
   color: var(--main-color);
}

h1#myself-heading {
   font-size: 70px;
   font-family: var(--heading-font);
}

p.para-myself {
   max-width: 600px;
   font-size: 18px;
}


button.btn-myself {
   background: transparent;
   color: var(--main-color);
   border: 1px solid red;
   border-radius: 10px;
   padding: 5px 10px;
   margin: 15px;
   font-size: 17px;
   text-align: center;
}

button.btn-myself:hover {
   background-color: darkred;
   color: var(--main-color);
   transition: 0.6s;
}

/* About Section */

#about-section {
   background-color: #c4bbbb;
   background: var(--linear-gradient);
}

h1.about-heading {
   padding: 50px 0px;
   text-align: center;
   font-family: var(--heading-font);
   color: var(--main-color);
}

.about-content {
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--main-color);

}


.about-image {
   background: url("22.jpeg");
   height: 80vh;
   width: 400px;
   background-repeat: no-repeat;
   background-size: cover;
   margin: 20px 0px;
   border-radius: 7px;
   box-shadow: 2px 2px 2px 2px black;
   -webkit-box-shadow: -11px 11px 24px -9px rgba(8, 7, 8, 0.61);
   -moz-box-shadow: -11px 11px 24px -9px rgba(8, 7, 8, 0.61);
   box-shadow: -11px 11px 24px -9px rgba(8, 7, 8, 0.61);
   transition: 0.7s;
}

.about-image:hover {
   border-radius: 50%;

}

.about-me {
   max-width: 600px;
   padding-left: 50px;
}

.about-me-heading {
   font-family: var(--small-font);
}

.about-me-para a {
   padding-left: 10px;

}





/* قسم المستوي  */
.level {
   background-color: #ffffff;
   background: var(--linear-gradient);
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 10px 35px;
}

.boy-level {
   width: 90%;
   height: 22px;
   background-color: #fff;
   border-radius: 20px;
   margin: 30px;
}

.l1,
.l2,
.l3,
.l4,
.l5 {
   height: 22px;
   background-color: #1ec0ff;
   border-radius: 20px;
   padding-right: 3px;
   font-size: 15px;
   color: #fff;
   font-weight: 900;
}

.l1 {
   width: 95%;
   animation: l1 20s;
}

.l2 {
   animation: l2 20s;
   width: 85%;
}

.l3 {
   width: 75%;
   animation: l3 20s;
}

.l4 {
   width: 80%;
   animation: l4 20s;
}

.l5 {
   width: 60%;
   animation: l5 20s;
}

@keyframes l1 {
   0% {
      width: 0;
   }

   100% {
      width: 95%;
   }
}

@keyframes l2 {
   0% {
      width: 0;
   }

   100% {
      width: 85%;
   }
}

@keyframes l3 {
   0% {
      width: 0;
   }

   100% {
      width: 75%;
   }
}

@keyframes l4 {
   0% {
      width: 0;
   }

   100% {
      width: 80%;
   }
}

@keyframes l5 {
   0% {
      width: 0;
   }

   100% {
      width: 60%;
   }
}

/* زر الذهب الى الاعلى */
.up {
   position: fixed;
   width: 40px;
   height: 40px;
   bottom: -45px;
   right: 20px;
   background-color: #fff;
   color: #1e2030;
   font-weight: 900;
   font-size: 25px;
   padding: 6px;
   border-radius: 5px;
   line-height: 25px;
   cursor: pointer;
}

.up.show {
   bottom: 10px;
}

.up:hover {
   transform: scale(1.2);
   color: #1ec0ff;
}

/* الشريط الجنابي */
::-webkit-scrollbar {
   width: 8px;
}

::-webkit-scrollbar-track {
   background: #fff;
}

::-webkit-scrollbar-thumb {
   background-color: #0013a0;
}

/* قسم الاعمال */
.Projects {
   text-align: center;
   padding: 50px 25px;
   width: 100%;
}

.imags {
   width: 100%;
   display: flex;
   justify-content: center;
   flex-direction: row;
   flex-wrap: wrap;
}

.imags img {
   width: 270px;
   height: 205px;
   margin: 15px;
   border-radius: 10px;
   border: 3px solid #6fbfdf;
   transition: 0.6s;
}

.imags img:hover {
   scale: 1.1;
   border: hidden;
}

/* تحميل الاكود */
.code {
   width: 100%;
   margin-top: 40px;
}


.code > a{
   background-color: #0b4e68;
}
.code a {
   font-size: 17px;
   font-weight: 600;
   color: #fff;
   text-decoration: none;
   padding: 2px;
   border-radius: 3px;
}

.code a:hover {
   color: #0b4e68;
}

.code a:hover .fa-cloud-arrow-down {
   color: green;
}

/* قسم الخدمات */
.service-section {
   background-color: #2c2c2c;
   padding: 10px 25px;
   width: 100%;
}

.content {
   display: flex;
   justify-content: center;
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
}

.card {
   background-color: #fff;
   width: 345px;
   box-shadow: 0 5px 25px rgba(1, 1, 1, 15%);
   border-radius: 10px;
   padding: 20px;
   text-align: center;
   margin: 20px;
   cursor: pointer;
}

.card:hover {
   transform: scale(1.1);

}

.icons {
   font-size: 40px;
   color: #1ec0ff;
}

.info h6 {
   font-size: 25px;
   color: #1ec0ff;
}

/* صفحات المطور */
.cards {
   padding: 10px 25px;
}

.content2 {
   display: flex;
   justify-content: center;
   flex-direction: row;
   flex-wrap: wrap;
   text-align: center;
   width: 100%;
}

.card2 {
   background-color: #f8f8f8;
   width: 345px;
   height: 225px;
   box-shadow: 0 5px 15px rgba(1, 1, 1, 40%);
   border-radius: 10px;
   padding: 15px;
   margin: 25px;
   margin-top: 45px;
}

.img img {
   width: 150px;
   height: 150px;
   margin-top: -50px;
   border-radius: 50%;
   border: 2px solid #1ec0ff;
   z-index: 999;
}

.img:hover img {
   transform: rotate(-15deg);
   border: 4px solid #1ec0ff;
}

.info h5 {
   font-size: 20px;
   padding-top: 10px;
   color: #1ec0ff;
   font-weight: 900;
}

.card2:hover {
   transform: scale(1.1);
}

.info-btn {
   display: flex;
   justify-content: center;
   padding: 5px;
   font-weight: bold;
   background-color: #1ec0ff;
   border-radius: 5px;
   margin: 10px;
   color: #fff;
}

.info-btn:hover {
   color: #1e2030;
}

/* قسم تواصل معنا  */
footer {
   width: 100%;
   background-color: #011820;
   padding: 30px;
   text-align: center;
   color: #f8f8f8;
   font-size: 22px;
   display: flex;
   flex-direction: column;
}

.icons-footer a {
   font-size: 30px;
   margin: 15px;
   color: #fff;
}

.icons-footer a:hover {
   color: #1e2030;
}

.link {
   display: flex;
   justify-content: left;
   justify-content: space-around;
}

.link h4 {
   color: #ffffff;
}

.link span {
   color: red;
}

.link a {
   border: #1ec0ff 1px;
}

.link a:hover {
   border: #f7f7f7 5px;

}


/*=========
   Projects
======*/

.project {
   padding: 3rem 7rem;
   background-color: #070900;
}


.project .heading {
   font-size: 3.1rem;
   border-left: 7px solid #FD7F2C;
   padding-left: 8px;
   margin-bottom: 4rem;
   color: #fff;
   font-weight: 600;
}

.project .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 0 2rem;
}

.project .container .box {
   width: 20rem;
   /* background-color: red; */
   position: relative;
   overflow: hidden;
}

.project .container .box img {
   width: 20rem;
   border: 1px solid #FD7F2C;
   border-radius: 8px;
   transition: 0.3s all ease;
}

.project .container .box img:hover {
   transform: scale(1.05);
}

.project .container .box p {
   line-height: 1.5;
   margin-left: 7px;
   color: #999;
   margin-top: 10px;
}

.review {
   background-color: #111;

}

.review .heading {
   font-size: 2rem;
   border-left: 7px solid #FDA766;
   padding-left: 9px;
   margin-bottom: 2rem;
   color: #fff;
   font-weight: 600;
}

.review .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.review .container .box p {
   color: #c0bebe;
   margin: 15px;
}

.review .container .image img {
   width: 100px;
   margin: 10px;
   border-radius: 30%;

}

.review .container .box h2 {
   font-size: 25px;
   color: #ffffff;
   margin: 5px;
}

.review .container .box .icons1 i {
   color: #ff7316;
}

/* الموبايل */

@media (max-width:600px) {
   body {
      background-color: #1e2030;
      width: 100%;
   }

   .nav-mobile {
      display: block;
      align-items: center;
      position: fixed;
      width: 100%;
      background-color: #1ec0ff;
      padding: 5px;
      z-index: 999;
   }

   .nav-mobile h1 a {
      color: #fff;
      font-size: 30px;
      padding-left: 20px;
      letter-spacing: 5px;
   }

   .mnuo {
      position: absolute;
      top: 18px;
      right: 25px;
   }

   .fa-bars {
      font-size: 25px;
      transform: scaleX(1.2);
      color: #fff;
   }

   #mnuo:checked+.mo-bl {
      display: block;
      width: 100%;
   }

   .mo-bl a {
      width: 100%;
      display: flex;
      padding: 8px;
      font-size: 22px;
      font-weight: bolder;
      margin-top: 5px;
      padding-left: 20px;
      color: #1e2030;
   }

   .mo-bl a:hover {
      color: #fff;
      border-left: 2px solid #fff;
   }

   .mo-bl .fa-solid {
      position: absolute;
      right: 5vw;
      color: #1e2030;
      font-size: 24px;
      padding-top: 8px;
   }

   .nav-mobile {
      animation: mobile 1s 1;
   }

   @keyframes mobile {
      0% {
         transform: translateY(-100px);
      }

      50% {
         transform: translateY(-200px);
      }

      100% {
         transform: translateY(0);
      }
   }

   .mo-bl {
      animation: mo 1s 1;
   }

   @keyframes mo {
      0% {
         transform: translateX(100px);
      }

      50% {
         transform: translateX(-100px);
      }

      100% {
         transform: translateX(0);
      }
   }

   footer {
      width: 100%;
      background-color: #1f1f1f;
      padding: 15px;
      color: #032431;
      font-size: 15px;
      font-weight: 600;
   }

   .review .container {
      display: contents;

   }




   /* قسم المستوي */
   .level {
      padding: 10px 20px;
   }

   .title {
      font-size: 30px;
   }

   .up {
      border: 1px solid #1ec0ff;
   }

   .code {
      width: 100%;
      margin-top: 35px;
      display: flex;
      flex-direction: column;
   }

   .code a {
      color: #fff;
      margin: 10px;
      background-color: #1ec0ff;
      padding: 5px 15px;
      border-radius: 3px;
   }
}

@media (max-width: 600px) {
   .nav-pc {
      display: none;
   }
}