*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


body{

    font-family: 'Oswald', sans-serif;
    font-family: 'Poppins', sans-serif;
    font-family: 'Work Sans', sans-serif;
}
 
.container{
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;

}
@media (min-width: 768px){
    .container{
        width: 750px;
    }
}

@media (min-width: 992px){
    .container{
        width: 970px;
    }
}

@media (min-width: 1200px){
    .container{
        width: 1170px;
       
    }
}

#scrollUp{
    position: absolute;
    right: 0;
    bottom: 5;
    
}

/* start componant*/
.special-heading{
    padding-top: 10vh;
    color: #ede7e2;
    font-size: 100px;
    text-align: center;
    font-weight: 800;
    letter-spacing: -3px;
    margin: 0;
}
.special-heading + p{
    margin: 40px 0 0;
    font-size: 20px;
    text-align: center;
    color: #797979;
}
@media(max-width: 767px){
    .special-heading{
        font-size: 50px;
    } 
    .special-heading + p{
        margin-top: 20px;
    }
}
/* End componant*/


/* start header*/
.header{
    padding: 20px;
}

.header .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header .logo{
    width: 150px;
}
.header .links{
    position: relative;

}
.header .links:hover .icon span:nth-child(2){
   width: 100%;

}
.header .links .icon{
    width: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

}
.header .links .icon span{
    background-color: #eee;
    margin-bottom: 5px;
    height: 3px;
}
.header .links .icon span:first-child{
width:100%;
}
.header .links .icon span:nth-child(2) {
    width: 90%;
    transition: 0.3s;
    }
    .header .links .icon span:nth-child(3) {
        width: 100%;
        }
.header .links ul{
    list-style: none;
    margin: 0;
    padding: 0;
    /*background: #eee;*/
    background:rgba(0,0,0,0.3) ;
    position: absolute;
    right: 0;
    min-width: 250px;
    top: calc(100% + 20px);
    display: none;
    z-index: 1;
}
.header .links ul::before{
    content: "";
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #f6f6f6 transparent;
    position: absolute;
    right: 5px;
    top: -20px;
}
.header .links:hover ul{
    display: block;
}
.header .links ul li a{
    display: block;
    padding: 15px;
  
    text-decoration: none;
    color: #eee;
    transition: 0.3s;
}
.header .links ul li a:hover{
    padding-left:25px ;
}
.header .links ul li:not(:last-child) a{
    border-bottom: 1px solid #DDD;
}

/* End  header*/

/* start home*/
.home{
    background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(../img/home2.jpg);
    background-size: cover;
    height: calc(100vh);

}
.buld{
    position: absolute;
    padding-left: 20%;
    font-size: 1.5em;
    font-weight: bold;
    color: #ff8000;
    max-width: 100%;
}
.zap{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -20%);
    font-size: 9em;
    font-weight: bold;
    color: #e6e6ff;
    max-width: 100%;
}
.smoll{
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 11px;
    transform: translate(-50% , 0%);
}
/*End home*/
/*start intrudection*/
.list_intro{
    padding-left:250px ;
}
.introduction_card{
    padding-left: 200px;
}
@media(max-width:797px){
    .list_intro{
        padding-left:0 ;
    } 
    .introduction_card{
        padding-left: 0;
    }
}

/*ENd intrudoction*/

/*start company*/
.company{
    width:60% ;
}
/*End company */

/*start out team*/
.img_outteam{
    padding-left: 50vh;
}
@media(max-width:797px){
    .img_outteam{
        padding-left: 0;
       max-width: 100px;
    }
}

/*End our team */

/*start SERVICES OFFERED*/
.services_offered{
   padding-left: 50vh;
   font-size: 20px;
}
.grid_img{
    padding-left: 50vh;
}

.container2{
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;

}
.serveces2{
    padding-top: 10vh;
    padding-left: 50vh;
}
@media(max-width:797px){
    .services_offered{
        padding-left: 8vh;
        font-size: 15px;
     }
     .grid_img{
        padding-left: 0;
    }
    .serveces2{
        padding-top:10vh;
        padding-left: 0;
    }
}
/*End SERVICES OFFERED */

/*start STEEL STRUCTURE WORK*/

.STEEL{
    width: 70%;
    padding-left:50vh ;
}
.row img{
    padding: 10px;
}
@media(max-width:797px){
    .STEEL{
        width: 100%;
        padding-left:5vh ;
    
}}
/*End STEEL STRUCTURE WORK*/

.work{
    margin-left: 50vh;
    background-color:#242f65;
    color:#eee
}
.sertification{
    margin-left: 30vh;
}
@media(max-width:797px){
    .sertification{
        margin-left: 0;
    }}

    .eail{
        padding-top: 50px;
    }
    .eail a{
       
        padding-left: 60vh;
        color: black;
        font-size: 50px;
        font-weight: 500;
    }
    .phonecontract{
        padding-top: 10px;
    }
    .phonecontract a{

        padding-left: 68vh;
        text-decoration: none;
        color: black;
        font-size: 30px;
        font-weight: 500;
    }
    @media(max-width:797px){
        .eail a{
            font-size: 40px;
            padding-left: 0;
        }
    
        .phonecontract a{

            padding-left: 0;}
    }

    .iconcontract{
       padding-left: 73vh;
    }
    .iconcontract a{
        padding-left: 2vh;
     }
     @media(max-width:797px){
        .iconcontract{
            padding-left: 10vh;
         }
         .iconcontract a{
             padding-left: 2vh;
          }
    }
    .footer{
       
        color: #000;
        padding: 2em;
        display: flex;
        justify-content: space-between;
    }
    .footer a{
        color: #000;
    }
    .footer-title{
        font-size: 1.3em;
        font-weight: 600;
    }
    .footer-title span{
        color: #254468;
    }
    .phpproject{
        background-color:#242f65;color:#eee; margin-left:100px;
        justify-content: space-between;
        text-decoration: none;
        color: white;
    }

    /*image view */
    .header_img{
        background-color: rgb(0,0,0,0.5);
        width:100%;
        position: fixed;
        z-index: 999;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 100px;
    }