/*
* ----------------------------------------------------------------------------------------
Author       : msjalal_themes
Template Name: Banjo - Personal Portfolio HTML Template
Version      : 1.0                                          
* ----------------------------------------------------------------------------------------
*/

/*==============Responsive Media Query================*/
/*--------Medium Layout Entry Level=1000px------*/
@media only screen and (min-width:992px) and (max-width:1200px){
	.hero-content h2 {
		font-size: 110px;
   
	}
  
  .about-quota-left,.about-quota-right {
      width: 300px;
    }
    .section-title h2 {
      font-size: 80px;
    }
    .section-title-white h2{
      font-size: 80px;
    }
    .section-title-black h2{
      font-size: 80px;
    }
    .about-back-area {
      height: 350px;
  
    }
    .single-counter i {
      font-size: 40px;
    }
    .single-counter h4 {
      font-size: 50px;

    }
} 

/*-----Tablet Layout Entry Level=800px -------------*/
@media only screen and (min-width:768px) and (max-width:991px){
  

  .main-hero-area {
      padding-top: 130px;
  }
  .hero-content {
      padding: 0;
  }

  .hero-content h2 {
      font-size: 120px;

  }
  .dev-icon {
    margin-top: 0;
  }
  .about-quota-left,.about-quota-right {
   display: none;
  }
  .skill-item h5 {
    color: var(--main-color);
    font-size: 14px;
    text-transform: uppercase;
    margin-top: 14px;
    margin-bottom: 20px;
    background: var(--body-background);
    border-radius: 50px;
    display: inline-block;
    padding: 10px;
    text-align: center;
  }
  .project-content i {
    font-size: 25px;
    width: 65px;
    height: 65px;
    line-height: 65px;

  }
  .section-title h2 {
    font-size: 60px;
  }
  .section-title-white h2{
    font-size: 60px;
  }
  .section-title-black h2{
    font-size: 60px;
  }
  .section-title-black h4{
    font-size: 60px;
  }
  .about-back-area {
    padding: 300px 0;

  }
  .clienti-reviews{
    text-align: center;
  }
  .clienti-reviews .clienti-profile{
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

}

/*-------Mobile Layout Entry Level=400px----------*/
@media only screen and (max-width:767px){

  .main-hero-area {
      padding-top: 110px;
  }
  .hero-content {
      padding: 0px 10px;
      text-align: center;
  }

  .clienti-reviews {
      text-align: center;
      margin-bottom: 40px;
  }

  .clienti-reviews .clienti-profile {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
  }

  .clienti-reviews .reviews p {
      margin-top: 0px;

  }

  .hero-content h2 {

      font-size: 60px;
      line-height: 50px;
      margin: 20px 0;
  }

  .hero-image img {
      margin-top: 0;
  }

  .hero-content .dot-shape {
      left: 3%;
      top: 15%;
  }

  .hero-content .dot-shape2 {
      right: 6%;
      top: 58%;
  }
  .hero-content h5 {
    margin-top: 20px;
  }
  .dev-icon {
    margin-top: 0;
  
  }
  .about-quota-left,.about-quota-right {
    display: none;
   }
   .skill-item h5 {
    color: var(--main-color);
    font-size: 14px;
    text-transform: uppercase;
    margin-top: 14px;
    margin-bottom: 20px;
    background: var(--body-background);
    /* padding: 15px 20px; */
    /* width: 115%; */
    border-radius: 50px;
    display: inline-block;
    padding: 20px;
    text-align: center;
  }

  .project-content i {
    font-size: 25px;
    width: 65px;
    height: 65px;
    line-height: 65px;

  }

  h2.about-pre-title {
    margin-bottom: 20px;
    text-align: center;
  }
  .about-content-part p{
    font-size: 24px;
  }
  .section-title h2 {
   
    font-size: 45px;
  }
  .section-title-white h2{
    font-size: 45px;
  }
  .section-title-black h2{
    font-size: 45px;
  }
  .section-title-black h4{
    font-size: 45px;
  }
  .about-back-area {
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 200px 0;
    z-index: 2;
  }

}
/*-------Wide Mobile Layout Entry Level=600px----------*/
@media only screen and (min-width:480px) and (max-width:767px){

  .hero-content h5 {
    margin-top: 20px;
  }
  .dev-icon {
    margin-top: 0;
  
  }
  .about-quota-left,.about-quota-right {
    display: none;
  }
  .skill-item h5 {
    color: var(--main-color);
    font-size: 14px;
    text-transform: uppercase;
    margin-top: 14px;
    margin-bottom: 20px;
    background: var(--body-background);
    border-radius: 50px;
    display: inline-block;
    padding: 10px;
    text-align: center;
  }
  .single-price{
    margin-bottom: 20px;
  }
  h2.about-pre-title {
    margin-bottom: 20px;
  }
  .section-title h2 {
    font-size: 45px;
  }

  .about-back-area {
    padding: 200px 0;
  }

  .about-back-area {
    padding: 250px 0;

  }

}
 /*=========Navigation Menu========*/
@media only screen and (max-width:991px){
  .main-menu .navbar-collapse > ul {
    display: block;
    padding: 20px 0;
    background-color: #333;
    overflow-x: hidden;
    max-height: calc(100vh - 100px);
    margin-top: 15px;
  }
	.main-menu .navbar-collapse li {
		display: block;
		border-bottom: 1px solid #626262;
	}
	
	.main-menu .navbar-collapse li:first-child{
		border-top: 0;
	}
  .main-menu .navbar-collapse li a {
    /* padding: 10px 10px; */
    line-height: 24px;
    color: #fff !important;
    opacity: .7;
    padding: 10px 0 10px 40px;
}
	.navbar-toggler {
	  border: none;
	  outline: none;
	}
	.navbar-toggler:focus{
		 outline: none;
		 -webkit-box-shadow: none;
		         box-shadow: none;
	}
	.navbar-toggler:active{
		 outline: none;
		 -webkit-box-shadow: none;
		         box-shadow: none;
	}
  .navbar{
    padding-bottom: 0;
  }
}


/*========Special Break Point Mobile Menu=============*/
@media only screen and (max-width: 576px) {
  .banner-area {
    height: 100vh;
  }
  .banner-content h1 {
    font-size: 40px;
  }
  .timeline-box h4 {
    font-size: 20px;
  }
  .single-price {
    margin-bottom: 20px;
  }
  .single-team{
    margin-bottom: 20px;
  }
  .single-blog{
    margin-bottom: 20px;
  }
  .about-content h2{
    margin-top: 40px;
  }

  .projects-menu li {
    margin: 0 3px;
    font-size: 12px;
    line-height: 20px;
  }
  .projects-menu li.active {
    padding: 5px 10px;
  }
  
}