/* =========================
||| Mobile Menu |||||
=========================*/

.navbar-header{
    position: relative;
  }
      #mobile-nav-open-btn{
    font-size: 30px;
    color: #f4c613;
    cursor: pointer;
    z-index: 2;/* always stay on the top of elements */
    position: absolute;
    right: 0;
    top: 6px;
    /* hide mobile nav open btn */
    display: none;
  }
  
  #mobile-nav{
      /* by defult mobile menu will be hidden with 0% */
    height: 0%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;/* mobile menu always sets fixed while scrolling */
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
    overflow: hidden;
  
  }
  
  #mobile-nav-close-btn{
    font-size: 50px;
    color: #212226;
    font-weight: 500;
    cursor: pointer;
    position: absolute;
    top: -9px;
    right: 13px;
    -webkit-transition: .3s;
    transition: .3s;
  }
  
  #mobile-nav-content{
    text-align: center;
    width: 100%;
    margin-top: 30px;
    position: relative;
    top: 10%;
  }
  
  #mobile-nav ul li {
    margin-block-end: 20px;
  }
  #mobile-nav a {
    font-size: 18px;
    color: #212226;
    font-weight: 500;
    text-transform: uppercase;
    display: inline;
    -webkit-transition: .3s;
    transition: .3s;
  
  }
  
  #mobile-nav a:hover,
  #mobile-nav a:focus,
  #mobile-nav-close-btn:hover,
  #mobile-nav-close-btn:focus{
    color:#f4c613;
    background: none;  
  }
  
  /*  mobile nav scroll spy active state */
  .white-nav-top #mobile-nav  ul.nav > li.active > a{
    color: #f4c613;
    font-weight: 500;
  }




/* =========================+====
||| bootstrap grid system |||||
================================*/

/* Large Devices ( desktops & laptops)*/

@media( min-width:1200px) and (max-width:1299px){
    
    /* navigation */
    .site-nav-wrapper{
        padding: 0 20px;
    }  
}
/* Medium Devices ( landscape tablets & medium desktops)*/

@media (min-width:992px) and ( max-width:1199px ){
    
/* navigation */
.site-nav-wrapper {
        padding: 0 ;
    }
    
/* Generic */
.vertical-heading h2 {
          font-size: 29px;    
    }
    
/* services 02 */
    
#services-tabs .tab-bg{
        padding: 16px 30px;
        min-height: 300px
    }
    
.services-tab p{
        line-height: 20px
    }
    
}


/* Small Devices ( Portrial  tablets & small desktops)*/

@media (min-width:768px) and ( max-width:991px ){
/* navigation */
.site-nav-wrapper {
    padding: 0 ;
}

/* Home */
#home-heading h1{
    font-size: 41px;
}
#home-text p{
    font-size: 13px;
}
.btn-general{
    padding: 8px 35px 8px 35px;
    font-size: 10px;
}
    

/* Generic */
.vertical-heading h2 {
    font-size: 29px;    
}

/* statement */
#tech-statement h3{
    font-size: 20px;
    line-height: 30px;
}

/* services 02 */

.r-tabs-accordion-title {
    text-align: center;
    margin-bottom: 10px;
}

.r-tabs-accordion-title a{
    font-size: 13px;
    color: #212226;
    text-transform: uppercase;
    font-weight: 400;
    padding: 0;
    text-decoration: none;    
  
}

/* tab active state */
.r-tabs-accordion-title.r-tabs-state-active a{
    color: #f4c613;
    font-weight:700;
    border-bottom:  3px solid  #f4c613;
    padding-bottom: 5px;
    -webkit-transition: border-color 300ms linear;
    transition: border-color 300ms linear;   
}


/* pricing */

.pricing-table .price .col-sm-8 {
    padding: 0
  }

.pricing-table .price h2 {
    margin: 0 0 0 6px;
    font-size: 28px
  }

  /* blog */

  .blog-post .post-meta p {
    line-height: 14px;
    font-size: 10px
  
  }}

/* Extra Small Devices ( landscape phones &  Portrial  tablets)*/

@media ( max-width:767px ){

/* navigation */

.navbar{
    padding: 20px 0;
}
.site-nav-wrapper ,
.white-nav-top{
    padding: 0

}
    
/* show mobile menu open btn */
#mobile-nav-open-btn{

    display: block
  }

/* Home */
#home-heading h1{
    font-size: 22px;
}
#home-text p{
    font-size: 13px;
    line-height: 18px;
    margin:8px 2px 30px 2px
}
.btn-general{
    padding: 8px 25px 6px 25px;
    font-size: 10px;
}
   /* about */
   .content-box-lg{
       padding: 80px 0;
   }
   /* vertical heading */

   .vertical-heading, .horizontal-heading {
       text-align: center;
   }

   .vertical-heading h5{
       transform: rotate(0deg);
       -webkit-transform: rotate(0deg);
       display: block;
       position: static;
       margin-bottom: 15px;
   }
   .vertical-heading h2{
       font-size: 29px;
       line-height: normal;
       margin:0
   }

   #about-left {
       margin-bottom: 50px;
   }

   #about-right{
       text-align: center
   }
    
   /* about 02 */
 .content-box-md{
     padding: 80px 0;
 }

 .about-item{
     padding: 55px 30px;
     margin-bottom: 35px;
 }

 .about-item i{
     font-size: 30px;
 }
 .about-item h3{
     font-size: 18px;
 }
 /* team */
 #team-left .vertical-heading{
     min-height: 130px
 }

 .skill h4{
     font-size: 14px;
     line-height: 35px
 }
/* statement */
#tech-statement h3{
    font-size: 20px;
    line-height: 30px;
}
/* services */
.horizontal-heading {
    margin-bottom: 40px;
}
.horizontal-heading h2{
    font-size: 30px;
}

#services-01 img{
    margin: 35px 0;
}
.service , .service .icon {
    text-align: center;
}
.service h4{
    font-size: 18px;
    margin-bottom: 20px
}

/* services 02 */

.r-tabs-accordion-title {
    text-align: center;
    margin-bottom: 10px;
}

.r-tabs-accordion-title a{
    font-size: 13px;
    color: #212226;
    text-transform: uppercase;
    font-weight: 400;
    padding: 0;
    text-decoration: none;    
  
}

/* tab active state */
.r-tabs-accordion-title.r-tabs-state-active a{
    color: #f4c613;
    font-weight:700;
    border-bottom:  3px solid  #f4c613;
    padding-bottom: 5px;
    -webkit-transition: border-color 300ms linear;
    transition: border-color 300ms linear;   
}

#services-tabs .tab-bg{
    text-align: center;
    padding: 40px 30px;
}

#services-tabs h2{
    font-size: 40px;
}
#services-tabs h3{
    font-size: 28px
}

/* portfolio */
#portfolio {
    padding-bottom: 0;
}

#isotope-filters button {
    padding-right: 15px;
    font-size: 15px
}
/* testimonials */

#testimonials {
    padding-top: 45px;
}
#testimonial-slider{
    top:0;
}

#testimonials .vertical-heading{
    padding: 0
}

.testimonial .row{
    margin: 0;
}
.testimonial h3{
    font-size: 20px;
}
.testimonial .stars{
    font-size: 16px;
}

.author img{
    width: 80px !important;/* important key word override of css auther */ 
}

/* pricing */
.pricing-table{
    margin-bottom: 30px;
}
.pricing-table h4{
    text-align: center
}
.pricing-table .price h2{
    font-size: 28px;
    margin: 0 0 0 16px;
}
.pricing-table .package{
   
}

/* stats */
.stats-item {
    margin-bottom: 20px;
    padding: 25px 5px;
}
.stats-item i{
    font-size: 30px;
}
.stats-item h3{
    font-size: 24px; 
}
.stats-item p {
    font-size: 13px;
}
/*blog */
#blog-left{
    text-align: center;
    margin-bottom: 30px;
}
.blog-post{
    margin-bottom: 25px;
}
/* contact */
#contact-left{
    text-align: center;
}
.office{
    margin-bottom: 40px;
}
ul.office-details li {
    display: block;
    margin-top: 25px;
}

ul.office-details li i{
    width: auto;
    display: block;
    margin-bottom: 3px;
}
ul.social-list {
    margin-bottom: 40px;
}
}

/* extra small devices ( portrait phones  &  smaller  devices ) */
@media (max-width:480px) {

/* Home */
#home-heading h1{
    font-size: 18px;
}
#home-text p{
    font-size: 11px;
    line-height: 16px;
    margin: 8px 10px 25px 10px
}
/* general */
.vertical-heading h2{
    font-size: 22px;
}
/* portfolio */

#isotope-filters {
    text-align: center
}
#isotope-filters button {
    padding-right: 10px;
    padding-right: 14px;
    font-size: 12px
}

/* testimonial */
.testimonial h3{
    font-size: 14px;
    line-height: 18px;
}
.testimonial .stars{
    font-size: 13px;
}

#stats .stats-item {
    padding: 13px 42px;
}

}

@media (max-width:320px) {

    /* testimonial */
.testimonial h3{
    font-size: 12px;
    line-height: 16px;
}
.testimonial .stars{
    font-size: 10px;
}

.stats-item {
    padding: 14px 20px;
}

  
}