/* =========================
   TABLET
========================= */
@media (max-width: 992px){

  .hero{
    text-align:center;
    padding-top:150px;
  }

  .hero h1{
    font-size:42px;
  }

  .hero-buttons{
    justify-content:center;
  }

  .navbar{
    padding:15px;
  }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px){

  html, body{
    overflow-x:hidden !important;
    width:100%;
  }

  /* Navbar */
  .navbar{
    padding:10px 0;
  }

  .navbar-brand{
    margin-right:auto;
}

  .site-logo{
    height:48px !important;
    width:auto !important;
}

  .navbar-toggler{
    margin-top:0;
  }

  /* Hero sections */
  .hero,
  .about-hero,
  .service-hero,
  .contact-hero{
    padding-left:16px;
    padding-right:16px;
  }

  .hero h1,
  .about-hero h1,
  .service-hero h1,
  .contact-hero h1{
    font-size:2rem !important;
    line-height:1.1 !important;
    word-break:break-word;
    overflow-wrap:break-word;
    margin-bottom:18px;
  }

  .hero p,
  .about-hero p,
  .service-hero p,
  .contact-hero p{
    font-size:1rem;
    line-height:1.7;
  }

  /* Section titles */
  .section-title h2,
  .section-heading{
    font-size:2rem;
  }

  /* Buttons */
  .hero .btn,
  .about-hero .btn{
    width:100%;
    max-width:260px;
    display:block;
    margin:10px auto;
  }
}
@media (max-width:768px){

  .hero .btn,
  .about-hero .btn{
    display:block;
    width:100%;
    max-width:260px;
    margin:10px auto !important;
  }
}