@charset "UTF-8";
/* CSS Document */

    :root {
      --accent-color: rgba(110,180,63,1);
      --accent-color-dark: rgba(86,145,45,1);
      --heading-color: rgba(0,0,0,0.75);
      --default-color: rgba(0,0,0,0.75);
      --surface-color: #ffffff;
      --contrast-color: #ffffff;
    }

    body {
      background: #ffffff;
      color: rgba(0,0,0,0.75);
	  font-family:'Inter', sans-serif;
    }

.hero-trivia h1{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:0.98;
  text-transform:none;
  text-shadow: 0 3px 18px rgba(0,0,0,0.35);
  opacity: 1.0;
}

H2 {
  text-transform: uppercase;
  font-family:'Montserrat',sans-serif;
  /* font-weight: 500; */
}

H6 {
	  text-transform: none;
	  color: rgba(0,0,0,0.75);
	  font-size: 20px;
}

    .header {
      background: rgba(255,255,255,0.94);
      backdrop-filter: blur(10px);
      box-shadow: 0 2px 18px rgba(0,0,0,0.06);
    }

    .header .logo i,
    .header .logo h1,
    .header .navmenu a,
    .header .mobile-nav-toggle {
      color: #1a1a1a;
    }

    .header .navmenu a.active,
    .header .navmenu a:hover {
      color: var(--accent-color);
    }

    .hero-trivia {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #111111;
    }

    .hero-video {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      z-index: 1 !important;
		/* Extra */
	  opacity: 0;
      transition: opacity 1s ease;
    }

	.hero-video.loaded {
  	  opacity: 1;
}

    .hero-overlay {
      position: absolute !important;
      inset: 0 !important;
      background: rgba(0,0,0,0.58) !important;
      z-index: 2 !important;
    }

    .hero-inner {
      position: relative !important;
      z-index: 5 !important;
      color: #ffffff;
      text-align: center;
    }

    .hero-inner * {
      position: relative;
      z-index: 5 !important;
    }

    .hero-kicker {
      display: inline-block;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(110,180,63,0.18);
      border: 1px solid rgba(110,180,63,0.42);
      color: #ffffff;
      font-size: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    .hero-trivia h1 {
	  font-size: 60px;
	  text-transform: uppercase;
      /* font-size: clamp(2.5rem, 5vw, 4.8rem); */
      line-height: 1.25;
      margin-bottom: 22px;
      color: #ffffff;
    }

    .hero-trivia p {
      font-size: 1.15rem;
      max-width: 760px;
      margin: 0 auto 28px;
      color: rgba(255,255,255,0.9);
    }

    .btn-cjm,
    .btn-cjm-outline:hover {
      background: var(--accent-color);
      color: #ffffff;
      border: 1px solid var(--accent-color);
      padding: 14px 28px;
      border-radius: 999px;
      font-weight: 600;
      transition: 0.3s;
      text-decoration: none;
      display: inline-block;
    }

    .btn-cjm:hover {
      background: var(--accent-color-dark);
      border-color: var(--accent-color-dark);
      color: #ffffff;
    }

    .btn-cjm-outline {
      background: transparent;
      color: #ffffff;
      border: 1px solid rgba(255,255,255,0.38);
      padding: 14px 28px;
      border-radius: 999px;
      font-weight: 600;
      transition: 0.3s;
      text-decoration: none;
      display: inline-block;
    }

    .sound-btn {
      margin-top: 20px;
      padding: 12px 22px;
      border: 2px solid rgba(110,180,63,1);
      border-radius: 5px;
      background: rgba(110,180,63,0.0);
      color: #ffffff;
      font-weight: 600;
      cursor: pointer;
      transition: 0.3s;
      box-shadow: 0 8px 24px rgba(0,0,0,0.18);
      z-index: 6 !important;
    }

    .sound-btn:hover {
      background: rgba(86,145,45,1);
    }

    .section-dark {
      padding: 90px 0;
      background: #ffffff;
    }

    .alt-bg {
      background: #f6f6f6;
    }

    .section-title-custom {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 50px;
    }

    .section-title-custom h2 {
      color: #1a1a1a;
      font-size: 2.2rem;
      margin-bottom: 16px;
    }

    .section-title-custom p {
      color: #666666;
      margin: 0;
    }

    .feature-card,
    .service-card,
    .stats-card,
    .contact-panel {
      height: 100%;
      background: #ffffff;
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 24px;
      padding: 30px;
      box-shadow: 0 12px 36px rgba(0,0,0,0.08);
    }

    .feature-card i,
    .service-card i,
    .stats-card i {
      font-size: 2rem;
      color: var(--accent-color);
      margin-bottom: 18px;
      display: inline-block;
    }

    .feature-card h3,
    .service-card h3,
    .stats-card h3,
    .contact-panel h3 {
      color: #1a1a1a;
      font-size: 1.3rem;
      margin-bottom: 12px;
    }

    .feature-card p,
    .service-card p,
    .stats-card p,
    .contact-panel p,
    .contact-list li {
      color: #555555;
      margin-bottom: 0;
    }

    .check-list {
      list-style: none;
      padding: 0;
      margin: 24px 0 0;
    }

    .check-list li {
      position: relative;
      padding-left: 34px;
      margin-bottom: 14px;
      color: #444444;
    }

    .check-list li:before {
      content: "\f26e";
      font-family: bootstrap-icons;
      position: absolute;
      left: 0;
      top: 1px;
      color: var(--accent-color);
    }

    .stats-number {
      font-size: 2.2rem;
      font-weight: 700;
      color: #1a1a1a;
      line-height: 1;
      margin-bottom: 10px;
    }

.icon-badge{
width:56px;
height:56px;
border-radius:50%;
background:rgba(110,180,63,1);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:24px;
}

    .contact-list {
      list-style: none;
      padding: 0;
      margin: 24px 0 0;
    }

    .contact-list li {
      display: flex;
      gap: 14px;
      margin-bottom: 18px;
      align-items: flex-start;
    }

    .contact-list i {
      color: var(--accent-color);
      font-size: 1.2rem;
      margin-top: 2px;
    }

.contact-list .contact-instagram {
  align-items: center;
}

.contact-list .contact-instagram i {
  margin-top: 0;
  line-height: 1;
}

/* Form Styling */

.form-label {
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.form-control,
.form-select {
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: none;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(110,180,63,1);
  box-shadow: 0 0 0 0.2rem rgba(110,180,63,0.15);
}

textarea.form-control {
  resize: vertical;
  min-height: 140px;
}

    .site-footer-custom {
      padding: 32px 0 46px;
      border-top: 1px solid rgba(0,0,0,0.08);
      text-align: center;
      color: rgba(255,255,255,0.72);
      font-size: 0.95rem;
      background: #111111;
    }

    .site-footer-custom a {
      color: #ffffff;
      text-decoration: none;
    }

/* Back To The Top */

.scroll-top{
  position:fixed;
  right:20px;
  bottom:20px;
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(110,180,63,1);
  color:#fff;
  font-size:30px;
  z-index:99999;
  opacity:0;
  visibility:hidden;
  transition:0.3s;
  text-decoration:none;
  box-shadow:0 10px 25px rgba(0,0,0,0.18);
}

.scroll-top.active{
  opacity:1;
  visibility:visible;
}

.scroll-top:hover{
  background:rgba(86,145,45,1);
  color:#fff;
}

    @media (max-width: 768px) {
      .hero-cta {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }

      .hero-cta a {
        width: 100%;
      }
    }

/* ===== THE TRIVIA MAN MOBILE FIX =====
   Keep this in thetriviaman.css so base.css can stay as the shared template file.
   It overrides the PhotoFolio mobile nav that uses body.mobile-nav-active.
============================================================ */

@media (max-width: 1199.98px) {

  .header {
    background: rgba(255,255,255,0.97) !important;
    min-height: 86px;
    padding: 10px 0 !important;
    z-index: 10000 !important;
  }

  .header .logo img {
    max-height: 58px;
    width: auto;
  }

  .mobile-nav-toggle {
    color: #111 !important;
    font-size: 32px !important;
    line-height: 1 !important;
    position: relative;
    z-index: 10002 !important;
  }

  /* Closed state: make absolutely sure the menu list is hidden. */
  body:not(.mobile-nav-active) #navmenu > ul {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Open state: full-screen clean white menu. */
  body.mobile-nav-active {
    overflow: hidden !important;
  }

  body.mobile-nav-active #navmenu {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10001 !important;
    background: rgba(255,255,255,0.98) !important;
    padding: 105px 28px 32px !important;
    overflow-y: auto !important;
  }

  body.mobile-nav-active #navmenu > ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    inset: auto !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.mobile-nav-active #navmenu li {
    display: block !important;
    margin-bottom: 14px !important;
  }

  body.mobile-nav-active #navmenu a {
    display: block !important;
    color: #111 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    padding: 10px 0 !important;
    text-transform: none !important;
  }

  body.mobile-nav-active #navmenu a:hover,
  body.mobile-nav-active #navmenu a.active {
    color: rgba(110,180,63,1) !important;
  }

  body.mobile-nav-active .mobile-nav-toggle {
    position: fixed !important;
    top: 25px !important;
    right: 25px !important;
    color: #111 !important;
    z-index: 10003 !important;
  }
}

/* Hero sizing: allow for the fixed navigation without double spacing. */
@media (min-width: 1200px) {
  .hero-trivia {
    margin-top: 106px;
    height: calc(100svh - 106px);
    min-height: 0;
    padding: 30px 0;
  }
}

@media (min-width: 769px) and (max-width: 1199.98px) {
  .hero-trivia {
    margin-top: 86px;
    min-height: calc(100svh - 86px);
    height: auto;
    padding: 60px 15px;
  }
}

@media (max-width: 768px) {
  .hero-trivia {
    margin-top: 86px;
    min-height: calc(100svh - 86px);
    height: auto;
    padding: 40px 15px 60px;
    align-items: flex-start;
  }

  .hero-inner {
    max-width: 100%;
  }

  .hero-kicker {
    font-size: 12px;
    padding: 7px 13px;
    margin-bottom: 16px;
  }

  .hero-trivia h1 {
    font-size: clamp(2.2rem, 10.5vw, 3.45rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.045em !important;
    margin-bottom: 20px !important;
  }

  .hero-trivia h3 {
    font-size: clamp(1.15rem, 5vw, 1.55rem) !important;
    line-height: 1.2 !important;
  }

  .hero-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .hero-cta a {
    width: 100%;
  }
}

/* ===== THE TRIVIA MAN BOOTSTRAP NAV OVERRIDE ===== */

.header {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 18px rgba(0,0,0,0.08);
  padding: 10px 0;
}

.navbar-brand img {
  max-height: 64px;
  width: auto;
}

.navbar-nav .nav-link {
  color: #111 !important;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 14px 12px !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: rgba(110,180,63,1) !important;
}

.navbar-nav .nav-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  height: 100%;
  padding: 14px 8px !important;
}

.navbar-toggler {
  border: 0;
  box-shadow: none !important;
}

@media (max-width: 1199.98px) {
  .navbar-collapse {
    margin-top: 14px;
    background: #fff;
    border-radius: 18px;
    padding: 18px 22px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.14);
  }

  .navbar-nav .nav-link {
    font-size: 17px;
    padding: 12px 0 !important;
  }

}

/* Late Tweaks */

.hero-trivia h1 {
  font-size: clamp(2.2rem, 8vw, 4.5rem);
}

section {
  scroll-margin-top: 100px;
}

.navbar-collapse {
  margin-top: 18px;
}

/* ===== HERO HEADLINE SWAP ===== */

.mobile-headline {
  display: none;
}

.desktop-headline {
  display: block;
}

@media (max-width: 768px) {

  .desktop-headline {
    display: none;
  }

  .mobile-headline {
    display: block;
  }

}

/* ===== FAQ PRICING LIST ===== */

.faq-pricing-list {
  margin: 18px 0;
  padding-left: 20px;
}

.faq-pricing-list li {
  margin-bottom: 10px;
  color: #444;
}