*{
    margin: 0;
    padding: 0;
}

.rightside{
  display: block;
  align-items:center ;
}

.rightsidenavbar{
  display: flex;
  align-items: center;
}

.navcontainer{
   
    display: flex;
    justify-content: space-around;

   align-items: center;   /*center vertically*/
   background-color: #051951;
   /* background-color:white; */
   

}

li {
    display: inline;
    padding: 20px;
    
}

nav:hover{
    background-color: rgba(237, 237, 253, 0.615);
} 

.logo{
    margin-right: 1%;
    background-color: white;
    border-radius:25%;
}

li a{
    text-decoration: none;
    /* color: #051951;  */
    font-size: larger;
    color: white;
}

li a:hover{
    color:#F18F01;
    /* color: #024CAA; */
    
   
   
}

/* اما نشوف */
.topnav{
  width: 100%;
}

/* end of navbar */

body{
    /* background-image: url("../images2/background2.png"); */
    
    background-image: url("../images2/background5.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    background-attachment: fixed;
}

/* slideshow */
.slideshow{
  position: relative;
  /* width: 100%; */
  height: 800px;
  overflow: hidden;
  border-radius: 10px;
  size: cover;



}

.slide{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit:fill;
  opacity:  0;
  animation: fadeEffect 35s infinite;

  backface-visibility: hidden;
  transform: rotateY('180deg');
  transform-origin: center;
}

@keyframes fadeEffect {
  /* 0%, 30% {
    transform: rotateY('0deg');
    opacity: 1; 
  }
  50% {
    transform: rotateY('90deg');
    opacity:0; 
  }
  100% {
    transform: rotateY('180deg');
    opacity: 0; 
  } */

  0%, 16.66% { /* First phase */
    transform: rotateY(0deg);
    opacity: 1;
  }
  33.33% { /* Second phase */
    transform: rotateY(0deg);
    opacity: 0;
  }
  50% { /* Third phase */
    transform: rotateY(0deg);
    opacity: 0;
  }
  66.66% { /* Fourth phase */
    transform: rotateY(0deg);
    opacity: 0;
  }
  83.33% { /* Fifth phase */
    transform: rotateY(0deg);
    opacity: 0;
  }
  100% { /* End phase */
    transform: rotateY(0deg);
    opacity: 0;
  }
 
}

/* ترتيب الصور */
.slide:nth-child(1) {
  animation-delay: 0s;
}

.slide:nth-child(2) {
  animation-delay: 5s; /* تأخير بداية الصورة الثانية */
}

.slide:nth-child(3) {
  animation-delay: 10s; /* تأخير بداية الصورة الثالثة */
}

.slide:nth-child(4) {
  animation-delay: 15s; /* تأخير بداية الصورة الثالثة */
}

.slide:nth-child(5) {
  animation-delay: 20s; /* تأخير بداية الصورة الثالثة */
}

.slide:nth-child(6) {
  animation-delay: 25s; /* تأخير بداية الصورة الثالثة */
}

/* 
to here */
/* end of background */


.container{
  position: relative;
}



.container .wrapper{
  width: 100vw;
  height: 100vh;
  /* border: 1px solid black; */
  /* margin: 5rem auto;   */
  overflow: hidden;
  box-shadow: 1px 2px 30px rgba(0, 0, 0, 0.562);
}


.container .slider-holder{
display: grid;
/* 3 columns */
/* grid-template-columns: 100% 100% 100%;    */
grid-template-columns: repeat(6,100%);  
height: 100%; 
animation: slide 84s ease infinite;
}

.container #slider-image-1{
background: rgb(255, 0, 234);
background: url("../images2/ghardaka/shaleh6.PNG");
background-size: cover;
}


.container #slider-image-2{
background: red;
background: url("../images2/airport/2.jpeg");
background-size: cover;
}

.container #slider-image-3{
 background: yellow;
 background: url("../images2/ghardaka/shaleh4.PNG");
background-size: cover;
}

.container #slider-image-4{
  background: yellow;
  background: url("../images2/elfoadschool/office2.jpg");
 background-size: cover;
 }

 .container #slider-image-5{
  background: yellow;
  background: url("../images2/elfoadschool/office3.jpg");
 background-size: cover;
 }

 .container #slider-image-6{
  background: yellow;
  background: url("../images2/asemaschool/8.PNG");
 background-size: cover;
 }

.container .button-holder{
  position: absolute;
  bottom: 0%;
  left: 45%;

}

.container .button-holder .dots{
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 3rem;
  background-color: lightcyan;
  margin: 0.4rem 0.3rem;
}
  

@keyframes slide {
  0% { transform: translateX(0%); }
  16.66% { transform: translateX(-100%); }
  33.33% { transform: translateX(-200%); }
  50% { transform: translateX(-300%); }
  66.66% { transform: translateX(-400%); }
  83.33% { transform: translateX(-500%); }
  100% { transform: translateX(-600%); }
}




/* النص يظهر بالسكرول  */

.hidden-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 6s ease, transform 6s ease;
}

.hidden-text.show {
  opacity: 1;
  transform: translateY(0);
}
/* لحد هنا  */

.firsthead{
    
    color: white;
    font-size: 40px;
    text-align: center;
    padding-top: 1%;
}

.secondhead{
    color: #F18F01;
    font-size: 40px;
    text-align: center;
    padding-bottom: 30%;
}





/* end of first page */
.aboutus{
    /* background-color: #051951; */
    background-color: #051951;
    color:#F18F01;
    text-align: center;
    font-size: 30px;
    padding-top: 3%;
    margin-bottom: 5%;
    padding-bottom: 3%;
}

.aboutusparagraph{
    padding-top: 3%;
    color: white;
    font-size: 25px;
    padding-left: 5%;
    padding-right: 5%;
    
}
.aboutusparagraphyellow{
    color:#F18F01;
    font-size: 25px;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 3%;
    text-align: center;
}


/* end about us section */
.ourprojectstitle{
    padding-top: 5%;
    color: #F18F01;
    font-size: 40px;
    text-align: center;
}


.mohemtna{
    display: flex;
}
#rightside{
   padding-top: 5%;
    text-align: center;
    text-decoration: underline;

}


/* start table */
table{
    width: 100%;
    padding-bottom: 60px;
}
th{
    background-color: #051951;
    height: 50px;
    color: #F18F01;
    font-size: larger;
}

td{
    background-color: #8f9dc4;
    text-align: center;
}


/* start photos */

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    background-color: #051951a4;
    padding: 10px;
    margin-bottom: 3%;
  }
  .grid-item {
    background-color: #051951a4;
    padding: 20px;
    font-size: 30px;
    text-align: center;
    /* هنشوف طريقة النقل */
    overflow: hidden;
    /* transform: translate(-50% , -50%); */
    padding-top: 10%;
    padding-bottom: 15%;
    
  }

  .imagegrid{
    width: 100%;
    height: 100%;
    border-radius: 25%;
   
    /* هنشوف طريقة النقل */
    transition: 0.5s;
  }

  /* تابع طريقة النقل */
 
  .grid-item .textBox{
       position: absolute;
       /* bottom: 100%; */
       width: 30%;
       text-align: center;
       color: white;
       /* background: #7986cb; */
       box-sizing: border-box;
       padding: 15px 10px; 
       font-family: Arial, Helvetica, sans-serif;
       font-size: 20px;
       
       transition: .5s;
  }
  
  
    /* التأثير عند التمرير على الصورة */
 .grid-item img:hover {
     transform: scale(1.2); /* تكبير الصورة بنسبة 1.2 */
  }






  /* لحد هنا */
  /* contact */
  .contact{
    background-color: #051951;
    color: white;
    padding-top: 5%;
  
    
  }
  h2{
    color: #F18F01;
    text-align: center;
    padding-bottom: 3%;
  }


  /* photo circle */
  .profile-container {
    /* display: inline-block; */
    float: right;
    width: 50%;
    
  }
  
  .circle-photo {
    width: 50%;  /* Adjust to the size of your photo */
    height: 50%; /* Adjust to the size of your photo */
    border-radius: 25%;  /* Makes the photo circular */
    object-fit: cover;   /* Ensures the image covers the entire circle without distortion */
    border: 3px solid #fff; /* Optional: adds a border around the image */
    float: right;
    
  }

  .contactsection{
    display: flex;
    justify-content:space-around ;
    margin-right: 10%;
    margin-left: 10%;
    align-items: center;
    background-color: #071b52;
    border-radius:25%;

    
  }

  .contactleft{
    font-size: 30px;
    display: flex;
    
    
  }

  .contactdetails{
    padding-left: 5%;
  }
 




  /* footer */

  .footer{
    background-color:#051951;
    color: #A5ACBA;
    padding-block: 64px;
  }
  .footer-content{
    width: 80%;
    margin: 0 auto;
  }
  .container{
    
    display: flex;
    justify-content: space-between;
    padding-bottom: 32px;
  
   
  }
  
  
  .footer .container  .footer-col h4{
    padding-bottom: 15px;
    color: #F9F9F9;
  
  }
  
  .footer .container  .footer-col p{
    padding-top: 25px;
    padding-bottom: 25px;
    width:55%;
  }
  
  .footer ul{
    list-style: none;
   
  
  }
  
  
  .footer .container  li {
     display: block;
    width: 100%;
    padding-bottom: 10px;
    
   
  
   }
  
  .footer .container  li a{
   color: #A5ACBA;
   size: 14px;
  
   
  }
  
  .footer .container  .footer-col .email_form{
   width: 40%;
   
    height: 46px;
    border-radius:  10px 0  0  10px;
    border-style: none;
    background-color: #2C3444;
    
  }
  .footerrightside{
    width: 80%;
    display: flex;
    justify-content: space-between;
  }
  
  .rights{
  
    text-align: center;
    padding-top: 32px;
   border-top: 1px solid rgba(46, 53, 69, 1)
  
  }
  
/* end footer */
.portfolio{
    /* text-decoration: none; */
    color:#F18F01;
}

nav .navcontainer .rightside .fa-bars{
  display: none;
} 


/* done all project */

/* responsive */
@media (max-width:768px){

  
/* اما نشوف */
.topnav{
  width: 100%;
}

        .mainpage{
          display: none;
        }

        li {
          display: inline;
          padding: 2px;
          
      }

      .firsthead{
        font-size: 40px;
      }

      .secondhead{
        font-size: 40px;
      }

      /*make like phone*/
      .mohemtna{
        display: block;
    }

    .mohemtnaimg{
      /* display: none; */
      width: 50%;
      height: 50%;
    }
    .grid-container{
      padding-bottom: 30px;
    }
    .grid-item{
      padding-bottom: 100px;
    }
}

@media(max-width:475px){
            .logo{
              margin: 0px;
              background-color: white;
              border-radius:25%;
              width: 50px;
              height: 50px;
              /* margin-right: -100px; */

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

            align-items: center;   /*center vertically*/
            background-color: #051951fe;
            /* background-color:white; */
            

              }
            nav{
              display: block;
            }

            /* top navbar */
            .topnav{
              display: none;
            }

          

            nav .navcontainer .rightside .fa-bars {
              /* display: block; */
              display: none;
            }


            .mohemtna{
              display: block;
          }

          .mohemtnaimg{
            /* display: none; */
            width: 50%;
            height: 50%;
          }


          .contactsection{
            display: flex;
            justify-content:space-around ;
            margin-right: 10%;
            margin-left: 10%;
            align-items: center;
            background-color: #071b52;
            border-radius:25%;

            
          }


          .contactemail{
                font-size: medium;
          }

          .contact{
            
            padding-right: 10%;
          }

          .circle-photo{
            display: none;
          }


          /* projectsname */
          .grid-item .textBox p{
            /* display: none; */
            font-size: small;
            display: block;
            margin-top: -20px;
            margin-right: 20px;
            
          }


          /* .grid-item{
           margin-bottom: 50px;
          } */
}


/* done all */
/* for language */
/* اللغة الإنجليزية */
[lang="en"] {
  direction: rtl;
  font-family: Arial, sans-serif;
}

/* اللغة العربية */
[lang="ar"] {
  direction: ltr;
  font-family: 'Arabic Font', sans-serif;
}

/*end language */

.primarybutton{
 
  border-color: #F18F01;
  background-color:#fffbf662;
  border-radius: 55px;
  border-style: solid ;
  width: 150px;
  height: 56px;
  font-size: 15px;
  color:white;
  text-align: center; 


  cursor: pointer;
}


/* enter works */
h1{
  color:#F18F01;
  padding-bottom: 3%;
  
}

.enterworks{
  padding-top: 12%;
  text-align: center;
  color:#F18F01;
  font-size: 40px;
}



.updatework{
  text-align: center;
  padding-top: 20%;
  font-size: 40px;
  color: #F18F01;
}

input{
  width: 20%;
  height: 50px;
  border-radius: 25%;
  background-color: #051951;
  color: #fff;
}

.updatebtn{
  background-color:#F18F01;
}
.deletebutton{
  width: 100%;
}


.secondarybutton{
  border-color: #F18F01;
  background-color:#e5dd84;
  border-radius: 55px;
  border-style: solid ;
  width: 30%;
  height: 56px;
  font-size: large;
  color:white;
  text-align: center;

   


  cursor: pointer;
}

.imageinput{
  background-color: #F18F01;
 margin-right: 40%;
 margin-top: 5%;
 border-radius: 0%;
 width: 20%;
}

.imagebutton{
  
  margin-right: 40%;
  margin-top: 2%;
  width: 20%;

 
  
}

.formuploadimage{
  background-color: #051951;
  border-radius: 25%;

}



/* for admin login */
.adminlogin{
  padding-top: 15%;
  
  display: grid;
  text-align: center;
  justify-content: center;
}

.adminlabel{
  font-size: 40px;
  color: #F18F01;
  padding-bottom: 20px;
}

.adminbutton{
  background-color:#051951;
  color:#F18F01;
  height: 60px;
  border-radius: 25%;
  border-color:#F18F01;
  font-size: 40px;
  width: 400px;
  
  
}



inputadmin{
  width: 100%;
  height: 50px;
  border-radius: 25%;
  background-color: #051951;
  color: #fff;
}