.pro{
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  min-height: 100vh;
  /* padding-top: 10vh; */
  /* background-color: #00565f91;
  box-shadow: #00525b8f 0px -5px 10px 5px; */
}
.prs-title {
  width: 80%;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  overflow: hidden;
  /* background-color: #31767a; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  display: none;
}
.prs-title .h2v{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.prs-title h2{
  color: #ffffff;
  /* padding: 10px; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* background-color: #000000; */
  height: 50px;
  min-width: 350px;
  border: #00aeff00 solid 20px;
  border-left: #007188 solid 20px;
  padding-left: 10px;
  background-color: #77A8AC;
  padding: 10px;
  border-radius: 15px;
}
.prs-title h3{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  color: #ffffff;
  /* padding-right: 20px; */
  background-color: #77A8AC;
  padding: 10px;
  border-radius: 15px;
  width: 100%;
  height: 50px;
  border: #00aeff00 solid 20px;
  border-right: #007188 solid 20px;
}
.prs-title h2 img{
  width: 40px;
}
.prs-title h3 span{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.prs-title h3 span img{
  width: 35px;
  background-color: #d5d5d5;
  border-radius: 20px;
  padding: 1px;
}
.prs-t2{
  display: flex;
  align-items: center;
  justify-content: center;
  /* flex-wrap: wrap; */
  gap: 20px;
  /* width: 100vw; */
  height: 100px;
  
}
.prs-t2 h2{
  min-width: max-content;
  /* background-color: #77a8aca3; */
  padding: 5px 15px 5px 15px;
  /* border-radius: 15px; */
  border: #ffffff00 solid 5px;
  /* border-bottom: #267981 solid 5px; */
  color: #267981;
  /* color: #ffffff; */
  font-size: 45px;
}
.prs-t2 h2 span{
  animation: th2 5s infinite linear;
}
@keyframes th2 {
  0%{
    opacity: 1;
  }
  35%{
    opacity: 1;
  }
  50%{
    opacity: 0;
  }
  65%{
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}
.prs-t2 hr{
  width: 150px;
  /* border: #ffffff solid 3px; */
  border: #77A8AC solid 3px;
}
.prs-t2 img{
  width: 50px;
  /* background-color: #ffffff; */
  padding: 5px;
  border-radius: 10px;
  /* display: none; */
}
.container {
  height: 71vh;
  /* background-color: #00000037; */
  /* background-color: #9BAAAB; */
  /* background-color: #8ba6a77c; */
  overflow-x: auto;
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 100px;
  padding: 20px;
  scrollbar-width: none; /* إخفاء شريط التمرير */
  /* border: 2px solid #ccc; توضيح مكان الحاوية */
  padding-left: 28%;
  padding-right: 28%;
  border-radius: 30px;
  max-width: 80%;
  z-index: 1;
  /* border-left: #C7D9DB solid 80px;
  border-right: #C7D9DB solid 80px; */
  /* border: #77a8ac00 double 10px;
  border-bottom: #77A8AC double 10px; */
  /* box-shadow: #00000032 0px 10px 10px 0px; */
  /* border: #91bbbe solid 7px; */

}
.background{
  /* background-color: #000000; */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: qwer 15s infinite linear;
}
@keyframes qwer {
  0%{
    transform: translateX(700px);
  }
  25%{
    transform: translateX(700px);
  }
  30%{
    transform: translateX(350px);
  }
  49%{
    transform: translateX(350px);
  }
  55%{
    transform: translateX(0px);
  }
  65%{
    transform: translateX(0px);
  }
  65%{
    transform: translateX(-350px);
  }
  95%{
    transform: translateX(-350px);
  }
  100%{
    transform: translateX(-700px);
  }
}
.background div{
  min-width: 350px;
  max-width: 350px;
  height: 100%;
}
.background .img1v{
  background-image: url(https://images.pexels.com/photos/7662476/pexels-photo-7662476.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load);
  background-position: center;
  background-size: cover;
}
.background .img2v{
  background-image: url(https://images.pexels.com/photos/7661502/pexels-photo-7661502.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load);
  background-position: center;
  background-size: cover;
}
/* .background .img3v{
  background-image: url(https://images.pexels.com/photos/31008030/pexels-photo-31008030/free-photo-of-vibrant-night-skyline-of-osaka-japan.jpeg?auto=compress&cs=tinysrgb&w=400&lazy=load);
  background-position: center;
  background-size: cover;
} */
.background .img3v{
  background-color: #212326;
}
.background .img3v video{
  /* min-width: 450px;
  max-width: 450px; */
  width: 100%;
  height: 100%;
  /* position: relative;
  left: -50px; */
}
.air-arrow{
  /* display: none; */
  position: absolute;
  left: 10vw;
  z-index: 0;
  width: 0.1%;
  height: 71vh;
  /* background-color: #0000006b; */
}
.air-arrow-icon{
  min-width: 255px;
  height: 200px;
  background-color: #ffffff;
  border-radius: 10px;
  margin-left: 60vw;
  margin-top: 40vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 80%;
  /* box-shadow: red 0px 0px 10px 0px inset; */
  transition: 0.5s;
  /* color: #ff0000; */
  color: #007188;
  font-weight: 900;
  font-size: 40px;
  padding: 8px;
  /* display: none; */
}
@media (max-width:850px) {
  .air-arrow-icon{
    margin-left: 30vw;
    margin-top: 40vh;
  }
}
.air-arrow-icon video{
  height: 100%;
  border-radius: 20px;
}
/* #num-o{
  background-color: #ffffff;
  border-radius: 10px 0px 0px 10px;
} */
.container::-webkit-scrollbar {
  display: none; /* إخفاء شريط التمرير */
}

.cardd {
  min-width: 300px;
  height: 350px;
  /* background-color: royalblue; */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 20px;
  font-weight: bold;
  border-radius: 30px;
  transition: 0.3s;
  overflow: hidden;  
  box-shadow: #0000008c 10px 10px 10px 0px;
}
.cardd .topd,.bottomd{
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  /* background-color: #000000d4; */
}
.cardd .topd{
  background-image: url(https://images.pexels.com/photos/39896/space-station-moon-landing-apollo-15-james-irwin-39896.jpeg?auto=compress&cs=tinysrgb&w=600);
  background-position: center;
  background-size: cover;
  /* border-radius: 0px 0px 20px 20px; */
}
#crd-1{
  background-image: url(https://alwofod.sa/wp-content/uploads/2021/08/%D8%A7%D9%84%D8%AE%D8%B7%D9%88%D8%B7-%D8%A7%D9%84%D8%AC%D9%88%D9%8A%D8%A9-%D8%A7%D9%84%D8%B3%D8%B9%D9%88%D8%AF%D9%8A%D8%A9.jpg);
  background-position: 0%;
}
#crd-3{
  background-image: url(https://images.pexels.com/photos/2036558/pexels-photo-2036558.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load);
  /* background-position: 0%; */
}
#crd-4{
  background-image: url(https://images.pexels.com/photos/6699405/pexels-photo-6699405.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2);
}
#crd-5{
  background-image: url(https://images.pexels.com/photos/7698913/pexels-photo-7698913.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load);
  /* background-image: url(https://images.pexels.com/photos/5668869/pexels-photo-5668869.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2); */
  /* background-image: url(https://images.pexels.com/photos/7596902/pexels-photo-7596902.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2); */
}
#crd-6{
  /* background-image: url(https://images.pexels.com/photos/6804071/pexels-photo-6804071.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2); */
  background-image: url(https://images.pexels.com/photos/23325939/pexels-photo-23325939/free-photo-of-home-office.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2);
}
.cardd .bottomd{
  /* border-radius: 20px 20px 0px 0px; */
  overflow: hidden;
  gap: 10px;
  background-color: #000000;
}
.cardd .bottomd .title{
  /* background-color: #7b1717; */
  background-color: #007188;
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: left;
  padding-left: 20px;
}
.cardd .bottomd .title h2{
  font-size: 15px;
}
.cardd .bottomd .info{
  /* background-color: #7b1717; */
  width: 100%;
  /* height: 50px; */
  display: flex;
  align-items: center;
  justify-content: left;
  padding-left: 20px;
}
.cardd .bottomd .info h2{
  font-size: 10px;
}
.cardd .bottomd .gok{
  /* background-color: #17697b; */
  width: 100%;
  height: 35%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-left: 20px;
}
.cardd .bottomd .gok .view,.codea{
  width: 30px;
  height: 50px;
  background-color: #000000;
  border-radius: 10px 30px 10px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0px 30px 0px 30px;
  border: #ffffff00 solid 2px;
}
.cardd .bottomd .gok{
  font-size: 12px;
}
.actived {
  /* transform: scale(1.3); */
  min-width: 350px;
  height: 500px;
  border-radius: 20px;
  /* background-color: #ff5722; */
}
.actived .bottomd .title h2{
  font-size: 18px;
}
.actived .bottomd .info h2{
  font-size: 15px;
  line-height: 20px;
}
.actived .bottomd .gok .view,.codea{
  width: 90px;
  height: 50px;
  border-radius: 10px 100px 10px 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0px 60px 0px 60px;
}
.actived .bottomd .gok{
  font-size: 15px;
  padding-left: 0px;
}
.actived .bottomd .gok .codea{
    background-color: #00ff6e0b;
    border: #ff000000 solid 3px;
    border-bottom: #00ff6e solid 3px;
}
.actived .bottomd .gok .view{
    background-color: #0088a664;
    border: #0062ff00 solid 3px;
    border-bottom: #0062ff solid 3px;
}

.prs-t2-a,.prs-t2-b{
  display: none;
}


.prs-t2-c{
  /* background-color: #000000; */
  width:max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.prs-t2-c hr{
  width: 80px;
}
@media (max-width:1080px) {
  .container {
    gap: 20px;
    padding-left: 9%;
    padding-right: 9%;
    max-width: 100%;
  }
  .prs-title {
    width: 90%;
    margin-bottom: 20px;
  }
  .prs-title h3{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    color: #ffffff;
    padding-right: 20px;
    background-color: #000000;
    width: 100%;
  }






  .prs-t2{
    /* display: flex;
    align-items: center;
    justify-content: center; */
    /* flex-wrap: wrap; */
    flex-direction: column;
    gap: 5px;
    width: 100vw;
    margin-top: 17vh;
    /* height: 100px; */
  }
  .prs-t2 h2{
    min-width: max-content;
    /* background-color: #77a8aca3; */
    padding: 5px;
    /* border-radius: 15px; */
    border: #ffffff00 solid 5px;
    /* border-bottom: #267981 solid 5px; */
    color: #267981;
    font-size: 40px;
    /* background-color: #000000; */
    width: 250px;
    text-align: center;
  }
  .prs-t2 hr{
    width: 80px;
  }
  .prs-t2 img{
    width: 50px;
  }
  .prs-t2-a h2 spana{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 250px;
    height: 10px;
    /* background-color: #000000; */
  }
  .prs-t2-a h2 spana hr{
    width: 10px;
    height: 50px;
    background-color: #77A8AC;
    border-radius: 3px;
    /* position: relative;
    top: 20px; */
  }
  .r-hr{
    animation: r-hr 5s infinite linear;
  }
  @keyframes r-hr {
    0%{
      transform: translateX(0px);
    }
    50%{
      transform: translateX(140px);
    }
    100%{
      transform: translateX(0px);
    }
  }
  .l-hr{
    animation: l-hr 5s infinite linear;
  }
  @keyframes l-hr {
    0%{
      transform: translateX(0px);
    }
    50%{
      transform: translateX(-140px);
    }
    100%{
      transform: translateX(0px);
    }
  }
  .prs-t2-a,.prs-t2-b{
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap: 10px; */
    padding: 0px 10px 0px 10px;
    width: 100%;
    /* background-color: #000000; */
  }
  .prs-t2-c{
    display: none;
  }

  .air-arrow-icon{
    min-width: 80vw;
    height: 120px;
    margin-left: 0px;
    margin-top: 65vh;
    /* background-color: #000000; */
  }

  .air-arrow-icon{
    border: #00000000 solid 10px;
    border-bottom: #007188 solid 10px;
    border-radius: 20px;
  }
}