body{
    margin: 0;
    font-family: 'Ubuntu', sans-serif;
    font-size: 15px;
}
p{
    font-size: 14px;
    font-family: 'Proxima Nova',Arial,sans-serif;;
}
h1{
    font-family: 'Lora' serif;
    font-weight: 400;
    font-size: 1.5rem;
    margin: 0;
}
h1 span{
    color: rgb(9, 194, 9);
}
.container{
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
   
    
}
.container-nav{
    display: flex;  
    justify-content: space-between;
}

header{
    background: #f8f8f8;
    padding: 2em 0;
    
}
nav ul{
    display: flex;
    list-style: none;
    padding: 0;
    justify-content: center;
}
nav li{
    margin-left: 2em;
}
nav a{
    text-decoration: none;
    font-weight: 600;
}
nav a:hover,
nav a:focus{
    color: rgb(21, 192, 6);
    text-decoration: underline;
}
.current-page{
    color:rgb(21, 192, 6) ;
    border-bottom:2px solid rgb(21, 192, 6);
}
.first-page{
    display: flex;
    
}
.first-img{
    width: 60%;
    height: 500px;

}
.verticle-text{
    writing-mode: vertical-lr;
    margin-top: 200px;
    padding: 10px;
    font-weight: 100;
    font-size: 10px;
}

.article{
    margin-top: 150px;
    margin-left:20px ;
    padding: 20px;

}
.green-text{
    color:rgb(21, 192, 6) ;
}
.green-btn{
    border: 1px solid rgb(119, 236, 108);
    text-align: center;
    padding: 7px;
    border-radius: 35%;
    background:rgb(119, 236, 108) ;
    
}
.second-container-page{
    background: #f8f8f8;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center ;
        
}

.second-page{
    display: flex;
    justify-content: space-between;
    margin: auto;
    position: relative;
 
}
.green-box{
    margin-left: 3rem;
    margin-top: 0;
    background: rgb(34, 163, 62) ;
    padding: 10px 100px 150px 10px;
    font-size: 15px;
    line-height: 40px;
    color: white;
    
}
.green-box ul{
    list-style: none;
}
.text-left{
    padding-left: 4em;
    padding-top: 6em;
    padding-right: 10em;
    line-height: 25px;
}
.second-container-page-end{
    width: 100%;
    height: 400px;
    background: #f8f8f8;
    
}
.page-end{
    display: flex;
   
    
}
.page-end-text{
    font-size: .75em;
    margin: 20px;
    padding: 10px;
 
}
.third-page{
    width: 100%;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 2rem;
    background: #f8f8f8;
 }


.our-project img{
    width: 25%;
    height: 170px;
    padding: 5px;
    margin-top: 15px;
}
.our-project h1{
    font-size: 1.7em;
} 
.digital-agency img{
    width: 40%;
}
.digital-agency{
    display: flex;
    position: relative;
    
}
.article-digital{
    margin-left: 4em;
    margin-top: 5em;
    
}
#text{
    line-height: 25px;
}
#green-box{
    position: absolute;
    background-color:rgb(34, 163, 62) ;
    bottom: 40px;
    right: 250px;
    padding-left: 80px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px ;
    font-weight: 300px;
}

.fifth-page{
    justify-content: center;
    text-align: center;
    margin-top: 5em;
    margin-bottom: 1em;

    
}
.our-staff p{
    padding-top: 10px;
    line-height: 20px;
}

#staff{
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
.staff-box{
    padding: 40px;
    margin: auto;
}
.staff-box img{
    width: 120px;
    height: 120px;
    border-radius: 60px;
   
}
.staff-box p,h3{
    padding: 2px;
    margin: 0;
}

.social-media {
    font-size: 10px;
    padding-top: 10px;
}
.happy-client{
    background: rgb(34, 163, 62) ;
    width: 100%;
    height: 570px;
    color: white;
    text-align: center;
    padding-top: 2em;
    position: relative;

}
.happy-client img{
    width: 80px;
    height: 80px;
    border-radius: 50px;
    
    
   
}
.comment-img{
    position: absolute;
    left: 5px;
    bottom: 300px;
    align-items: center;
    
}
.comment-img img{
    border: 4px solid rgb(34, 163, 62);
    margin-left: 165px;
   
    
}
.white-box{
    margin: 60px;
}
.white-box h1{
    margin-top: 30px;
}
.comment{
    display: flex;
    justify-content: center;
    margin-top: 130px;
    
}
.comment-box{
    background: white;
    margin: 10px;
    padding-top: 50px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    color: black;
    text-align: center;
} 
.seventh-page{
    justify-content: center;
    text-align: left;
    padding: 40px;
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 10px;
    background: #f8f8f8;
}
.our-project h1{
    font-size:25px;
}
.blog-img{
    display: flex;
    
    margin: 20px;
   
}
.blog-img img{
    width: 225px;
    height: 210px;
    
}

button{
    text-align: center;
    padding: 4px 10px;
    background: rgb(31, 231, 31);
    color: white;
    border: .5px solid rgb(31, 231, 31);
    border-radius: 20px;
  
}
.contact-us{
    margin-top: 70px;
    margin-bottom: 70px;
}

.contact{
    text-align: center;
    margin: 20px 50px;
   
}

.cont-detail{
    display: flex;
    justify-content: space-between;
    padding: 30px;
    margin: 30px 10px;
   
}
.cont-box{
    background:rgb(31, 231, 31) ;
    box-sizing: border-box;
    width: 160px;
    height: 180px;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 20px;
    color: white;
}
.cont-detail h3{
    font-size: 14px;
}
input{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 10px;
    resize: vertical;
}
.map-form{
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: #f8f8f8;
    
    
}
.form{
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 30px;
}
footer{
   
    background: black;
    color: white;
    padding: 2em auto;
    
}
.black-box{
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px;
   
}
.about{
   padding: 30px;
}
.links{
    padding: 30px; 
}
.services{
    padding: 30px;
}
.question{
    padding: 30px;
}
.copyright{
    text-align: center;
    padding:30px 0;
}
.black-box p{
    color: rgb(192, 186, 186);
}
#message{
    resize: none;
    width: 100%;
    height: 225px;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 10px;
    resize: vertical;
}