/* =============================
         Mobile Menu
   ============================= */
   .navbar-header{
    position: relative;
}

   #mobile-nav-open-btn {
    font-size: 30px;
    color:  #272B33;
    cursor: pointer;
    z-index: 2;
       position: absolute;
       right: 15px;
       top: 20px;
       /* hide mobile nav open btn */
       display: none;

   }
   #mobile-nav {
    /* by default mobile nav will be hidden with height 0% */
    height: 0%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
    overflow-y: hidden;

   }
  #mobile-nav-close-btn{
    font-family: "Gluten", sans-serif;
    font-size: 50px;
    color: #272B33 ;
    font-weight: 100;
    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-bottom: 20px;
  }
  #mobile-nav a {
    font-family: "Gluten", sans-serif;
    font-size: 20px;
    color: #000;
    font-weight: 200;
    text-transform: uppercase;
    display: inline;
     -webkit-transition: .3s;
    transition: .3s;
  }
  #mobile-nav a:hover,
  #mobile-nav a:focus{
    font-size: 30px;
    font-weight: 400;
    background: none;

  }
   #mobile-nav-close-btn:hover,
    #mobile-nav-close-btn:focus{
        font-weight: 400;
         background: none;
    }
    /* Mobile nav scroll spy active state*/
#mobile-nav ul.navbar-nav>li>a.active {
    font-size: 20px;

    font-weight: 400;
}


  





/* =============================
       Bootstrap 3 Media Queries
   ============================= */

/* Large Devices (Desktop & Laptops) */
@media (min-width: 1200px) {
     #about,
    #services,
    #portfolio {
        padding-bottom: 120px;
    }
    
}

/* Medium Devices (Landscape Tablets & Medium Desktops) */
@media (min-width: 992px) and (max-width: 1199px) {

.navbar-nav{
        margin-right: 10%;
    }
    .navbar hr {
        width: 580px;

        margin-left: 60px;
        margin-top: 20px;

    }
    .white-nav hr,
    .black-nav hr {
       width: 600px;

        margin-left: 15%;
        margin-top: 15px;
 
    }

    .navbar ul.navbar-nav>li>a {

        font-size: 17px;

        letter-spacing: 4px;
        right: 180px;


    }

    #home-heading h1 {

        font-size: 70px;


    }

    #home-heading h3 {

        font-size: 25px;


    }

    #about,
    #services,
    #portfolio {
        padding-bottom: 120px;
    }

#clients{
   padding: 20px 45px 20px 45px; 

 position: relative;
   
}

.amazing-works{
    max-width: 600px;
    align-content: center;

}
}

/* Small Devices (portrait Tablets & Small Desktops) */
@media (min-width: 768px) and (max-width: 991px) {

   
    .navbar{
        padding: 20px;
    }
    .white-nav, .black-nav{
        padding-left: 40px;
    }

    .navbar-brand img {
        width: 70%;
        height: auto;
       
    }
  /* show mobile navigation btn */
#mobile-nav-open-btn {
    display: block;
    }

    /* Home */
    #home-heading h1 {

        font-size: 60px;


    }

    #home-heading h3 {

        font-size: 23px;


    }

    #home-text p {
        font-size: 12px;
    }

    .btn-general {

        padding: 8px 36px 8px 36px;
        font-size: 10px;
    }

    #arrow-down {
        font-size: 28px;
        width: 28px;
        height: 28px;
    }

    /* About */
    #about-left {
        padding-bottom: 80px;
    }

    #about-left hr {

        width: 78px;


        top: 50px;
        left: -50px;
    }

    #about-left h1 {

        font-size: 40px;




    }

    #about-left h3 {

        font-size: 25px;


    }

    #about-left p {

        font-size: 15px;

    }

    /* Servises */
    .services-item {
        padding: 5px 5px;
    }

    .services-item img {

        width: 20px;
        height: 20px;


    }

    .services-item h3 {
        font-size: 18px;

    }

    .services-item hr {

        width: 40px;
    }

    /* hover state */


    .services-item:hover hr {

        width: 50px;
    }

    #services-right {
        padding-right: 10px;
    }

    #services-right hr {



        width: 78px;


        top: 40px;
        right: -30px;
    }



    #services-right h1 {

        font-size: 40px;

    }

    #services-right h3 {

        font-size: 25px;

    }

    #services-right p {

        font-size: 15px;

    }

    

    /* Protfolio */


    .portfolio-left hr {


        width: 78px;


        top: 50px;
        left: -50px;

    }

    .portfolio-left h1 {

        font-size: 40px;

    }

    .portfolio-left h3 {

        font-size: 25px;

    }

    .portfolio-left p {

        font-size: 15px;
    }


    .btn-portfolio {

        font-size: 13px;


    }

    .btn-portfolio:hover,
    .btn-portfolio:focus {

        font-size: 15px;

    }


   
/* clients */

  
    .client-text h3 {

        font-size: 25px;

    }
.client-text p {

        font-size: 15px;
    }




.amazing-works{
    max-width: 450px;
    align-content: center;
      padding-bottom: 40px;
    

}
.clients-details{
      padding-bottom: 40px;

}




    /* Contact */
   .contact-details {
    padding-left: 0;
    padding-top: 0;


}
     #contact-left p {
      font-size: 15px;
    }
    .email-details a{
   
    font-size: 15px;
    
}

    #contact-right hr {
        width: 78px;


        top: 52px;
        right: -30px;
    }

    #contact-right h1 {

        font-size: 40px;


    }

    #contact-right h3 {
        font-size: 25px;

    }

    #contact-right p {

        font-size: 15px;

    }

    .media-icons img {
        width: 30px;
        height: 30px;
        margin: 0 5px 0 5px;
        border: none;
        display: inline-block;
        transition: all .5s;
    }

    .media-icons img:hover,
    .media-icons img:focus {
        opacity: 0.15;


    }

    /*  Footer */


    footer p {


        font-size: 13px;


    }

    footer p span:hover,
    footer p span:focus {
        font-size: 15px;



    }
}

/* Extra Small Devices (portrait Tablets & Landscape Phones) */
@media (max-width: 768px) {




/* navigation */

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

    .navbar-brand img {
        width: 60%;
        height: auto;
       
    }
/* show mobile navigation btn */
#mobile-nav-open-btn {
    display: block;
    }



    #about,
    #services,
    #portfolio,
    #contact {
        padding-top: 10px;
    }

     /* Home */
    #home-heading h1 {

        font-size: 55px;


    }

    #home-heading h3 {

        font-size: 23px;


    }

    #home-text p {
        font-size: 12px;
    }

    .btn-general {

        padding: 8px 25px 6px 25px;
        font-size: 10px;
    }

    #arrow-down {
        font-size: 28px;
        width: 28px;
        height: 28px;
    }


    /* About */
    #about {
        padding-right: 20px;
        padding-left: 20px;
    }
    #about-left {
        padding-bottom: 80px;
    }

    #about-left hr {

        width: 64px;


        top: 40px;
        left: -40px;
    }

    #about-left h1 {

        font-size: 32px;




    }

    #about-left h3 {

        font-size: 20px;


    }

    #about-left p {

        font-size: 15px;

    }

    /* Servises */
    #services {
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 120px;
    }
    .services-item img {

        width: 25px;
        height: 25px;


    }

    .services-item h3 {
        font-size: 18px;

    }

    .services-item hr {

        width: 40px;
    }

    /* hover state */


    .services-item:hover hr {

        width: 50px;
    }


    #services-right hr {



        width: 64px;


        top: 30px;
        right: -22px;
    }




    #services-right h1 {

        font-size: 32px;

    }

    #services-right h3 {

        font-size: 20px;

    }

    #services-right p {

        font-size: 15px;

    }

   


    /* Protfolio */
    #portfolio {
        padding-right: 20px;
        padding-left: 20px;
    }


    .portfolio-left hr {


        width: 64px;


        top: 40px;
        left: -40px;

    }

    .portfolio-left h1 {

        font-size: 32px;

    }

    .portfolio-left h3 {

        font-size: 20px;

    }

    .portfolio-left p {

        font-size: 15px;
    }


    .btn-portfolio {

        font-size: 13px;


    }

    .btn-portfolio:hover,
    .btn-portfolio:focus {

        font-size: 15px;

    }

   
/* clients */

  
    .client-text h3 {

        font-size: 20px;

    }
.client-text p {

        font-size: 15px;
    }




.amazing-works{
    max-width: 450px;
    align-content: center;
      padding-bottom: 40px;
    

}
.clients-details{
      padding-bottom: 40px;

}


    
     /* Contact */
     #contact {
        padding-right: 20px;
        padding-left: 20px;
             }
    
.contact-details {
    margin:10px 40px;


}
.contact-details .icon{
    
    text-align:center !important;
}
.contact-details p {
      font-size: 15px;
      text-align: center;
      padding-top: 10px;
      margin-left: 10px;
    }
    .email-details a{
   
    font-size: 15px;
    text-align: center;
      padding-top: 10px;
      margin-left: 10px;
    }




    #contact-right hr {
        width: 64px;


        top: 50px;
        right: -30px;
    }

    #contact-right h1 {

        font-size: 32px;


    }

    #contact-right h3 {
        font-size: 20px;

    }

    #contact-right p {

        font-size: 15px;

    }

    .media-icons img {
        width: 30px;
        height: 30px;
        margin: 0 5px 10px 5px;
        border: none;
        display: inline-block;
        transition: all .5s;
    }

    .media-icons img:hover,
    .media-icons img:focus {
        opacity: 0.15;


    }

    /*  Footer */


    footer p {


        font-size: 13px;


    }

    footer p span:hover,
    footer p span:focus {
        font-size: 15px;



    }




}