/*===================
 start the global=====  */
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Cairo", sans-serif;
}
figure {
  margin: auto;
}
/* end the global */
/*===========================
 start the navbar =========*/
.mynav {
  background-color: rgb(17, 17, 70);
  color: #fff;
  display: flex;
}
.mynav .text {
  font-size: 16px;
}
.mynav .text img {
  width: 22px;
  height: 18px;
  margin-bottom: 3px;
  margin-right: 10px;
}

.mynav .text img:hover {
  cursor: pointer;
}
.mynav .text i {
  padding: 10px 0;
  padding-right: 4px;
}
.mynav .text i:last-of-type {
  padding-left: 28px;
}
.mynav .text form {
  display: inline;
  color: rgb(246, 246, 248);
  margin-right: 6px;
  border: none;
}
.mynav .text form select {
  background-color: rgb(17, 17, 70);
  border: none;
  color: #fff;
}
.mynav .text form select:hover {
  cursor: pointer;
}
.mynav .icon ul {
  margin-bottom: 0;
  display: flex;
  justify-content: right;
}
.mynav .icon i {
  padding: 10px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.mynav .icon i:hover {
  cursor: pointer;
  color: blue;
}
/* end the navbar1 */
/*===============
 start the nav2============== */
.navbar {
  display: flex;
  justify-content: left;
  align-items: center;
}

.navbar-light .navbar-nav .nav-link {
  color: blueviolet;
  font-weight: bold;
  font-size: 17px;
}
.navbar-light .navbar-nav .nav-link {
  color: rgba(24, 5, 5, 0.623);
}
.navbar-light .navbar-nav .nav-link {
  float: right;
}
.navbar-nav li a.active {
  color: rgb(68, 30, 134) !important;
  border-bottom: 2px solid rgb(68, 30, 134);
}
.navbar-light .navbar-nav .nav-link:hover {
  color: #230d85;
}
@media (max-width: 768px) {
  .mynav .icon ul {
    display: flex;
    justify-content: center;
  }
}
/*======================
 start the caresoul===== */
.carousel-inner img {
  height: 800px;
}
.carousel-inner .active {
  border-bottom: none;
  padding: 0;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  margin-top: 19vh;
}
/* end the carsoul */
/*========================================
 start the section protofoliou ==========*/
.proto {
  margin-top: 30px;
}
.proto img {
  width: 100%;
  height: 300px;
}
.proto .content h1 {
  color: rgb(20, 2, 32);
}
.proto .content .icons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.proto .content .icons .box1,
.box2,
.box3 {
  text-align: center;
  margin: auto;
  margin-top: 21px;
}
.proto .content .icons .box1,
.box2,
.box3 {
  text-align: center;
  margin: auto;
  margin-top: 21px;
}
.proto .content .icons .box1 i {
  background-color: rgb(239, 238, 241);
  padding: 30px;
  border: 2px solid rgb(15, 1, 37);
  border-radius: 50%;
  font-size: 30px;
  color: rgb(15, 1, 37);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.proto .content .icons .box1:hover i {
  background-color: rgb(34, 3, 85);
  color: #fff;
  cursor: pointer;
}
.proto .content .icons .box2 i {
  background-color: rgb(34, 3, 85);
  padding: 30px;
  border-radius: 50%;
  font-size: 30px;
  color: #fff;
  border: 2px solid rgb(34, 3, 85);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.proto .content .icons .box2:hover i {
  background-color: rgb(255, 255, 255);
  color: rgb(34, 3, 85);
  border: 2px solid rgb(15, 1, 37);
  cursor: pointer;
}
.proto .content .icons .box3 i {
  background-color: rgb(250, 250, 250);
  padding: 30px;
  border-radius: 50%;
  border: 2px solid rgb(15, 1, 37);
  font-size: 30px;
  color: rgb(15, 1, 37);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.proto .content .icons .box3:hover i {
  background-color: rgb(34, 3, 85);
  color: #fff;
  cursor: pointer;
}
.proto .content .icons > h5 {
  font-weight: bold;
}
@media (max-width: 768px) {
  .img1 {
    margin-bottom: 10px;
  }
  .content {
    text-align: center;
  }
}
/* ===================================
start the bettter section =============*/
.better {
  margin-top: 40px;
  background: url(../img/bild.jpg) no-repeat center center/cover fixed;
}
.better .content {
  min-height: 350px;
  background-color: rgba(0, 0, 0, 0.9);
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.better .content h1 {
  color: #fff;
  font-size: 40px;
  font-weight: bold;
}
/*============================
 start the property section =====*/
.property {
  margin-top: 30px;
}
.property .row {
  justify-content: center !important;
}
.property .thebox {
  position: relative;
  margin-bottom: 10px;
}
.property .thebox::after {
  content: " ";
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}
.property .thebox:hover::after {
  background-color: rgba(138, 132, 150, 0.7);
}
.property .thebox > img {
  display: block;
  width: 100%;
  height: auto;
}
.property .thebox .property-conent {
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 30px;
  z-index: 111;
}
.property .thebox .property-conent i {
  font-weight: bold;
  transition: all 0.5s;
  font-size: 50px;
  margin-bottom: 10px;
}
.property .thebox:hover i {
  transform: rotate(360deg);
}
.property .thebox .property-conent h3 {
  font-size: 30px;
}
.property .col-md-4:hover {
  cursor: pointer;
}
/* end the section property */

/*===========================================
 start the section of the protofolue =========*/
.protof {
  margin-top: 30px;
}
.protof .box {
  height: 400px;
  border-radius: 50px;
  overflow: hidden;
}
.protof .box-image1 {
  background: url(../img/b3.jpg) no-repeat center center/cover fixed;
}
.protof .box-image2 {
  background: url(../img/b2.jpg) no-repeat center center/cover fixed;
}
.protof .box-image3 {
  background: url(../img/b1.jpg) no-repeat center center/cover fixed;
}
.protof .box .content {
  background-color: rgba(201, 193, 218, 0.4);
  width: 100%;
  height: 100%;
}
.protof .box h3 {
  margin-left: 40px;
  color: #fff;
}
.protof .col-md-5 .box {
  height: 190px;
  margin-bottom: 10px;
  margin-top: 3px;
}
.protof .box:hover {
  cursor: pointer;
}
@media (max-width: 768px) {
  .protof .box {
    margin-bottom: 10px;
  }
}
/*=================================
 start the projects section =========*/
.projects .card {
  margin-bottom: 15px;
  border: 3px solid rgb(222 222 225);
}
.projects .card .bon {
  margin-top: -69px;
  width: 200px;
  margin-bottom: 46px;
  background-color: #ff3c3c;
  text-indent: 11px;
}
.projects .bon h5 {
  color: rgb(248, 248, 248);
  padding-top: 4px;
  font-size: 16px;
  letter-spacing: 1px;
}
.projects .card img {
  width: 100%;
}
/* =====================================
start the section developers ============*/
.dev {
  margin-top: 30px;
  background: url(../img/bb.jpg) no-repeat center center/cover fixed;
}
.dev .overlay {
  background-color: rgba(5, 4, 5, 0.4);
  width: 100%;
  height: 100%;
}
.dev h2 {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
  padding-top: 50px;
  color: #fff;
}
.dev .imgs {
  display: flex;
}
.dev .imgs .image {
  margin-bottom: 40px;
  margin-left: 10px;
}
.dev .imgs img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.dev .imgs img:hover {
  cursor: pointer;
}
/*===================================
 start the video section ============*/
.thevideo {
  margin-top: 30px;
}
/* /* end the video sect */
/* ==========================
start the blog ==============*/
.blog {
  background: url(../img/dots.jpg) center;
}
.blog .card img {
  height: 250px;
}
.blog a {
  text-decoration: none;
}
.blog .chev {
  text-align: right;
}
@media (max-width: 768px) {
  .blog .card {
    text-align: center;
  }
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: #1c117a;
  width: 15px;
  height: 15px;
  border: 2px solid #1c117a;
}
.owl-theme .owl-dots .owl-dot span {
  width: 15px;
  height: 15px;
  border: 2px solid #1c117a;
}
/* ============================
start the footer=============== */
.footer {
  color: #fff;
  background-color: #061050;
  padding-top: 23px;
}
.footer img {
  margin-left: -48px;
  margin-top: 50px;
}
@media (max-width: 768px) {
  .footer img {
    margin-left: 0px;
    margin-bottom: 10px;
    margin-top: 50px;
  }
}
.footer .social i {
  font-size: 30px;
  margin-left: 10px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
@media (max-width: 768px) {
  .footer .social {
    margin-bottom: 10px;
  }
}

.footer .social i:hover {
  cursor: pointer;
  color: crimson;
  transform: rotate(-30deg) scale(1.2);
  font-size: 30px;
}
.footer .footer-information {
  font-size: 15px;
  letter-spacing: 1px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.footer .footer-information i {
  margin-bottom: 10px;
  margin-right: 8px;
}
.footer .footer-information:hover {
  margin-left: 10px;
  cursor: pointer;
}
/* end the footer */
.foot {
  background: #141e61;
  text-align: center;
  color: #fff;
  padding: 7px 0;
}

/*===========================
 start the or framework ======*/
.border-b::after {
  content: "";
  display: block;
  width: 200px;
  height: 2px;
  background-color: rgb(34, 4, 83);
  margin: 20px 0px;
}
.border-h::after {
  content: "";
  display: block;
  width: 45px;
  height: 2px;
  background-color: rgb(34, 4, 83);
  margin-top: 8px;
}
.diplay-block {
  display: block;
}
.btn1 {
  display: block;
  background-color: #141e61;
  color: #fff;
  min-width: 170px;
  border-radius: 10px;
  border: 2px solid #141e61;
  padding: 10px;
  margin: 20px auto;
  text-align: center !important;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.btn1:hover {
  box-shadow: inset 0px -80px 0px #e03636;
  color: #fff;
  border: solid;
  border: 2px solid #e03636;
}
.text-center {
  text-align: center;
}
/*======================================
 strat the roe to top ==================*/
.scrollTop {
  position: fixed;
  right: 1%;
  bottom: 10px;
  background-color: #06011f;
  padding: 5px 10px;
  opacity: 0;
  transition: all 0.4s ease-in-out 0s;
  border-radius: 50%;
  z-index: 9999;
}
.scrollTop a {
  font-size: 18px;
  color: #fff;
  text-decoration: none;
}

/* ============================
the scroll====================== */
::-webkit-scrollbar {
  width: 1.1rem;
}

::-webkit-scrollbar-track {
  border: 1px solid #0c013b;
  box-shadow: inset 0 0 2.5px 2px rgba(0, 0, 0, 0.5);
  border-radius: 1rem;
}

::-webkit-scrollbar-thumb {
  background: #0c013b;
  border-radius: 1rem;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(23, 1, 32);
}

/* for Firefox */
html {
  scrollbar-color: rgb(1, 1, 32);
}