*{
    box-sizing: border-box;
    margin: 0px ;
    padding: 0px;
    
}
html{
    scroll-behavior: smooth;
}
:root{
    --font_family1:"Baloo Paaji 2", sans-serif;
    --font_family2:"Open Sans", sans-serif;
    --main-color:#695aa6;
    --main-backGround:#594c8d;
    --second-color:#111111;
    --third-color:#212529;
}
html{
    font-family: "Open Sans", sans-serif;
}
a{
    text-decoration: none;
}
ul li{
    list-style: none;
}
.button{
    display: inline-block;
width: 160px;
padding: 8px;
border-radius: 20px;
background-color: var(--main-backGround);
color: white;
text-align: center;
margin-top: 40px;
letter-spacing: 1px;
font-size: 18px;
border: 2px solid var(--main-color);
font-family: var(--font_family1);
}
.section-header{
    text-align: center;
}
.section-header div{
    color: var(--second-color);
    font-weight: 100;
}
.section-header h2{
    color: var(--main-color);
    font-family: var(--font_family1);
}
h4,h3,h2,h1{
    color: var(--main-color);
    font-family: var(--font_family1);
}
section{
    padding: 60px 0px;
}
.container{
    width: 90%;
    margin: auto;
}
/* styling nav */
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 65px;
 
}
nav .logo a{
    font-family: var(--font_family1);
    font-size: 27px;
    font-weight: bold;
    color: var(--main-color);
  
}
nav .links{
    display: flex;
    align-items: center;
}
nav .links ul{
    display: flex;
}
nav .links li{
    padding: 5px 10px;
}
nav .links li a{
    color: #6c757d;
    font-weight: bold;
    font-family: var(--font_family1);
}
nav .links >a{
    display: inline-block;
    padding: 8px 17px;
    background-color: #594c8d;
    color: #fff;
    font-weight: 400;
    font-family: var(--font_family1);
    margin-left: 10px;
}
/* styling Land page */
.landing {
    height: 100vh;
    width: 100%;
    background-image: url(./images/header.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  
    font-family: var(--font_family1);
    position: relative;
}
.landing main{
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translateY(-50%);
    z-index: 2;
}
.landing div{
    color: #444;
    font-size: 62px;
    font-weight: bold;
   
}
.landing h2{
    color: #212529;
    font-size: 62px;
    line-height: 50px;
    font-weight: bold;
}
.landing p{
color: var(--second-color);
font-size: 19px;
letter-spacing: 5.5px;
}
.landing a{
margin-top: 40px;
}
.layout{
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 100%;

    background-image:  linear-gradient(to top, #fff 0%, rgba(105, 90, 166, 0.35) 99%, rgba(105, 90, 166, 0.5) 100%);;
}
/* styling  */
.about{
    display: flex;
 
}
.about .image{
width: 155%;
max-height: 400px;
overflow: hidden;
}
.about .image img{
width: 100%;
height: 100%;
}
.about main{

}
.about main .text p:first-child{
    margin-bottom: 10px;
}
.about main div,.about main .text{
 color: var(--second-color);
 font-size: 14.5px;
 letter-spacing: .6px;
 line-height: 1.8;
 font-weight: 300;
}
.about main .button{
    background-color: transparent;
    color: var(--main-color);
}
/* styling services */
.services{
 text-align: center
}
.services main{
margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.services main .cart{
 border: 1px solid #dee2e6;
 border-radius: 3px;
 padding: 15px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 230px;
}
.services main img{
width: 55px;
display: inline-block;
margin-bottom: 25px;
}
/* styling Portfolio */
.portfolio{

}
.portfolio main{
    margin-top: 30px;
    display: flex;
    gap: 20px;
}
.portfolio .cart{
    overflow: hidden;
    width: 100%;
}
.portfolio main .cart img{
    width: 100%;
}
/* styling cost section */
.cost{

}
.cost main{
    margin-top: 30px;
display: flex;
gap: 5px;
}
.cost main .cart{
    border: 1px solid #dee2e6;
    padding: 35px 15px;
    text-align: center;
    width: 100%;
}
.cost main .cart img{
    width: 55px;
    display: inline-block;
    margin-bottom: 30px;
}
.cost main .cart div{
    color: var(--second-color);
    font-weight: 100;
    font-size: 14px;
   line-height: 2;
   letter-spacing: 1px;
   font-family: var(--font_family2);
}
.cost main .cart p{
    font-size: 30px;
    margin: 15px 9px;
color: #212529;
font-weight: 400;
}
.cost main .cart .doller{
 font-size: 25px;
}
.cost main .cart .button{
    border-radius: 4px;
    font-family: var(--font_family2);
}
/* hiring */
.hiring{
 background-color: var(--main-color);
 padding: 30px 20px;
}
.hiring .container{
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hiring .text{
color: white;
}
.hiring .text h3{
     color: white;
}.hiring .text p{
    margin-top: 5px;
    font-family: var(--font_family2);
    font-size: 14px;
}
.hiring .button{
    color: #212529;
    font-weight: bold;
    background-color: white;
}
/* styling testmonial */
.testmonial{

}
.testmonial main{
    margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.testmonial main .cart-parent{
    padding-left: 40px;
    position: relative;
}
.testmonial main .cart{
    text-align: start;
    padding: 20px 10px 20px 60px;
    width: 100%;
    display: flex;
    align-items: center;
    border: 1px solid #dee2e6;
}
.testmonial main .image{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    border: 2px solid white;
}
.testmonial main img{
    width: 100%;
}

.testmonial main div p{
    color: var(--third-color);
    font-weight: 100%;
    line-height: 1.3;
    margin-bottom: 10px;
    line-height: 1.7;
}
.testmonial main div h3{
    
}