/*
 * Page titles moved from <h2> to <h1> (and the home slider titles from <h1> to <h2>)
 * so each page has a single H1. These rules mirror the original style.css /
 * responsive.css sizes so the visual design stays the same.
 */

.breadcrumb-title h1 {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 15px;
}

.section-title h1 {
  font-size: 38px;
  margin: 0;
}

.hero-wrap .hero-content h2.hero-title {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 15px;
}

.hero-slider-one.owl-carousel .owl-item.active .hero-slide-item .hero-content h2.hero-title {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-delay: .7s;
  animation-delay: .7s;
}

.areyouready h2 {
  font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
  .areyouready h2 {
    font-size: 2.5rem;
  }
}

@media screen and (min-device-width: 320px) and (max-device-width: 768px) {
  .areyouready h2 {
    text-align: center;
  }
}

@media only screen and (max-width: 767px) {
  .section-title h1 {
    font-size: 24px;
    line-height: 1.3;
  }
  .breadcrumb-title h1 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  .hero-wrap .hero-content h2.hero-title {
    margin-bottom: 15px;
    font-weight: 700;
  }
  .hero-wrap.style1 .hero-slide-item .hero-content h2.hero-title {
    font-size: 32px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-title h1,
  .section-title h1 {
    font-size: 35px;
  }
  .hero-wrap.style1 .hero-slide-item .hero-content h2.hero-title {
    font-size: 44px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb-title h1,
  .section-title h1 {
    font-size: 35px;
  }
  .hero-wrap.style1 .hero-slide-item .hero-content h2.hero-title {
    font-size: 44px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .breadcrumb-title h1,
  .section-title h1 {
    font-size: 33px;
  }
  .hero-wrap.style1 .hero-slide-item .hero-content h2.hero-title {
    font-size: 35px;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .hero-wrap.style1 .hero-slide-item .hero-content h2.hero-title {
    font-size: 37px;
  }
}

@media only screen and (min-width: 1600px) {
  .breadcrumb-title h1,
  .section-title h1 {
    font-size: 42px;
  }
  .hero-wrap.style1 .hero-content h2.hero-title {
    font-size: 68px;
    line-height: 1.2;
  }
}

/*
 * Headings moved to a higher level so none skips a level (in templates, or by
 * normalizeHeadings() for admin content) carry "seo-h" plus an "hN" class with
 * the level they used to have; these rules make them look exactly as before.
 */
.seo-h { font-weight: 700; }
:is(article, .service-desc, .terms-wrap) .seo-h.h3 { font-size: 28px; margin-bottom: 15px; }
:is(article, .service-desc, .terms-wrap) .seo-h.h4 { font-size: 26px; margin-bottom: 15px; }
:is(article, .service-desc, .terms-wrap) .seo-h.h5 { font-size: 24px; margin-bottom: 15px; }
:is(article, .service-desc, .terms-wrap) .seo-h.h6 { font-size: 22px; margin-bottom: 15px; }

@media only screen and (max-width: 767px) {
  :is(article, .service-desc, .terms-wrap) .seo-h.h3 { font-size: 20px; }
  :is(article, .service-desc, .terms-wrap) .seo-h.h4 { font-size: 18px; }
  :is(article, .service-desc, .terms-wrap) .seo-h.h5 { font-size: 17px; }
  :is(article, .service-desc, .terms-wrap) .seo-h.h6 { font-size: 16px; }
}

.content-title .seo-h.h3, .content-title .seo-h.h4 { line-height: 1.2; margin: 0 0 .5rem; }
.content-title .seo-h.h3 { font-size: calc(1.3rem + .6vw); }
.content-title .seo-h.h4 { font-size: calc(1.275rem + .3vw); }

@media (min-width: 1200px) {
  .content-title .seo-h.h3 { font-size: 1.75rem; }
  .content-title .seo-h.h4 { font-size: 1.5rem; }
}