*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "cairo", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
html{
  scroll-behavior: smooth;
}
body{
  background-image: url(https://images.pexels.com/photos/5531302/pexels-photo-5531302.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
    /* background-image: url(https://images.pexels.com/photos/7120865/pexels-photo-7120865.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1); */
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    max-width: 100vw;
    /* min-height: 100vh; */
    overflow-x: hidden;
}
#all-pr-812{
  background-color: #3f666677;
  /* padding-top: 0px; */
}
#logo{
  background-color: #3f666677;
  min-height: 20vh;
  padding-top: 25vh;
  padding-bottom: 0px;
}
#logo h2{
  font-family: "Playwrite IN", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 60px;
  color: #ebf9ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: max-content;
}
#logo h2 span{
  color: #000000;
  border: #00000000 solid 4px;
  border-bottom: #000000 solid 6px;
  border-radius: 100px;
  padding-bottom: 10px;
  padding-top: 30px;
}
.venom{
  background-color:  #000000;
  width: 15vw;
  height: 10px;
  border: none;
  margin: 40px;
  border-radius: 50px;
}
body::-webkit-scrollbar {
  display: none;
}
a{
    text-decoration: none;
    color: #ffffff;
}
.header{
  width: 100vw;
  height: 8vh;
  background-color: #3090997b;
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  padding: 0px 10vw 0px 10vw;
  z-index: 1000;
  /* overflow: hidden; */
}
.header span{
  /* background-color: #000000; */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.header .qasxmn{
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  width: max-content;
  height: 100%;
}
.header .qasxmn li{
  transition: 0.4s all ease;
  position: relative;
  display: inline-block;
}
.header .qasxmn li:hover{
  transition: 0.4s all ease;
}
.header .qasxmn li::after{
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 3px;
  bottom: -5px;
  left: 0;
  background-color: #ffffff;
  transform-origin: bottom left;
  transition: transform 0.5s ease-out;
}
.header .qasxmn li:hover::after{
  transform: scaleX(1);
  transform-origin: bottom left;
}
.header .qasxmn a{
  height: 100%;
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  margin-left: 15px;
  margin-right: 15px;
}
.header .ima{
  /* padding: 5px; */
  border-radius: 100px;
  /* animation: m-po09 10s linear infinite; */
  background-image: url(images/My-photo-img.jpg);
  background-position: center;
  background-size: cover;
}
.header .qasxmn #vbf{
  background-color: #000000;
  width: 35px;
  height: 35px;
  margin-left: 5px;
  margin-right: 5px;
}
.header .ima i{
  transform: rotate(180deg);
  font-size: 30px;
  transition: 0.5s;
}
.header .ima i:hover{
  background-color: #00608d;
  box-shadow: #00608d 0px 0px 20px 20px;
}
@keyframes m-po09 {
  0% {
      opacity: 0;
      transform: translateX(0%);
  }
  50% {
      opacity: 1;
      transform: translateX(0%);
  }
  90% {
      opacity: 1;
      transform: translateX(0%);
  }
  100% {
      opacity: 0;
      transform: translateX(0%);
  }
}
.container{
    max-width: 100vw;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-left: 8vw;
    padding-right: 8vw;
    padding-bottom: 20vh;
    padding-top: 20vh;
}
#real-m{
  padding-left: 0vw;
  padding-right: 0vw;
  padding-bottom: 0vh;
  padding-top: 0vh;
  background-color: #133636b3;
  box-shadow: #133636b3 0px 0px 20px 20px;
}
.vbxz{
  display: flex;
  align-items: center;
  justify-content: left;
  width: 85%;
  height: 8vh;
  color: white;
  margin-left: 0vw;
  margin-right: 0vw;
  position: sticky;
  top: 7.6vh;
  margin-bottom: 10vh;
}
.lista{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 400px;
    height: 7vh;
    color: #66c4ff;
    background-color: rgba(1, 62, 62, 0.656);
    border-bottom: #00c2ff solid 4px;
    z-index: 7;
    /* border-right: #00c2ff solid 4px;
    border-left: #00c2ff solid 4px;
    border-radius: 0px 0px 20px 20px; */
}
.lista a{
    transition: 0.3s;
}
.lista a:hover{
    color: rgb(0, 0, 0);
    box-shadow:  rgb(0, 97, 162) 0px 0px 20px 5px;
    background-color: #c3c3c3;
    border-radius: 10px;
    padding: 5px;
}
.vee{
    /* background-color: #000000b0; */
    background-color: #00000055;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    display: none;
}
/* .vee img{
  animation: vee 20s linear infinite;

} */
@keyframes vee {
  0% {
      opacity: 0;
      transform: translateY(-100%);
  }
  2% {
      opacity: 1;
      transform: translateY(0%);
  }
  90% {
      opacity: 1;
      transform: translateY(0%);
  }
  100% {
      opacity: 1;
      transform: translateY(0%);
  }
}
.vee2{
    background-color: #00000055;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.vee2 h3{
    width: 100%;
    height: 88%;
    display: flex;
    align-items: end;
    justify-content: left; 
    flex-wrap: wrap;
    gap: 20px;
    transition: 0.5s;
    /* background-color: #0000004d;  */
    color: #e8e8e8;
    font-size: 18px;
    font-weight: 400;
    padding-left: 5%;
    /* display: none; */
    /* padding-top: 20%; */
    opacity: 0%;
}
.vee2 h6{
    background-color: rgba(21, 111, 147, 0.456);
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
    height: 12%;
    color: #ffffff;
    font-size: 17px;
    padding-left: 5%;
}
.pro{
    width: 380px;
    height: 250px;
    background-color: rgba(80, 167, 170, 0.51);
    box-shadow: #0000007c 20px 20px 20px 4px;
    border-radius: 10px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    overflow: hidden;
    transition: 0.5s;
}
.vee h3{
    width: 100%;
    height: 88%;
    display: flex;
    align-items: center;
    justify-content: center; 
    flex-wrap: wrap;
    gap: 20px;
    transition: 0.5s;
    /* background-color: #00000083;  */
    color: #e8e8e8;
    font-size: 25px;
    font-weight: 400;
    /* display: none; */
    /* padding-top: 20%; */
    /* opacity: 0%; */
    animation: vee-h3 25s linear infinite;
}
@keyframes vee-h3 {
  0% {
      opacity: 0;
      transform: translateY(-100%);
  }
  1% {
      opacity: 1;
      transform: translateY(0%);
  }
  90% {
      opacity: 1;
      transform: translateY(0%);
  }
  100% {
      opacity: 1;
      transform: translateY(0%);
  }
}
.pro:hover .vee{
    display: block;
    transition: 2s;
}
/* .pro h3:hover{
    color: #000000;
    opacity: 100%;
    background-color: #00000000;
} */
.pro h3 a{
    /* width: 100px; */
    background-color: #000000;
    overflow: hidden;
    font-size: 10px;
    padding: 10px;
    padding-bottom: 8px;
    border-radius: 11px;
    transition: 0.3s;
    border-bottom: rgb(9, 162, 186)  solid 5px;
    box-shadow:  rgba(255, 255, 255, 0.496) 0px 0px 20px 5px;
}
/* #eye{
  border-bottom: rgb(187, 6, 84) solid 5px;
} */
.pro h3 a:hover{
  box-shadow:  rgb(6, 187, 48) 0px 0px 20px 5px;
}
.pro h3 a img{
    width: 42px;
}
.vee h6{
    background-color: rgb(2, 72, 70);
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
    height: 12%;
    color: #ffffff;
    font-size: 17px;
}
.pro:hover .vee h6{
  background-color: #007c87;
}
.pro:hover{
    transform: translateY(-10px);
}

.span1 , .span2{
    color: #00d9ff;
    font-weight: 700;
    padding-right: 15px;
    padding-left: 0px;
}
.cover{
  width: 100vw;
  height: 110vh;
  position: absolute;
  top: 100vh;
}
#v-1{
    /* background-image: url(https://scholarships.af/wp-content/uploads/2023/05/USA-Diversity-Visa-lottery-2025.jpg); */
    /* background-image: url(https://images.pexels.com/photos/5940831/pexels-photo-5940831.jpeg); */
    background-image: url(https://images.pexels.com/photos/12514745/pexels-photo-12514745.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
    background-position: center;
    background-size: cover;
}

#v-2{
    background-image: url(https://en.amwalalghad.com/wp-content/uploads/2018/08/AlexBank-2.jpg);
    background-position: center;
    background-size: cover;
}

#v-3{
  background-image: url(https://www.hurawalhi.com/wp-content/uploads/2019/04/5.8-3-1030x579.jpg);
    background-position: center;
    background-size: cover;
}

#v-4{
    /* background-image: url(https://images04.nicepage.com/feature/612016/ecommerce-websites.jpg); */
    background-image: url(https://d1u4v6449fgzem.cloudfront.net/2020/03/The-Ecommerce-Business-Model-Explained.jpg);
    background-position: center;
    background-size: cover;
}

#v-5{
    background-image: url(https://dailytrust.com/wp-content/uploads/2021/01/Emirates-Flight-Sale-emirates-airlines.jpg);
    background-position: center;
    background-size: cover;
}

#v-6{
    /* background-image: url(https://gate.ahram.org.eg/Media/News/2021/10/12/2021-637696538275094163-509.jpg); */
    /* background-image: url(https://i0.wp.com/www.ibelieveinsci.com/wp-content/uploads/7lightning.png?fit=1024%2C576&ssl=1); */
    background-image: url(https://images.pexels.com/photos/158163/clouds-cloudporn-weather-lookup-158163.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
    background-position: center;
    background-size: cover;
}

#v-7{
    background-image: url(https://images.pexels.com/photos/5940831/pexels-photo-5940831.jpeg);
    background-position: center;
    background-size: cover;
}

#v-8{
    background-image: url(https://cdn1.dronahq.com/wp-content/uploads/2024/08/Dashboard-Image-Final.webp);
    background-position: center;
    background-size: cover;
}
#v-9{
    /* background-image: url(https://www.pcworld.com/wp-content/uploads/2024/09/shutterstock_2290358085.jpg?quality=50&strip=all&w=1024); */
    /* background-image: url(https://cdn.alweb.com/thumbs/shirkaty/article/fit710x532/1/%D8%B4%D8%B1%D9%83%D8%A9-%D9%8A%D9%88%D8%AA%D9%8A%D9%88%D8%A8-youtube.jpg); */
    background-image: url(https://vrextasy.com/upload/youtube-supports-k-live-streaming-for-degree-and-standard-video_2.jpg);
    background-position: center;
    background-size: cover;
}
#v-10{
    background-image: url(https://www.railvolution.net/resources/news/2900/1200x0_egypt-velaro-26.4-scheer.jpg);
    background-position: center;
    background-size: cover;
}
#v-11{
    background-image: url(https://static01.nyt.com/images/2022/11/14/multimedia/14google-privacy-pic-1-61f6/14google-privacy-pic-1-61f6-superJumbo.jpg);
    background-position: center;
    background-size: cover;
}
#v-12{
    background-image: url(https://platform.vox.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/10614579/GettyImages_511709408.jpg?quality=90&strip=all&crop=0%2C5.6111111111111%2C100%2C44.385185185185&w=2400);
    background-position: center;
    background-size: cover;
}
#v-13{
    background-image: url(https://buffer.com/resources/content/images/2024/09/The-Best-Time-to-Post-on-LinkedIn.png);
    background-position: center;
    background-size: cover;
}
#v-14{
    background-image: url(https://www.bleepstatic.com/content/hl-images/2024/01/26/microsoft-red-header.jpg);
    background-position: center;
    background-size: cover;
}
#v-15{
    /* background-image: url(https://www.phucanh.vn/media/news/2604_Instagram1.jpg); */
    background-image: url(https://img.freepik.com/free-psd/banner-follower-acquisition-with-3d-instagram-icon_125540-2895.jpg?semt=ais_hybrid);
    background-position: center;
    background-size: cover;
}
#v-16{
    background-image: url(https://i0.wp.com/innovation-village.com/wp-content/uploads/2023/11/elon_musk.jpeg?w=945&ssl=1);
    background-position: center;
    background-size: cover;
}
#v-17{
    background-image: url(https://www.datocms-assets.com/21211/1602248694-github-img.jpg?auto=format&w=807);
    background-position: center;
    background-size: cover;
}
#v-18{
    background-image: url(https://theigclub.com/wp-content/uploads/elementor/thumbs/138529499_10159073446255295_5222111569372919742_n-pt2koewkqz4gbfzb9qexbotsi9olkdlglqnu743z4w.jpg);
    background-position: center;
    background-size: cover;
}
#v-19{
    background-image: url(https://images.pexels.com/photos/5553044/pexels-photo-5553044.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
    background-position: center;
    background-size: cover;
}
#v-20{
    background-image: url(https://cdn.prod.website-files.com/61a9642430af319149dd1ce3/643eb31c6a2141794ef30793_AdobeStock_218394966.jpeg);
    background-position: center;
    background-size: cover;
}
#v-21{
    /* background-image: url(https://media.wired.com/photos/6081f4280c9b5877078878e2/master/pass/business_plaintext_apple_1313768378.jpg); */
    background-image: url(https://images.ctfassets.net/hzjmpv1aaorq/64gJkCKT1e8UxRvcqZBXVT/f75a5ade15e5b0ba410c6f558fbe8390/apple-stock-forecast-us.jpg?q=70);
    background-position: center;
    background-size: cover;
}
#v-22{
    background-image: url(https://cdn.prod.website-files.com/658162679bc86c0ec2f2732b/6673e86d4e4a4385f67d0abf_original-ff8aa0d7463e420f3c838357b31adc93.webp);
    background-position: center;
    background-size: cover;
}
#v-23{
    /* background-image: url(https://i0.wp.com/graficus.com/wp-content/uploads/2021/06/Portfolio-header.jpg?fit=2120%2C639&ssl=1);
    background-position: 65%; */
    /* background-image: url(https://mir-s3-cdn-cf.behance.net/projects/404/096376197037781.Y3JvcCwxNjE2LDEyNjQsMCww.png); */
    /* background-image: url(../images/VBLMK.png); */
    background-image: url(images/VBRFGHJ.png);
    background-position: center;
    background-size: cover;
}
#v-24{
  background-image: url(https://media.istockphoto.com/id/1794488990/photo/pdf-button-on-screen-laptop-computer-converting-process-of-document-to-another-format-convert.jpg?s=612x612&w=is&k=20&c=TwhXfAX-YNmNrqSt4jKJdkw3wk2OrhhHgK5Q-wA8D6o=);
  background-position: center;
  background-size: cover;
}
#v-collictions{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  border: none;
  width: 350px;
  height: 230px;
  border-radius: 15px;
  overflow: hidden;
  transition: 0.5s;
}
#v-collictions:hover{
  border: none;
  box-shadow:  rgba(2, 86, 99, 0) 0px 0px 0px 0px;
}
#v-collictions .v-tcs-1{
  width: 160px;
  height: 110px;
  /* background-color: #b33838; */
  border-bottom: #136270 solid 4px;
}
.v-tcs-1 .vee h3{
  gap: 10px;
}
.v-tcs-1 .vee h3 a {
    /* width: 100px; */
    background-color: #000000;
    overflow: hidden;
    font-size: 10px;
    padding: 10px;
    padding-bottom: 8px;
    border-radius: 10px;
    transition: 0.5s;
    border: rgb(2, 99, 83)  solid 3px;
}
.v-tcs-1 .vee h3 a:hover{
  border: rgb(2, 99, 83)  solid 3px;
  box-shadow:  rgb(2, 99, 83) 0px 0px 20px 5px;
}
.v-tcs-1 .vee h3 a img{
  width: 25px;
}
.v-tcs-1:hover .vee{
  display: block;
}
#v-collictions #v-tcs-1{
  /* background-image: url(https://cdn.vectorstock.com/i/500p/62/43/falling-random-numbers-blue-matrix-background-vector-24906243.jpg); */
  background-image: url(https://img1.picmix.com/output/stamp/normal/6/8/7/1/241786_b84b1.gif);
  background-position: center;
  background-size: cover;
}
#v-collictions #v-tcs-2{
  /* background-image: url(https://images.pexels.com/photos/5940831/pexels-photo-5940831.jpeg); */
  background-image: url(https://media.tenor.com/ZOpxNaVTV3oAAAAM/books-hand.gif);
  background-position: center;
  background-size: cover;
}
#v-collictions #v-tcs-3{
  /* background-image: url(https://sitechecker.pro/wp-content/uploads/2023/06/404-status-code.png); */
  background-image: url(https://webartdevelopers.com/blog/wp-content/uploads/2021/05/404-error-page-svg-animation.gif);
  background-position: center;
  background-size: cover;
}
#v-collictions #v-tcs-4{
  /* background-image: url(https://debttozero.com/wp-content/uploads/2022/06/calculator-hero-1024x602.png); */
  background-image: url(https://cdn.dribbble.com/users/470545/screenshots/3471475/calculater.gif);
  background-position: center;
  background-size: cover;
  /* background-color: #E1E3F8; */
}
.footer{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: 6vh;
    /* background-color: rgba(0, 0, 0, 0.83); */
    background-color: #133636;
    font-weight: 700;
    color: #a3a3a3;
}
.footer h4{
    margin-left: 10px;
    margin-right: 10px;
}
@media (max-width:1000px) {
  .qasxmn{
    display: none;
  }
  body{
    background-position: 80%;
  }
    .container{
        gap: 15px;
        padding-left: 1vw;
        padding-right: 1vw;
    }
    .pro , #v-collictions{
        width: 400px;
        height: 250px;
    }
    #v-collictions{
      min-height: 250px;
      height: max-content;
    }
    #v-collictions .v-tcs-1{
      width: 190px;
      height: 120px;
    }
    .cover{
      width: 100vw;
      height: 200vh;
      position: absolute;
      top: 190vh;
    }
    #real-m{
      min-height: 50vh;
    }
    .header .qasxmn{
      display: none;
    }
    .header{
      height: 7vh;
      padding: 0px 5vw 0px 5vw;
    }
    .vbxz{
      justify-content: center;
      width: 100%;
      height: 8vh;
      top: 5vh;
    }
    .lista{
        max-height: 5vh;
    }
    .pro h3 a img{
      width: 50px;
  }
  #logo h2{
    font-size: 45px;
  }
}
@media (max-width:660px) {
  .venom{
    display: none;
  }
}