/* css style */
* {
        margin: 0px;
        padding: 0px;
        
     }

nav,.header-section ul,.header-section li{
    display: inline-flex;
  
}

.logo{
     color: grey;
     margin-top: 17px;
     margin-right: 200px;
      font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    color: #666; 
   font-size: 16px;

}

.header-section  ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  
  
}

.header-section li a {
  display: block;
  color:gray;
  text-align: center;
  padding: 22px 22px;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: bold;
}

.header-section li a:hover {
  background-color:skyblue;
  color: white;
}

.learnmore-btn{
 margin-top: 45px;
 font-weight: bold;
 font-size: 16px;
 border: none;
 width: 220px;
 height: 46px;
 background-color:#F0835D;
 color: #FFF8E7;;
 border-radius: 7px;
}

.content{
    color:rgba(255, 255, 255, 0.634);
    font-family: 'Open Sans', sans-serif; 
    text-align: center;
     font-size: 16px; 
    font-weight: 400; 
    line-height: 1.5;
    margin: 0;  
}

i{
    margin-right: 50px;  
}

.search-container{
  font-family: 'Montserrat', sans-serif;
   position: relative;
    width: 380px;
    margin-top: 10px;
     font-size: small;
     border-radius: 20px;
     background-color:white;
     display: flex;
     margin-bottom: 20px;
     
}
.search-container input {

  padding: 10px 40px 10px 15px; 
  border: 2px solid black;
  border-radius: 25px;
  font-size: 16px;
  background-color:#f0f0f0;

}
.search-container input:hover{
  background-color: white;
   border: 2px solid pink;
 
}

.search-container .search-icon {
  
  width: 38px;
  height: 40px;
  background-color: #e84d91; 
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  /* font-size: 20%; */
  cursor: pointer;
  position: relative;
  right: 40px;
}
.s-icon{
  font-size: 22px;
}


/* .search-icon{
  font-size: 10%;
} */

.main-content{
    background-image: url('img.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 60vh; 
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;}

 .main-content h1{
  color: white;
  padding: 30px;
  border-radius: 10px;
  display: inline;
   font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: #d0d3d6; 
  text-align: center;
  letter-spacing: 2px;
}
.learnmore-btn:hover{
  background-color:transparent;
  color:#F0835D;
  border: 2px solid #F0835D ;
 
}

.blogbtn{
    margin-right:33px;
    border-radius: 4px;
    background-color: #F0835D;
    color: white;
    border:none;
    font-family: 'Montserrat', sans-serif;
     font-weight: 500;
    font-size: 12px;
    padding: 4px 12px; 
    margin-left: 20px; 
    display: flex; 
    align-items: center; 
    margin-top: 17px;
}

.header-section ul{
    margin-left: 150px;
}

.header-section li{
    margin-left: 20px;
    float: left;
}

.ourservice{
    /* display: inline; */
    /* justify-content: center;     makes content to center if the display is not in block state */
     margin-left:48%;
      margin-right:48%;
      width: 100px;
      bottom: 20px;

    padding: 12px 12px;
  position: relative;
    background-color: skyblue;
    color: white;
    border-radius: 4px;
    font-size: small;
    text-align: center;
    
}

.serviceboxes{
   border-style:none;
    border-width: 2px;
    border-color: black;
    border: flex;
    display: flex;
     margin: 50px;
     text-align: center;

}

.web-design{
  
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #1d8dc3, white);   
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto; 

  
 
}
i{
  margin-left: 50px;
}
.img{
    
    height: 100px;
    border-radius: 50%;
    display: inline-block;
   width: 100px;
   margin-right:50px;
   margin-left: 50px;
   text-align: center;
      color:grey;
      font-size: 2px;

}
.space{
  margin-top: 20px;
  color: grey;
}
.serviceboxes p{
  
  font-size: x-small;
  color: grey;
 background-origin: padding-box;
 border-radius: 50px
}
.serviceboxes .details{
  color:skyblue
 
}

span{
  font-size: 30px;
}
.div-section{
   margin-left: 10px;
   width: 170px;
   margin: 20px;
   margin-left: 10%;
}
.our-portfolio{
  margin-top: 50px;
 background-color: #2c3e50;
  height: 500px;
  padding-top: 60px;

}
.port-awesome{
  margin-left: 17%;
  color: #F0835D;
  display: inline-flex;
   justify-content: space-between;
   margin-right: 38%;
   font-family: 'Bitter', serif;
}
.more-works{
  background-color: skyblue;
  color: white;
  border: none;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
   font-family: 'Titillium Web', sans-serif;

} 
.our-portfolio li,.list-work,.our-portfolio ul{
  display: inline;

}

.camera1{
  width: 260px;
  height: 200px; 
  background-color: #b0b0b0; 
  border: 8px solid white; 
  display: inline-block;
  margin-top: 60px;  
  margin-left: 17%;
   
}
.camera2,.port-details{
  width: 260px;
  height: 200px; 
  background-color: #b0b0b0; 
  border: 8px solid white; 
  display: inline-block;
  margin-top: 60px;  
  margin-left: 45px;
}


.camera2 .i{
  text-align: center;
  
}
.camera-img{
   height: 200px;
   width: 260px;
}
.unorder-list h3{
margin-top: 20px;
color: #F0835D;
font-family: 'Bitter', serif;
}

.unorder-list p{
 
  font-family: 'Open Sans', sans-serif;
  color: #ccc;;
  font-size: small;
}

.offer{
   color: skyblue;
   text-align: center;
   margin-top: 40px;
   margin-bottom: 20px;
      font-family: 'Bebas Neue', sans-serif;
    font-weight: 700;
    font-size: xx-large;
    

}

.offer-detail{
  text-align: center;
  color: grey;
  margin-left: 250px;
  margin-right: 250px;
  font-family: 'Open Sans', sans-serif;
}

.what-we-off .serviceboxes p{
  font-size: x-small;
  color: grey;
  margin-top: 20px;
 text-align: justify;
 border-radius: 50px
 

}
.what-we-offer .serviceboxes .details{
  color:white;
  background-color: skyblue;
  border: none;
  margin-left: 130px;
  border-radius: 2px;

}
 .what-we-offer .div-section{
   margin-left: 10px;
   width: 170px;
   margin: 20px;
   margin-left: 10%;
    text-align: justify;

}

 .what-we-offer .serviceboxes{
   border-style:none;
    border-width: 2px;
    border-color: black;
    border: flex;
    display: flex;
     margin: 50px;
     text-align: center;}

.what-we-offer .space{

  color: skyblue;
  font-weight: 900;
}

.testimonials h2{
  text-align: center;
  color: skyblue;
  margin-top: 25px;
  font-size: xx-large;
   font-family: 'Bebas Neue', sans-serif;
   font-weight: 800;
}
.testimonials h3{
  color: grey;
  text-align: center;
  margin-right: 250px;
  margin-left: 250px;
  margin-top: 30px;
  font-family: 'Bree Serif', serif;
}
.testimonials h4{
  color: #F0835D;
  font-weight: bold;
  text-align: center;
 margin-top: 80px;
  font-family: 'Open Sans', sans-serif;
}

.img1{
    
    height: 100px;
    border-radius: 50%;
    display: inline-block;
   width: 100px;
   margin-right:40px;
   margin-left: 50px;
   text-align: center;
  color:grey;
      font-size: 2px;
     
}
/* .test-div1:hover,.test-div2:hover,.test-div3:hover{
  background-color: #F0835D;
} */

.test-div2{
   width: 170px;
   margin: 20px;
   margin-left: -2%;
   text-align: center;

}
.test-div3{
   /* width: 170px; */
   margin: 20px;
 margin-left: -3.5%;
   text-align: center;


}

.test-div1{
  margin-left: 35.5%;
  margin-top: 1.5%;
  text-align: center;
}

.test-icon{
   border-style:none;
    border-width: 2px;
    border-color: black;
    border: flex;
    display: flex;
     margin: 50px;
     text-align: center;
     margin-left: 150px;

}


.test-design{
  
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #1d8dc3, white);   
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
   
  
 
}
.test-design-div2{
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg,#F0835D , white);   
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
   
}
.word{
  font-weight: 200;
  font-size: 20px;
}
.word1{
  font-size: 10px;
}

/* footer section */

.footer,.foot-section,.foot-details{
  display: flex;
}

.footer{
  background-color:  #2c3e50;
  height: 400px;
  display: flex;
}


.foot-section{
  margin-left: 120px;
}
.foot-detail{
margin-left: 100px;
margin-top: 5%;
}
.foot-detail h2{
  text-align: justify;
  margin-bottom: 15px;
  color: #F0835D;
  font-family: 'Bebas Neue', sans-serif;


}
#https{
  color:rgb(9, 143, 187)
}

.foot-detail p{
  color: gray;
  text-align: justify;
  font-size: small;
  width: 180px;
  


}
.hr{
  margin-top: 12px;
  margin-bottom: 12px;
}
/* 
.foot-box{
  margin-top: 10px;

} */
.sign-up{
  margin-top: 20px;
  margin-left: 110px;
  color: white;
  background-color: skyblue;
  border: none;
  padding: 5px;
  border-radius: 3px;
  cursor: pointer;
}
.box{
  
  border-style: solid;
  /* border-width: px; */
  border-color: white;
  background-color: white;
  /* margin-right: 160px; */
  padding: 20px;
  display: inline-block;
}
#box-para{
  display: inline-block;
 position: relative;
  bottom: 5px;
  left: 5px;
}

.foot-icon{
  font-size: 35px;
  position: relative;
  right: 14%;
  display: inline-block;
  top: 2px;

}

#foot-icon-box{

  display: inline-block;
 position: relative;
  bottom: 5px;
  right: 70px;
  font-family: 'Open Sans', sans-serif;

}

.gap{
  margin-top: 12px;
  margin-bottom: 16px;
}