/* common-styles###################################3  */
body{
    height: 2000px;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.overlay, .happy-overlay ,.section-7-parent-overlay{
    width: 100%;
    height: 100%;
    background-color:rgba(44, 63, 44, 0.5);
    position: absolute;
    position: relative;
}
a{
    text-decoration:none;
}
/* general style/////////////////////// */
.Website-Line{
    border: 2px solid rgb(4, 57, 8);
    width: 65px;
margin: auto;
margin-top: 20px;
 }
.after-from-point:after{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    background-color: rgba(2, 34, 11, 0.7);
    z-index: -1;
}
.after-from-point:hover::after{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: 1s;
    z-index: -1;
}
.after-from-all-width::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background-color: rgba(2, 34, 11, 1);
    transition: 1s;
}
.after-from-all-width:hover::after{
    width: 100%;
    height: 100%;
    opacity: .2;
    position: absolute;
}
 .website-contaner{
    width: 80%;
    height: 100vh;
     margin: auto;
overflow: auto;
 }

.conain-head{
    position: relative;
}
.header-contaner{
    background-color: rgb(4, 27, 11);
    height: 50px;
    width: 100%;
    position: fixed;
    z-index: 20;
    top: 0;
     opacity: .7;
    font-family: Georgia, 'Times New Roman', Times, serif;  
}
.header-img{
    float: left;
    width: 70px;
    height: 50px;
    border-radius: 23px;
    margin-left: 10%;
}
.header-lists-item{
    float: right;
    margin-right: 70px;
    margin-top: 10px;
  }

   .header-lists-item  li{
    display: inline-block;
    margin-right:20px;
    list-style: none;
 }
 
/* important//////////////// */
.blog-post-parent{
    position: relative;
}
.blog-post {
    background-color: rgb(47, 54, 43);
    color: rgb(255, 255, 255);
    position: absolute;
    font-size: 22px;
    top: 45px;
    left: -39px;
     height: 50px;
    width: 130px;
padding : 10px 19px;
visibility: hidden;
}
.blog-post-parent:hover  .blog-post{
    visibility: visible;
}
/* ///////////////////////////////////////// LINE //////////// */
.header-lists-item li .home{position: relative;}
.header-lists-item li .home::after{
      content: "";
     height: 3px;
     width: 100%;
     top: 25px;
     left: 0;
     position: absolute;
     background-color:rgb(255, 255, 255);
}
.header-lists-item>li a{
    position: relative;
}
 .header-lists-item>li a::after{
     content: "";
    height: 0;
    width: 0;
    top: 25px;
    left: 0;
    position: absolute;
    background-color:rgba(255, 255, 255,1);
}
 .header-lists-item>li a:hover::after{
     position: absolute;
     background-color:rgba(255, 255, 255,1);
    transition: 1s;

     height: 3px;
    width: 100%;
    top: 25px;
    left: 0px;
}
/* ///////////////////////////////////////// LINE //////////// */

/* important//////////////// */
 .header-lists-item  li a{
    color: rgb(255, 255, 255);
    font-size: 18px;
}
/* <!-- section-creative-agency #########################3 --> */
.agancy-parent{
    height: 100vh;
    background-image: url(imggs/lateef.jpg);
    background-size: cover;
   
    position: relative;
 position: relative;
 }
.agancy-content{
    /* background-color: rgba(2, 83, 130, 0.492); */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.agancy-h1{
    font-size: 30px;
color: rgb(255, 255, 255);
font-family:'Times New Roman', Times, serif;
text-transform: uppercase;
}
.agancy-p1{
    font-size: 17px;
    letter-spacing: 1px;
    color: rgba(241, 241, 241, 0.941);
}
.agancy-btn{
    padding: 15px 18px;
    margin-left: 10px ;
    margin-top: 15px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor:pointer;
    width: 175px;
}

 .btn2{
    background-color: rgb(5, 39, 16);
    color: white;
 }
 .agancy-btn:hover{
    opacity: .5;
 }
 /*  welcom to web site////////////////////////////////////// */
 .website-parent{
    font-family: Georgia, 'Times New Roman', Times, serif;

 }
 .websit-h1{
   text-align: center;
   padding-top: 70px;
 color:  rgb(3, 60, 9);
 }
 .website-fully{
    margin-top: 60px;
    float: left;
    border: 1px solid black;
    width: 30%;
    height: 47%;
     position: relative;
    position: relative;
    z-index: 4;
  }
 
 .website-fully-num2{
    margin: 60px 5% 2% 5%;
 }
 .website-fully i  {
    display: block;
    text-align: center;
    font-size:xx-large;
    padding-top: 20px;
    color: #083f08;
    
 }
 .website-title{
    text-align: center;
    text-transform:capitalize;
    padding-top: 10px ;
    color: #446744;
    
 }
 .website-fully:hover .website-title{
    color: rgb(224, 224, 198);
 }
 .website-fully:hover  .website-read-more ,  .website-fully:hover   i  {
    color: rgb(224, 224, 198);
 }
 .website-content{
    text-align: center;
    font-size: 18px;
    padding-top: 14px;
    letter-spacing: 2px;
    line-height: 30px;
    color: gray;
}
 .website-read-more{
text-align: center; 
 display: block;
line-height: 80px;
color: #446744;
font-size: 18px;
font-weight: bolder;
}
/* //////////////////SECTION 3 (featured works)////////////////// */
.work-parent{
   height:150vh;
   background-color: rgb(208, 208, 203);
} 
.website-contaner-2{
    /* margin-top: 200px ; */
    height:150vh;
}
.works-img{
    float: left;
    width: 28%;
    /* background-color: cadetblue; */
    height: 270px;
    position: relative;
 }

.works-img-2 {
    margin:2px 8% 2px  8%;
}
 .works-part-1{  margin-top: 90px;
 }
.works{
    overflow: auto;
   
}

  .works-img img{
    margin-left: 10% ;
    margin-top: 5%;
    width: 80%;
    height:90% ;
} 
 

    .works-title{
        text-align: center;
        margin: 120px  2px 20px 2px;
        font-size: 40px;
        color:  rgb(4, 57, 8)  ;
    }
     
  .works-overlay{
     width:100%;
    height:270px;
    background-color:rgba(2, 50, 8, .4);
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}
.works-img:hover .works-overlay{
    visibility: visible;
}
.works-overlay h3 {
    text-align: center;
    margin-top: 30%;
    font-size: 18px;
    color: rgb(255, 255, 255);

}
.works-overlay h4{
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: 16px;
}
.works-overlay .i2{
    display: inline-block;
    background-color:#072c079c;
    color:beige;
    font-size: 25px;
    margin-top: 20px;
    text-align: center;
}.works-overlay .i1{
margin-left: 35%;   
}

/*-- section-3 <<what we offer//////////////////////////////////////////>> -->*/
.container-3{
     
    height: 100vh;
    /* background-color: rgb(125, 159, 128); */
}
.offer-title{
    text-align: center;
    padding-top: 60px;
    color:  rgb(4, 57, 8)  ;

}
.offer-details-parent{
    width: 80%;
    height:100%;
   margin: auto;
    overflow: auto;
   margin-top: 30px;

}
.our-details h2{    display: inline-block;
}
.our-details{
 
    width: 30%;
    height:176px;
    border: 1px rgb(18, 75, 8) solid;
    float: left;
    position: relative;
    z-index: 4;
    margin: 22px 0;
 }
 .our-details-title{
     text-transform: capitalize;
    padding-top: 24px;
    color: rgb(18, 75, 8);
    padding-left: 28px;
    font-size: 20px;
 }
 .details-explaination{
line-height: 30px;   
padding-left: 70px;
text-transform: capitalize;
    font-size: 16px;
    color: rgb(135, 141, 136);
 }
 .our-details i{
    display: inline-block;
    padding-left: 15px;
    font-size: 20px;
    color: rgb(18, 75, 8);
 }
  
 .our-details:hover h2 ,.our-details:hover i  {
    color: beige;
 }
.our-details2{
    margin: 22px 5%;
}
/* .part-2-container{
position: relative;
bottom: 0;
margin-top: 10%;
} */
 

  /*section-4   //////////  <<  why choose us  >>  /////////////////////////////////////// -->*/
  .choose-container{
    height: 100vh;
    width: 100%;
    background-color: rgb(214, 216, 211);
}
  .choose-parent{
    width: 80%;
    height: 100vh;
    margin: auto;
    overflow: auto;
  }
  .choose-sec-1 , .choose-sec-2-img{
    width: 46%;
    height: 100%;
    float: left;

  } 
  .choose-sec-1 .choose-title{
    padding-top: 120px;
    text-transform: capitalize;
    font-size: 30px;
    padding-left: 0;
    padding-bottom: 10px;
    color:  rgb(4, 57, 8)  ;


  }
  .choose-title-underline{
    border: 2px rgb(4, 57, 8) solid;
    width: 90px;
   
  }
  .choose-sec-1 .choose-paragraph{
    font-size: 17px;
    padding-top: 60px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #446744;
  }
  .choose-sec-1 .p-lines{
    font-size: 15px;
    padding-top: 30px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #616361;
  }

.choose-sec-2-img .choose-img{
width: 100%;
height: 70%;
background-color: aliceblue;
margin-top: 8%;
}
.choose-sec-2-img .choose-img img{
    width: 80%;
    margin-left: 10%;
    height: 100%;
}
  .choose-sec-2-img{
    background-color: rgb(255, 255, 255);
    margin-left: 8% ;
  }
  .choose-list ul{
    margin-left: 35%;
    display: flex;
    list-style: disc; 
  }
  .choose-list ul li{
     color: rgb(145, 155, 150);
    font-size: 40px;
}
.choose-list ul li:hover{
    color: darkolivegreen;
}
.choose-list ul span{
    display: inline-block;
    padding-left: 40px;  

}
.list-1{
color: rgb(96, 42, 42);
}
  .choose-list{
    height: 23%;
    width: 100%;
  }
  /*<!-- /////////////////<< section 5>> ////////////////////////////////// -->*/

  .happy-clients-parent{
    height: 50vh;
     background-image: url(imggs/123sh9.jpg);
     background-attachment: fixed;
    background-size: cover;
  }

  .happy-sec1{
    height: 100%;
    width: 15%;
    margin-left: 8%;
    float: left;
    
  }
  .happy-icon{
    display: block;
    text-align: center;
        font-size: 50px;
    padding-top: 90px;
    color:beige
  }
  .hppy-title,.happy-paragraph{
    text-align: center;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color: beige;


  }
  .hppy-title{
    font-weight:bolder;
    font-size: 40px;
    padding-top: 30px;
 }
 .happy-paragraph{
    font-size: 20px;
 }
/*/////////////////////<<  pricing table  >>   ///section 6  /////////////// -->*/
.pricing-table-parent,.pricing-table-container{
    width: 100%;
    height: 115vh;
    background-color: rgb(239, 239, 239);
}
.priicing-title{
    text-align: center;
    padding-top: 80px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 50px;
    color:  rgb(4, 57, 8)  ;
}
.pricing-underline{
    border: 2px solid rgb(4, 57, 8);
    width: 110px;
    margin: auto;
    margin-top: 20px;
}
.three-tables-contaner{
    width: 80%;
    height: 480px;
    margin: auto;
    margin-top: 60px;
overflow: auto;
}
.pricing-table-1{
     width: 30%;
    height: 80%;
    position: relative;
    border: 1px  #585d58 solid;
float: left;
text-align: center;
}
.pricing-table-2 {
    margin: 0 5%;
}
.pricing-table-1 .title{
    text-transform: uppercase;
    font-size: 20px;
    color: rgb(0, 0, 0);
    padding-top: 30px;
}
.pricing-circle{
    border: 2px solid  rgb(1, 1, 1);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: auto;
   margin-top: 30px;
}
.pricing-circle,.details-here ,.pricing-table-1 .title{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

}
.pricing-circle h1{
    font-size: 33px;
    margin-top: 10px; 
}
.pricing-circle p{
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;

}
.details-here{
    font-size: 17px;
    padding-top: 24px;
    line-height: 36px;
}
.pricing-table-button a{
    color: #133d13;
}
.pricing-table-button{
    width: 130px;
    font-size: 19px;
    margin-top: 20px;
    background-color: rgb(255, 255, 255);
    border: 2px #0a3b0a solid ;
  }
.after-from-all-width{
    width: 100%;
    height: 100%;
}
.pricing-table-1:hover .title ,.pricing-table-1:hover .pricing-circle{
    color:rgb(59, 121, 52);
}
/*<!-- /////////////////<< section 7>> ////////////////////////////////// -->*/

.section-7-parent{
    width: 80%;
    height: 55vh;
    margin: auto;
    overflow: auto;
}
.section-7-container{
background-image: url(imggs/8.jpg);
background-attachment: fixed;
background-size: contain;
background-size: cover;
position: relative;
width: 100%;
font-family: Cambria, Cochin,Georgia, Times, 'Times New Roman', serif;

height: 55vh;
}
.section-7-sec1{
    height: 50%;
    width: 47%;
    float: left;
    margin-top: 55px;
    color: beige
}
.section-7-sec2{
    margin-left: 6%;
}
.section-7-parent .section-7-sec1 img{
    border-radius: 50%;
    width: 80px;
    height: 80px;
}
.section-7-sec1 h2{
    margin-top: 30px;
    font-size: 23px;
}

.section-7-sec1 img  {
    margin: 19px 23px;
    float: left;
}
.section-7-sec1 a{
    font-size: 20px;
    color:#083f08;
font-weight: bold;
} 
.section-7-sec1 p{
    margin-top: 39px;
    margin-left: 30px;
    font-size: 16px;
    text-transform: capitalize;
 }
 

/*-- //// ___________Team Section_____________ /// ___________section-8_____ ////////////// ///////////////// */
 

.Team-Section-container{
    height: 100vh;
    background-color: rgb(255, 255, 255);
}
.Team-Section-Parent{
    margin: auto;
    /* height: 50vh; */
    width: 80%;
    margin-top: 55px;
   overflow:auto;
   /* background-color: brown; */
}
.Team-Section-container .title{
    text-align: center;
   padding-top: 70px;
    font-size: 40px;
    text-transform: capitalize;
    padding-bottom: 10px;
    color:  rgb(4, 57, 8)  ;
}
.Team-Section-container hr{
    margin: auto;
    width: 110px;
    border: 2px solid rgb(4, 57, 8);
}
  .team-sec1{
    width: 30%;
    background-color: rgb(228, 234, 230);
    height:300px;
    padding: 18px 14px;
    float:left; 
    position: relative;
  
}
 
  .team-sec1-img  {
    margin: auto;
    width: 80%;
    height: 75%;
    position: relative;
}
.team-sec1-img img{
    width: 100%;
    height: 100%;
}
 .team-sec1-img .icons{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(0, 1, 7, 0.5) ;
    font-size:40px ;
    visibility: hidden;
    
}
 .team-sec1-img .icons a {
    margin-left: auto  ;
    background-color:rgb(3, 48, 5) ;
    color: white;
     display: block;
     width: 40px;
     height: 40px;
}
 
.team-sec1:hover .icons{
    visibility: visible;
}

.Team-Section-Parent   .team-sec1 h2{
    font-size: 30px;
}
.Team-Section-Parent   .team-sec1 p{
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-transform:uppercase;
    font-size: 16px;
    color: rgb(45, 54, 47);
}
.team-sec-1-articl{
    text-align: center;
      margin: 5% 8%;  
}
.team-sec-2{
margin: 0 5%;
}
.team-sec1:hover h2{
    color: white;
}
.team-sec1:hover p{
    color: rgb(18, 75, 8);
}
/* /////////////  ############33  {section  ما قبل الاخير  RECENT NEWS }  */
.recent-news-container {
    height:110vh ;
    width: 100%;
 }
.recent-news-container h1{
    font-size: 40px;
    padding-top: 50px;
    text-align: center;
    padding-bottom: 7px;
    color:  rgb(4, 57, 8)  ;

}
.recent-news-parent{
    overflow: auto;
    width:80%;
    margin: auto;
    height:78%;
    margin-top: 37px;
}
.recent-news-container hr{
    width: 90px;
    border: 2px solid rgb(4, 57, 8);
     margin: auto;
}
.ok-ok-1{
    float: left;
    position: relative;
    width: 30%;
    height:100%;
    background-color: rgb(228, 234, 230);

}
.ok-ok-1 .img{
    text-align: center;
}
.ok-ok-1 .img img{
    width: 240px;
    height:270px;
}
.ok-ok-1 .icons p{
    display: inline-block;
 padding: 20px 0 15px 30px;
 font-size: 14px;
}
.ok-ok-1 .icons .p1 , .ok-ok-1 h3 ,.ok-ok-1 p{
    padding-left:24px ;
}
.ok-ok-1 .icons p i{
    color :#659465;
}
.ok-ok-1 h3{
    font-size: 21px;
    padding-bottom: 16px;
}
.ok-ok-1 p{
    font-size: 19px;
    color: gray;
}
.ok-ok-1 a{
    color :#659465;
    font-size: 22px;
    margin-left: 24px;
}
.ok-ok-1 .ok-paragrapg{
    padding-bottom:18px ;
    font-size: 18px;
}
.ok-ok-2{
    margin: 0 5%;
}

/*<!-- ///////////// FOOOOTER  ///////////////////// -->*/
.icons span::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(red, green, red, 1);
    z-index: -1;

}
.icons span:hover::after{
    background-color:rgba(red, green, red, 1);
    width: 100;
    height: 100%;
    transition: 1s;
    z-index: -1;

 }

.footer-container{
    background-color: #a2b5a2;
    height: 50vh;
    width: 100%;
}
.footer-parent{
    width: 40%;
    margin: auto;
    height: 100%;
    
}
.footer-parent .img{
    margin-left: 145px;
 }
 .footer-parent .img img{
    margin-top: 50px;
 }
 .footer-parent .icons {
 margin: 20px 10px 25px 80px ;

 }
 .footer-parent .icons i {
text-align: center;
padding-top: 14px;

background-color:#446744;
color: beige;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 25px;
}
.footer-parent .icons i:hover{
    
     color:#083f08; 
background-color: rgb(207, 207, 209); 
}
.footer-parent p{
    text-align: center;
    text-transform: uppercase;
    color: gray;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 12px;
    letter-spacing: 1px;
}