* {
    scroll-behavior: smooth;
     box-sizing:border-box;
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
 }


 body{
     font-family: 'Work Sans', sans-serif;
     background-color: #181818;

   }


  .container{
     padding-left: 15px;
     padding-right: 15px;
     margin-left: auto;
     margin-right: auto;
     scroll-behavior: smooth;

  }
  .logo-ar{
 margin-top: 2px;
  }
 .name-en{
  padding-top: 0px;
  margin-top: -23px;
  margin-left: -30px;
  color: #b9b9b9;
  font-style: italic;
 }




   .header{
     overflow: hidden;/*this is remove scroll from page bellow*/
     position: relative;

   }
   .header .logo {
     color:  #b9b9b9;
     font-size: 26px;
     font-weight: bold;
     height: 72px;
     display: flex;
     /* justify-content: center; */
     padding-top: 20px;
     align-items: center;
     animation: movedown 0.2s linear 4;

 }
 /* .box {
     /*
      position: fixed;
     top: -100%;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #fff;
     animation: slide-down 0.5s ease-in-out infinite;
   }

   @keyframes slide-down {
     0% {
       transform: translateY(-100%);
     }
     100% {
       transform: translateY(0);
     }
   } */

.service_des{
    color: rgb(185, 185, 185);
    font-size: 17px;
}

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

 a {
   text-decoration: none;
   background-color: transparent;
 }



 nav ul li{
   display: inline-block;
   line-height: 80px;
   margin: 0 5px;

 }
 nav ul li a {
   color: #b9b9b9;
   font-size: 17px;
   padding:  7px 13px;
   border-radius: 2px;

   text-transform: uppercase; /*for upper the words*/
 }
 a.active ,a:hover{
   background: #b99232;

    transition: 1.0s;
    transform: scale(1.5);

    box-shadow: 4px 5px 17px -4px #b99232;

    z-index: -1;

 }
 .compny{
     color: #b99232;

     box-shadow: 4px 5px 17px -4px #b99232;

 }
 /*start form style*/
 /* .iconForm i:hover{
     display: none;
 } */
 .inputs{
     padding: 8px;

 }
 .iconForm {
     position: relative;
     margin-top: 20px;
 }

 .iconForm i{
     /* position: absolute; */
     left: -65px;
     top: 60px;
     color:  #117838;

 }
 /* input[type=phone],
 input[type= email]
  {
    border-radius: 10px;
    opacity: 0.2;
    border-color: black;
    background-color:  #FFF;
    color: #030c00;
    font-size: 16px;
    padding: 10px;
    width: -webkit-fill-available;
 } */
 /* textarea{
     opacity: 0.2;
     border-color: #b9b9b9;
     background-color: rgb(120, 20, 68);
 } */
 /*end form style*/
 .checkbtn{
   font-size: 30px;
   color:  #b9b9b9;
   float: right;
   line-height: 80px;
   margin-right: 40px;
   margin-right: 35px;
   cursor:pointer;
   display: none;
 }
 .contact{
 text-align: center;
 margin: 15px;
 }
 .btn-contact {
     /* padding: 10px 29px; */
     background-color: #117838;
     color: #fff;
     border: none;
     /* margin-left: 70px; */
     border-radius: 5px;
     cursor: pointer;


         /* margin-left: 0px; */
         /* width: -webkit-fill-available; */
         width: 70%;
         height: auto;
         margin: 10%;

 }
 #check{
   display: none;
 }
 .logo{
   height: 200px;
 }
 .name_en{
   color:  #85255c;
     margin-top: -36px;
     margin-left: 28px;
     font-size: 20px;
     width: 200px;
     letter-spacing: 5px;
     padding-top: 4px;

     animation-name: fadeInOut, moveLeft300px, bounce;
     animation-duration: 3s;
     animation-iteration-count: 1;

 }

 .logo-name{
   height: 100px;
   width:200px ;
 /* clor animation */
 /* @keyframes example {
     from {
         background-color: rgb(245, 240, 240);

     }
     to {background-color: rgba(255, 255, 255, 0.243);}
   }
 .box{
     animation-name: example;
     animation-duration: 4s;
     animation-delay: 2s;
     animation-iteration-count: infinite;
 } */
 /* end */
 /* start languages */

 /* Style The Dropdown Button */
 }
 .dropbtn {


  margin-top: 20px;
   border: none;
   cursor: pointer;
   background: #b9b9b9;
   transition: .5s;
   color:#b99232;
   margin-left: 20px;
     font-size: 17px;
     padding: 7px 13px;
     border-radius: 3px;
     text-transform: uppercase;

 }
 .messageInput  {
     border-color: black;
     margin: 3px;
     background-color: #FFF;
     border-radius: 10px;
     font-size: 20px;

 }

 .dropdown {
   position: relative;
   display: inline-block;
 }

 /* Dropdown Content (Hidden by Default) */
 .dropdown-content {
     margin-left: 20px;
   display: none;
   position: absolute;
   background-color: #e8e7e7;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;

 }

 /* Links inside the dropdown */
 .dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
 }

 /* Change color of dropdown links on hover */
 .dropdown-content a:hover {background-color: #f1f1f1;   color: black;

 font-size: 12px;}

 /* Show the dropdown menu on hover */
 .dropdown:hover .dropdown-content {
   display: block;
 }

 /* Change the background color of the dropdown button when the dropdown content is shown */
 .dropdown:hover .dropbtn {
   background-color: #b99232;
   color:#b9b9b9;;
 }


 /*  end small screen  */
 /* end languages */
 @media (max-width: 1199px)
 {



   .carousel{
     width: 100px;
     height: 200px;
  }
   .checkbtn{
     display: block;/*for appear checkbtn*/
   }
   .main {
     width: 1000px;
     color:  #b9b9b9;
     font-size: 17px;
     display: inline;
       justify-content: space-between;
       align-items: center;

    }
    .image{
     background: url(../imgs/zakiNew.png)no-repeat ;
     background-size:contain;
     padding: 200px;
     /* height: calc(100vh - 80px); */
     width: 400px;
     margin-left: 280px;

   }
   ul{
     position:absolute;/**? make the icon appear from above */
     width: 100%;
     height: 100vh;
     background-color: #1d0411bf;
     /* background: #411530; */
     top: 80px;
     left: -100%; /*delete menu */
     text-align: left;
     transition: all .8s;/*new*/


   }
   nav ul li{
     display: block;
   }
   nav ul li a{
     font-size: 20px;

   }
  a:hover, a.active {
     background:  #b99232;
      color: #FFF;
   }
   #check:checked ~ ul{
     left: 0;
   }
   .footer .box h3 {
     text-align: center;
     color: #b99232;
     font-size: 50px;
     margin-top: -70px;

   }

   .footer .box .social {
     display: flex;
     margin-left:30%;
   }
   .footer .box .line {
     display: flex;
     align-items: center;
     color: #b9b9b9;
     margin-bottom: 30px;
     text-align: center;
     margin-top: 30px;
     margin-left: 30%;
 }
 .cycle{
   position: relative;
   margin: 30px auto;
   width: 40%;
   height: 30%;
   margin-top: 90px;
  }
  .name-en {
     padding-top: 0px;
     margin-top: -23px;
     margin-left: 25px;
     color: #b9b9b9;
     font-style: italic;
 }

 }

 /*Info for Name */

  .text{
   padding: 20px;
   text-align: right;


  }
  .name{
      margin: 20px;
      font-family: 'Rochester', cursive;
      color:#117838 ;



  }
  .articles {
   padding-top: var(--main-padding-top);
   padding-bottom: var(--main-padding-bottom);
   position: relative;
   color: #D07000;
   text-align: center;
 }
 .articles .container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 40px;
 }
 .articles .box {
   box-shadow: 0 2px 15px rgb(0 0 0 / 10%);
   /* background-color: white; */
   background-color: #1e1e1e;
   border-radius: 6px;
   overflow: hidden;
   transition: transform var(--main-transition),
   box-shadow var(--main-transition);

   width: 91%;
 }

 .articles .box:hover {
   transform: translateY(-10px);
   box-shadow: 0 2px 15px rgb(0 0 0 / 20%);
 }
 .articles .box img {
   width: 100%;
   max-width: 100%;
 }
 .articles .box .content {
   padding: 20px;
 }
 .articles .box .content h3 {
   margin: 0;
   text-align: center;
 }
 .articles .box .content p {
   margin: 10px 0 0;
   line-height: 1.5;
   /* color: #777; */
   color: white;
   text-align: right
 }
 .articles .box .info {
   padding: 20px;
   border-top: 1px solid #e6e6e7;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 .articles .box .info a {
   color: var(--main-color);
   font-weight: bold;
 }
 .articles .box .info i {
   color: var(--main-color);
 }
 .articles .box:hover .info i {
   animation: moving-arrow 0.6s linear infinite;
 }
 /* End Articles */

 /* start massage  */
 .nameMessage{
     align-items: center;

 }
  .title{
     color:black;;
     margin-bottom: 1.5rem;
     text-align: center;
     text-transform: capitalize;



 }
 .outerMessage.message{
     padding: 1.5rem 1.8rem;
 }
 .outerMessage input:focus{
     opacity: 0.5;

 }

 .massage{
     font-size: 30px;
     color: #b9b9b9;
     margin: 40px;
     flex: 1 1 auto;
     min-height: 1px;
     padding: 5px;

 }
 .btnSave{
     color: #f3f2f0;
     background-color:   #38063d;
     margin: 10px;
     padding: 10px;
     border-radius: 10px;
     height: 30PX;
     text-decoration: none;
     transition: all 0.3s ease-in-out;
     FONT-SIZE: 23PX;
 }
 /* .emailInput{
     width: 344px;
 } */
 /* .emailName{
 text-align: center;
 color: #b9b9b9;
 } */
 .messageName{
     margin-left: 236px;
     margin-bottom: 10px;
     margin-top: 15px;
     color: #000000;
 }

 .formMessage{

     justify-content: center;
     display: grid;
     text-align: center;

     /* background-color: #161A30; */
     /* opacity: 0.4; */
     width: 500px;
     height: auto;
     margin: -7px auto;
     color: #365E32;


 }
 .formSend{
     margin: 20px auto;
     display: grid;
     justify-content: center;
     border-radius: 5%;
     opacity: 50%;
     width: 400px;
     height: auto;
     /* background-color: #D6EFD8; */
     background: linear-gradient(to bottom left , rgb(185, 146, 50) 50% , rgb(185, 146, 50) 50%, rgba(0, 0, 0, 0.978) 50%);
     /* background-image: linear-gradient(rgb(0,0,0,0),rgb(170, 105, 8),rgba(0, 0, 0, 0.978)); */

     /* background-image: url(../imgs/site.jpg) no-repeat ; */
 }
 .outerMessage{
     align-items: center;
     display: inline;
 }


 /* .container1 input[type=submit]{
     color: black;
     background-color: rgb(185, 146, 50)   ;

     border-radius: 10px;
     height: 48PX;
     width: 88px;
     border: none;
     transition: all 0.3s ease-in-out;

     /* border: 1px solid #fff; */
     cursor: pointer;

     font-family: 'Exo', sans-serif;
     font-size: 16px;
     font-weight: 400;
     padding: 6px;
     margin-top: 10px;
     margin-left: 147px;
     margin-bottom: 20px;


 } */

 .formMessage input[type=submit]:hover{

     background-color:#96741d;
     color: black;
     font-size: large;


 }

 .formMessage input[type=submit]:active{
     opacity: 0.6;
 }



 .login input[type=submit]:focus{
     outline: none;
 }

 .NewsLetter{
     margin-top: -63px;
 }
  /* Start Footer */
 .footer {
   background-color: #191919;
   padding: 70px 0 0;

 }

 .whats-app {
   position: fixed;
   bottom: 40px;
   /* right: 15px; for right:; */
   background-color: #25d366;
   color: #FFF;
   border-radius: 50%;
   text-align:center;
   font-size: 50px;
    z-index: 100;
 left: 16px;
 }
 /* End Footer */
 /* start selec*/


 *, *::before, *::after {
   box-sizing: border-box;
 }



 .slide {
   position: absolute;
   inset: 0;
   opacity: 0;
   transition: 200ms opacity ease-in-out;
   transition-delay: 200ms;
 }

 .slide > img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
 }

 .slide[data-active] {
   opacity: 1;
   z-index: 1;
   transition-delay: 0ms;
 }

 .carousel-button {
   position: absolute;
   z-index: 2;
   background: none;
   border: none;
   font-size: 4rem;
   top: 50%;
   transform: translateY(-50%);
   color: rgba(255, 255, 255, .5);
   cursor: pointer;
   border-radius: .25rem;
   padding: 0 .5rem;
   background-color: rgba(0, 0, 0, .1);
 }

 .carousel-button:hover,
 .carousel-button:focus {
   color: white;
   background-color: rgba(0, 0, 0, .2);
 }

 .carousel-button:focus {
   outline: 1px solid black;
 }

 .carousel-button.prev {
   left: 1rem;
 }

 .carousel-button.next {
   right: 1rem;
 }



  .copyright {
   padding: 25px;
   color: #f0f0f0;
   font-size: 14px;
   text-align: center;
   font-family: 'Oswald', sans-serif;
   border-top: 1px solid rgba(240, 240, 240, 0.425);
 }

 .copyright-name {
   color: #F2AC32;
   text-transform: capitalize;
 }
 .footer .container-footer {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 40px;
   padding: 20px;
 }





 .footer .box .social li {
   margin-right: 10px;

 }
 .footer .box .social li a {
   background-color: #313131;
   color: #b9b9b9;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 50px;
   height: 50px;
   font-size: 20px;
   transition: var(--main-transition);
 }
 .footer .box .social .facebook:hover {
   background-color: #1877f2;
 }
 .footer .box .social .twitter:hover {
   background-color: #1da1f2;
 }
 .footer .box .social .youtube:hover {
   background-color: #ff0000;
 }
 .footer .box .social .instagram:hover {
   background-color: #e50f85;
 }
 .footer .box .social .snapchat:hover {
   background-color: #fdf03b;
 }
 .footer .box .social .telegram:hover {
   background-color: #3b65fd;
 }
 .footer .box .social .tiktok:hover {
     background-color: #000000;
   }
 .footer .box .text {
   line-height: 2;
   color: #b9b9b9;
 }
 .footer .box .links li {
   padding: 15px 0;
   transition: var(--main-transition);
 }
 .footer .box .links li:not(:last-child) {
   border-bottom: 1px solid #444;
 }
 .footer .box .links li:hover {
   padding-left: 10px;
 }
 .footer .box .links li:hover a {
   color:  #b9b9b9;
 }
 .footer .box .links li a {
   color: #b9b9b9;
   transition: var(--main-transition);
 }
 .footer .box .links li a::before {
   font-family: "Font Awesome 5 Free";
   content: "\F101";
   font-weight: 900;
   margin-right: 10px;
   color: var(--main-color);
 }
 .social li{
   list-style-type: none;

 }

 .courses{
     margin-top: 20px;
 }
  .courses li{
   color: #b9b9b9;
 text-align: center;
   list-style: none;

    margin-right: 30px;

  }
  .title_course{
   color: #D07000;
   text-align: center;
  }

  .imgcy{
   max-width: 100%;
   width: 100%;
   height: 100%;
  }
  .cleint-s{
   color:#D07000 ;
   text-align: center;
  }

     @media (min-width: 850px) {
         .btn-contact {
             padding: 10px 29px;
             background-color: #117838;
             color: #fff;
             border: none;
             margin-left: 17px;
             width: -webkit-fill-available;
              margin-right: 17px;
             border-radius: 5px;
             cursor: pointer;
         }

     }

   /* Large */
   @media (min-width: 1200px) {
     .container {
       width: 1170px;
     }
     .main {
       width: 100%;
       color: #b9b9b9;
       font-size: 17px;
       display: flex;
         justify-content: space-between;
         align-items: center;
         padding: auto;

      }
      .image{
       background: url(../imgs/zakiNew.png) no-repeat ;
       background-size:contain;
       padding: 200px;
       /* height: calc(100vh - 80px); */
       width: 400px;
       margin-left: -92PX;
     margin-top: -100px;

     }
     nav ul {
         margin-top: -90px;
         float: right;
         margin-right: 20px;

       }


       .footer .box h3 {
         text-align: center;
         color: #b99232;
         font-size: 50px;
         margin-top: -70px;

       }

       .footer .box .social {
         display: flex;
         margin-left: 440PX;
       }
       .footer .box .line {
         display: flex;
         align-items: center;
         color: #b9b9b9;
         margin-bottom: 30px;
         text-align: center;
         margin-top: 30px;
         margin-left: 413px;
     }
     .cycle{
         position: relative;
         margin: 30px auto;
         width: 40%;
         height: 30%;
         margin-top: 90px;
        }
        .btn-contact {
         padding: 10px 29px;
         background-color: #117838;
         color: #fff;
         border: none;
         margin-left: -41px;
         width: -webkit-fill-available;
         margin-right: -41px;
         border-radius: 5px;
         cursor: pointer;
     }
     .name-en {
         padding-top: 0px;
         margin-top: -23px;
         margin-left: 25px;
         color: #b9b9b9;
         font-style: italic;
     }

   }



     @media (max-width:850px){
         .btn-contact {
             padding: 10px 29px;
             background-color: #117838;
             color: #fff;
             border: none;
             margin-left: -83px;
             width: -webkit-fill-available;
             margin-right: -82px;
             border-radius: 5px;
             cursor: pointer;
         }
         .massage{
             font-size: 30px;
             color: #b9b9b9;
             margin-left: -70px;

             flex: 1 1 auto;
             min-height: 1px;
             padding: 5px;

         }
         .title{
             text-align: center;

         }

       .name_en{
         color: #714d5f;
         margin-left: -80px;
         font-style: italic;
       }

       .container {
         width: 400px;
       }


       .main {
         width: 200px;
         color: #b9b9b9;
         font-size: 17px;

           justify-content: space-between;
           align-items: center;
           padding: 20px;

        }

        .image{
         background: url(../imgs/zakiNew.png) no-repeat ;
         background-size:contain;
         padding: 200px;
         /* height: calc(100vh - 80px); */
         width: 400px;
         margin-left: -92PX;
         margin-top: -100px;

       }
       nav ul {
           margin-top: -15px;
           float: left;
           margin-right: 50px;

         }

      .text{
         text-align: center;
         padding: 0px;
      }

      .checkbtn{
         margin-right:-90px ;
         margin-top: 10px;
      }
      #client{

         margin-left: 19px;
         margin-top: 30px;
         color: #117838;
         padding-left: 69px;


      }
      .title{

         font-size: 26px;
      }
      .title_course {
         color: #117838;
         text-align: center;
      }
      .footer .box .social {
         display: flex;
         margin-left: 10%;
     }

       .cycle{
           position: relative;
           margin: 30px auto;
           width: 100%;
           height: 50%;
           margin-top: 90px;
          }
          .image{
             margin-left: -20px;
           }
           #client{
             width: 300px;
             color: #117838;
             padding-left: 19px;
         }
         .info{
             margin-left: -115px;

         }
         .box h3 {
             margin-left: -30px;
         }
         .name-en{
             margin-left: -35%;
            }
            .logo-name{

             padding-top: 0px;
             margin-top: -20px;
             margin-left: -162px;
             color: #b9b9b9;
             font-style: italic;
          }

     }
     @media(max-width:600px){
         .nav-top{
             margin-left: 35px;
             margin-right: 35px;


         }
         .outerMessage{
             font-size: 30px;
             color: #b9b9b9;


             flex: 1 1 auto;
             min-height: 1px;
             padding: 5px;

         }
         #client{
             /* width: 400px;

             color: #117838;
             padding-left: 10px;
             padding-right: 59px;
             margin-top: 10px; */
             position: inherit;


         }
         nav ul {
             margin-top: -15px;
             float: left;
             margin-right: 50px;
             height: 442px;
           }

        .text{
           text-align: center;
           padding: 0px;
           animation: moveabove 4s linear 1;
        }
        @keyframes moveabove {
         100%{
             transform: translateY(-100px);

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

         }
     }
        .logo-name{
           margin-left: -60px;


           animation: moveabove 1s linear 1;
         }
         @keyframes moveabove {
          100%{
              transform: translateY(-100px);

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

          }
         }

        .checkbtn{
           margin-right:-80px ;
           margin-top: 35px;
           animation: moveabove 2s linear 1;
         }
         @keyframes moveabove {
          100%{
              transform: translateY(-100px);

          }
          0%{
              transform: translateY(0px);
          }
          }
        .name_en{
         color: #982466  ;
         margin-left: -37px;
         font-style: italic;
         box-shadow: 4px 5px 17px -4px #982466;

       }
       .image{
         margin-left: -20px;
         animation: moveabove 3s linear 1;
     }
     @keyframes moveabove {
      0%{
          transform: translateY(-100px);

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

      }

  }
 .name-en{
     padding-top: 0px;
     margin-top: -23px;
     margin-left: -30px;
     color: #b9b9b9;
     font-style: italic;
    }

    .btn-contact {
     background-color: #117838;
     color: #fff;
     border: none;
     width: -webkit-fill-available;
     border-radius: 5px;
     cursor: pointer;
     margin: auto;
 }
 .massage {

     margin-left: -70px;
     flex: 1 1 auto;
     min-height: 1px;
     padding: 5px;
 }



     }
     @media(max-width:480px){
         .nav-top{
             margin-left: 35px;
             margin-right: 35px;


         }
         .outerMessage{
             font-size: 30px;
             color: #b9b9b9;


             flex: 1 1 auto;
             min-height: 1px;
             padding: 5px;

         }
         .messageInput {

             font-size: 15px;
         }
         #client{
             /* width: 400px;

             color: #117838;
             padding-left: 10px;
             padding-right: 59px;
             margin-top: 10px; */
             position: inherit;


         }
         nav ul {
             margin-top: -15px;
             float: left;
             margin-right: 50px;
             height: 442px;
           }

        .text{
           text-align: center;
           padding: 0px;
           animation: moveabove 4s linear 1;
        }
        @keyframes moveabove {
         100%{
             transform: translateY(-100px);

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

         }
     }
        .logo-name{
           margin-left: -60px;


           animation: moveabove 1s linear 1;
         }
         .articles .box {

             width: 356px;
         }
         .btn-contact {
             background-color: #117838;
             color: #fff;
             border: none;
             width: -webkit-fill-available;
             border-radius: 5px;
             cursor: pointer;
             margin: auto;
         }

         @keyframes moveabove {
          100%{
              transform: translateY(-100px);

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

          }

         }

        .checkbtn{
           margin-right:-50px ;
           margin-top: 35px;
           animation: moveabove 2s linear 1;
         }
         @keyframes moveabove {
          100%{
              transform: translateY(-100px);

          }
          0%{
              transform: translateY(0px);
          }
          }
        .name_en{
         color: #714d5f  ;
         margin-left: -37px;
         margin-top: 10px;
         font-style: italic;
       }
       .image{
         margin-left: -20px;
         animation: moveabove 3s linear 1;
         margin-top: -10%;
     }
     .logo-name {
         margin-left: -60px;
         animation: moveabove 1s linear 1;
         margin-top: -5px;
       }
       .formSend {
         width: 300px;
         margin: -14px auto;

       }

       .messageName {
         margin-left: 150px;
         margin-bottom: 10px;
         margin-top: 48px;
       }
       .title {

         font-size: 21px;


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

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

      }



  }


  .iconForm i {
     position: absolute;
     left: -44px;
     top: 48px;
     color: #117838;
 }



     }
     @media(max-width:415px){
       .nav-top {
         margin-left: 40px;
         margin-right: 104px;}
         .articles .container {
             margin-left: -14px;
         }

        .checkbtn{
         margin-right:-50px ;
         margin-top: 35px;
         animation: moveabove 2s linear 1;
       }
       .text {
         margin-right: 10%;
         margin-left: 10%;

       }
       .btn-contact {
         /* margin-left: 0px; */
         /* width: -webkit-fill-available; */
       }
       .articles .container {
         margin-left: -14px;
         width: 141px;
     }

     }
 .clients{
     width: 100%;
     height: 70vh;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 130px;
     position: inherit;

 }
 .imgservice{
   height: 500px;
   width: 600px;
 }



 /* css slider */

 .slide-container{
     position: relative;
     /* width: 800px; */
     height: 400px;
     padding-top:30px;
     border: 3px solid  rgba(0,0,0,0.2);
     box-shadow: 0 0 8px 2px rgba(0,0,0,0.2);
 }
 .slide-container .slides{
     width: 100%;
     height: calc(100% - 40px);
     position: relative;
     overflow: hidden;
 }
 .slide-container .slides img{
     width: 100%;
     height: 100%;
     position: absolute;
     object-fit: fill;
 }
 .slide-container .slides img:not(.active){
     top: 0;
     left: -100%;
 }
 span.next, span.prev{
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     padding: 14px;
     color: rgb(207 207 207);
     font-size: 24px;
     font-weight: bold;
     transition: 0.5s;
     border-radius: 3px;
     user-select: none;
     cursor: pointer;
     z-index: 1;
 }
 span.next{
     right: 20px;
 }
 span.prev{
     left: 20px;
 }
 span.next:hover, span.prev:hover{
     background-color:rgb(120, 20, 68);
     opacity: 0.5;

     color: #f1f1f1;
 }
 .dotsContainer{
     position: absolute;
     bottom: 5px;
     z-index: 3;
     left: 50%;
     transform: translateX(-50%);
 }
 .dotsContainer .dot{
     width: 15px;
     height: 15px;
     margin: 0px 2px;
     border: 2px solid rgb(207 207 207);;
     border-radius: 50%;
     display: inline-block;
     cursor: pointer;
     transition: background-color 0.6s ease;
 }
 .dotsContainer .active{
     background-color:rgb(207 207 207);;
 }

 @keyframes next1{
     from{
         left: 0%
     }
     to{
         left: -100%;
     }
 }
 @keyframes next2{
     from{
         left: 100%
     }
     to{
         left: 0%;
     }
 }

 @keyframes prev1{
     from{
         left: 0%
     }
     to{
         left: 100%;
     }
 }
 @keyframes prev2{
     from{
         left: -100%
     }
     to{
         left: 0%;
     }
 }

 /* end slider */
  /* star client title  */

 .client_title{
     color: #D07000;
     text-align: center;

 }
 .btn-contact-market{

     background-color: #ede9e3;
     padding: 0px 20px;
     border: none;
     cursor: pointer;
     color: #D07000;
     font-size: 16px;

     width: 80%;
     height: auto;
     /* padding-bottom: 10px; */
     margin-bottom: 10px;
     border-radius: 18px;

   }

   .btn-contact-market:hover {
     background-color: #006600;
     color: white;
   }

   .btn-contact-market:active {
     cursor: pointer;
   }

   p {
     margin: 10px 0;
   }
 .social-buttom{
     margin-top: 10px;
 }


 .title-explain{
     color: #117838;
     /* padding-bottom: 10px; */
     font-size: 20px;
     text-align: center  ;
     /* margin-top: -10px; */


  }


  /*  */
  /* body {
     background-color: #121212;
     color: #ffffff;
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 20px;
 } */

 .container1 {
     max-width: 600px;
     margin: auto;
     padding: 20px;
     border-radius: 8px;
     background-color: #1e1e1e;
     box-shadow: 0 4px 10px rgba(129, 127, 118, 0.5);
     text-align: right;
 }

 @media (max-width: 400px) {

     .container1 {
         max-width: 420px; /* العرض الأقصى للفورم */
         width: 90%; /* جعل العرض 70% من الشاشة */
         margin: auto; /* توسيط الفورم */
         padding: 10px;
         border-radius: 8px;
         background-color: #1e1e1e;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
         text-align: right; /* محاذاة النص من اليمين */
     }
 }

 h1 {
     text-align: center;
     color: #D98324;

 }

 label {
     display: block;
     margin: 10px 0 5px;
     color: #D98324;

 }

 input, textarea {
     width: 90%;
     padding: 10px;
     margin-bottom: 15px;
     border: 1px solid #333;
     border-radius: 4px;
     background-color: #2c2c2c;
     color: #ffffff;
     transition: border-color 0.3s;

 }

 input:focus, textarea:focus {
     border-color: #D98324;
     outline: none;
 }

 .container1 input[type=submit]{
     width: auto;
     padding: 8px 16px;
     background-color: #D98324 ;
     color: #ffffff;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     transition: background-color 0.3s;
     margin-top: 10px;
 }

 button:hover {
     background-color: #D98324;
 }

 button:active {
     background-color: #965714;
 }
  /*  */
  /* newsletter */



 .titlenewslet {
     text-align: center;
     color: #D98324;

 }

 .subtitle {
     color: #dad4cf;

     font-size: 14px; /* حجم الخط الأصغر */
     text-align: center; /* محاذاة النص في المنتصف */
     margin: 10px 0; /* إضافة مسافة حول العبارة */
 }


 /* notes  */
 .notes-box {
     position: fixed; /* جعل الصندوق ثابت على الجانب */
     right: 20px; /* المسافة من اليمين */
     top: 100px; /* المسافة من الأعلى */
     width: 300px; /* عرض الصندوق */
     background-color: #1e1e1e; /* لون خلفية الصندوق */
     border-radius: 8px; /* زوايا مدورة */
     padding: 15px; /* حشوة داخلية */
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* ظل */
     color: #ffffff; /* لون النص */
     margin-top: 200px;
 }


 .notes-box h2 {
     /* color:#950a07; */
     /* font-weight: bold; */
     text-align: right; /* محاذاة العنوان من اليمين */
 }




 .notes-box textarea:focus {
     border-color: #6200ea; /* تغيير لون الحدود عند التركيز */
     outline: none; /* إزالة الحدود الافتراضية */
 }





 .notes-text {
     text-align: center; /* محاذاة النص في المنتصف */
     margin: 10px 0; /* إضافة مسافة حول النص */
 }

 .contact-link {
     text-align: center; /* محاذاة الرابط في المنتصف */
     margin: 10px 0; /* إضافة مسافة حول الرابط */
 }

 .contact-link a {
     font-weight: bold;
     color: #b99232; /* لون الرابط */
     text-decoration: none; /* إزالة التسطير */
 }


 .contact-link a:hover {
     text-decoration: underline; /* إضافة التسطير عند التمرير */
     background-color:#1e1e1e;
     border-radius: 5px;
 }

 .whats-app {

     text-decoration: none; /* إزالة التسطير */
     animation: bounce 1s infinite; /* تطبيق الحركة */
 }

 @keyframes bounce {
     0%, 100% {
         transform: translateY(0); /* الوضع الأصلي */
     }
     50% {
         transform: translateY(-10px); /* التحرك لأعلى */
     }
 }