/**
 * @file pages.css
 * @description Page-specific styles for Forefront Vision Consulting website.
 *              Contains hero background images for each page section (About, Team, Story,
 *              Services, News, Contact, Join), service image overlays, and content locking
 *              when the mobile menu is active.
 * @project Forefront Vision Consulting
 * @version 2.0
 */

/* ---- Content Lock When Menu Active ---- */

.main-content.active {
  height: 100vh;
}

.main-content.active .main-content-box {
  height: 100vh;
  overflow: hidden;
}

/* ---- Page Hero Backgrounds ---- */

.about-bg .row-bg {
  background-image: url(../images/about.jpg);
}

.team-bg-area {
  background-image: url(../images/our-team.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.team-bg-area::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

.story-bg .row-bg {
  background-image: url(../images/story.jpg);
  background-position: center center;
}

.team-bg .row-bg {
  background-image: url(../images/our-team.jpg);
  background-position: center center;
}

.services-bg .row-bg {
  background-image: url(../images/services.jpg);
  background-position: center center;
}

.news-bg .row-bg {
  background-image: url(../images/news.jpg);
  background-position: center bottom;
  min-height: 400px;
}

.contact-bg .row-bg {
  background-image: url(../images/contact.jpg);
  background-position: center bottom;
  min-height: 400px;
}

.join-bg .row-bg {
  background-image: url(../images/join.jpg);
  background-position: center center;
  min-height: 400px;
}

/* ---- Service Image Overlays ---- */

.service-img img {
  max-width: 600px;
}

.service-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/service-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 2;
}

.service-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/service-bg2.png);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.5;
  z-index: 1;
}