*{
    margin: 0px;
    padding: 0px;
    
}
body{
    box-sizing: content-box;
    overflow-x: hidden;
    overflow-y: hidden;
  
   
}

/*nav Bar Start*/

.navbar-inverse{
    background-color: white;
    border-color:white
}
 .navbar-inverse .navbar-toggle{
        background-color: black;
    }
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{
    border-color: #908b8b;
}
.navbar-inverse .navbar-nav>li>a{
    color:black;
    font-size:15px;
}
.navbar-inverse .navbar-nav>li>a:hover{
    
    background-color: white
}
.navbar-toggle{
    background-color: white
}
.navbar-inverse .navbar-brand{
    color:black;
    border:2px solid #e8e3e3 ;
    border-radius: 10px;
    margin-top: 4px;
    margin-left: 2px;
    font-size: 25px;
    letter-spacing: 3px;
    font-weight: bold;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
  
    background-color: white;
    
    
}
.navbar-inverse .navbar-nav> a :hover{
    
    background-color: white
}
.navbar-inverse .navbar-nav li> a{
    font-size: 30x;
}
.navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand:hover{
   
    background-color: white;
    
}
/*end navbar*/
/*start curousel */
.container-fluid{
    padding-right: 0;
    padding-left: 0;
    
   
}

.h3, h3{
    text-transform: uppercase;
}
@media (max-width : 768px  ){
    .carousel-caption{
        display: none;
    }
    
}
.carousel-caption{
    bottom:60px;
}
.carousel-caption h3 {
   font-size:30px;
    font-family: cursive;
}
.carousel-caption p{
    font-size: 15px;
    
}
.carousel-caption .btn-success,
.carousel-caption .btn-success{
    background-color: black;
    border-color: black
    
}





/*end curousel */
/*Start new Concept*/
.First-concept{
    padding-top: 40px;
    padding-bottom: 80px;
    
    
    
}
.First-concept h2 ,.new-section .container h2 ,.blogs-mod h2{
    font-size: 35px;
    font-family: cursive;
    font-weight: 300;
    
    
}
.First-concept p ,.new-section .container  p ,.blogs-mod p {
    font-size: 15px;
    color:gray;
}
.image-section{
    padding-bottom: 120px;
    
}
/*start image section */
.image-section .img-concept img{
    border-radius: 10px;
    opacity: 0.6;
   
    transition: all .5s ease
   
}
.image-section .img-concept img:hover{
    opacity: 1;
    transform:translate3d(5px ,5px ,5px);
}
.new-section{
    padding-bottom: 100px;
}
/*start new section */
.new-section .container  img{
    border-radius: 6px;
   
}
.wow{
    visibility: hidden;
}

.concept-mod{
    left:-30px;
}
/*end new section */
/*start portfolio section*/
.portfolio h2, .our-client h2 {
    font-size: 35px;
    font-family: cursive;
    font-weight: 300;
   
    margin-bottom: 25px;
}
.portfolio {
    width:100%;
}
.portfolio .container-fluid{
    background-color: rgba(28, 26, 26,.1);
    padding-bottom: 100px;
    padding-right: 0;
    padding-left: 0;
}
.portfolio img{
    border-radius: 20%;
    opacity: .8;
    transition: all 1s ease
}
.portfolio img:hover{
    transform: rotate3d(10,20,30,360deg);
    opacity: 1 
}
.portfolio .portfolio-mod{
    margin-left: 10px;
}
.portfolio h4 ,.about-mod h4{
    
    font-family: monospace;
}
.portfolio p{
    color:gray
}
/* end portfolio section */
/*start blogs Section*/
.blogs{
    margin-top: 60px;
    padding-bottom: 80px;
}
.blogs .blogs-mod{
    margin-left: 20px;
    margin-bottom: 10px;
}
.blogs .blogs-mod .btn-primary{
    margin-top: 10px;
    
}
.blogs .blogs-mod img{
    border-radius: 10px;
}
/*end Blogs section */
/*start About me Section*/
.About-me {
        background-color: rgba(28, 26, 26,.1);
    padding-bottom: 80px;
    

}
.About-me .about-mod{
    margin-top: 20px;
    padding-bottom: 20px;
    margin-left: 8px;
}
.About-me .glyphicon {
    font-size:30px;
    color:#afa7a7
    
}

.About-me .about-mod p{
    color:gray;
    font-size:12px;
}
/*start DropDown*/

.dropdown  {
    
     
    background-image: url(background.jpg);
    background-size: cover;
   
  
}

.dropdown  .container-fluid{
     background-color: rgba(28, 26, 26,.5);
}
.dropdown h3 {
    margin-top: 30px;
    
    font-size: 35px;
    font-family: cursive;
}
.dropdown p {
    color:lightgray;
    font-size: 15px;
}
.dropdown .dropdown-mod {
    padding-bottom: 80px;
}

/*end Drop Down*/

/*end  About me Section*/
/*start contact us*/
.contact-us {
    padding-top: 40px;
    padding-bottom: 40px;
   background-color: rgba(28, 26, 26,.1);
    
}
.contact-us .container-fluid .form-control{
    
}
.contact-us h2{
    font-family: cursive;
}
.form-mod .form-control , .text-area-mod textarea{
    
   
}
.form-mod .form-control:focus , .text-area-mod textarea:focus{
    background-color: white
}

.text-area-mod{
    margin-top: 20px;
    max-width: 600px;
    
    
}
.text-area-mod textarea{
     resize: none;
    
}
/*end contact us*/

/*start our client*/
.our-client .container-fluid{
   
}
.our-client .container-fluid{
    padding-top: 40px;
    padding-bottom: 60px;
    
}
.our-client .our-client-mod{
    margin-left: 10px;
    margin-bottom: 5px;
    
}
.our-client .our-client-mod img{
    opacity: .8;
    transition: all .5s ease-out
}
.our-client .our-client-mod img:hover{
    opacity: 1;
    transform: translate(3px ,4px)
}
/*end our client*/
/*start footer*/
.footer{
    background-color: #282727;
    
    
}
.footer .container-fluid{
    padding-top:30px;
}
.footer-mod h1{
   
    font-weight: bold;
   
  
}
.footer-mod ul >li{
    color:dimgray;
    line-height: 45px;;
    
}
.footer .social-media >li {
    margin-left: 10px;
}


.footer-mod  ul >p{
    color:gray;
    font-size: 10px;
    
}
.footer-mod .footer-img{
    margin-left: 0;
    margin-bottom: 10px;
    margin-top: 20px;
    
}
    
/*end footer*/
/*start  Scroll-up*/
.scroll-top {
    width:25px;
    height: 30px;
  
    right: 20px;
    bottom: 10px;
    position: fixed;
    z-index: 99999;
    border-radius: 30%;
    cursor: pointer;
   
    
      
}
.scroll-top i{
    
    text-align: center;
    
    
}
/*start option color*/
.option-box{
    display: flex;
    flex-direction: row;
  bottom:1px;
    position: fixed;
    z-index: 99999;
}
.option-box .color-option{
    
    width:110px;
    height:60px;
    background-color:black;
    color:white;
    display: none;
    
    
}
.option-box .color-option ul >li{
    background-color:#0e8e7d;
    width:20px;
    height:15px;
}
.option-box  .gear{
    
    padding-top: 5px;
    cursor: pointer;
}

/*end option color*/
/*start Spinner */
.loader,
.loader:before,
.loader:after {
  background: #0e8e7d;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
  color: #0e8e7d;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.load-bac{
    background-color: white;
   
    width:100%;
    height: 100%;
  position: fixed;
    z-index: 999999;
  
    
  
   
    
}
.loader{
    top:30%;
}

.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
    
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

/*end spinner*/