/*
Theme Name: Astra Child
Template: astra
*/

/* Base font setup */
body, html {
  font-family: 'Montserrat', sans-serif !important;
}

/* Adjust for WP admin bar */
.admin-bar header.sticky {
  top: 32px;  
}

/* Logo sizing */
header img.custom-logo,
header .site-logo-img img {
  height: 40px !important;
  width: auto !important;
}


/* --- Navigation Dropdown --- */

/* Chevron rotation */
.menu-item-has-children:hover > a > svg {
  transform: rotate(180deg);
  transition: transform 0.2s ease-in-out;
}

/* Hide dropdowns by default */
.dropdown {
  display: grid; /* keep grid context so transitions work */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  max-height: 0;
  transition: 
    opacity 0.3s ease,
    transform 0.5s ease,
    visibility 0.3s ease,
    max-height 0.5s ease;
  overflow: hidden;
}

/* When hovered, fade + slide down */
.menu-item-has-children:hover > .dropdown,
.menu-item-has-children > .dropdown:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  max-height: 600px; /* just high enough for your dropdown content */
}

/* Fix flicker: close hover gap */
.menu-item-has-children > .dropdown {
  margin-top: -2px;
}

/* Smooth fade-in */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
  animation: fadeIn 0.7s ease-out forwards;
}

/* --- Camps and Educator Programs --- */

/* Shared dropdown styles */
.menu-item-has-children:nth-child(2) > .dropdown,
.menu-item-has-children:nth-child(5) > .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Camps: two-column layout */
.menu-item-has-children:nth-child(2) > .dropdown {
  width: 500px;
  grid-template-columns: 1fr 1fr;
}

/* Educator Programs: single-column layout */
.menu-item-has-children:nth-child(5) > .dropdown {
  width: 360px;
  display: grid;
  grid-template-columns: 1fr;
}

/* Shared list reset */
.menu-item-has-children:nth-child(2) > .dropdown ul,
.menu-item-has-children:nth-child(5) > .dropdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Link spacing */
.menu-item-has-children:nth-child(2) > .dropdown ul li a,
.menu-item-has-children:nth-child(5) > .dropdown ul li a {
  padding: 0.4rem 0.5rem;
  line-height: 1.5;
}

.menu-item-has-children p {
    margin-bottom: 0!important;
}

/* =========================================
   GLOBAL BRAND STYLES (BitSpace)
   ========================================= */

/* --- Base Colors --- */
:root {
  --bs-green: #008F32;
  --bs-green-dark: #006E27;
  --bs-gray-dark: #1B1B1B;
  --bs-gray: #333333;
  --bs-gray-light: #F8F8F8;
  --bs-yellow: #FFC900;
  --bs-orange: #FF8800;
}

/* --- Typography --- */
body {
  color: var(--bs-gray);
  line-height: 1.75;
  background: linear-gradient(to bottom, #ffffff 9%, #f8f8f8 100%);
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* --- Refined Typography Scale --- */
body {
  font-size: 15px;
  line-height: 1.8;
  color: #333333; /* softer than pure black */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #1B1B1B; /* slightly darker than body text for emphasis */
  line-height: 1.4;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 2rem; /* 32px */
  font-weight: 700;
}

h2 {
  font-size: 1.625rem; /* 26px */
}

h3 {
  font-size: 1.25rem; /* 20px */
}

h4 {
  font-size: 1.125rem; /* 18px */
}

p {
  font-size: 15px;
  line-height: 1.8;
  color: #333333;
  margin-bottom: 1.5em;
}

body {
  line-height: 1.8; /* previously 1.8 */
}

p {
  line-height: 1.8;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3; /* tighter but still clean */
}


/* --- Links --- */
a {
  color: var(--bs-green);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--bs-green-dark);
}

/* Footer link color exceptions */

.text-xs {
    color: #99a1af;
}

footer a,
.site-footer a {
  color: #99a1af !important;
  transition: color 0.2s ease;
}

footer a:hover,
.site-footer a:hover {
  color: #cccccc !important; /* subtle white on hover */
}

/* --- Buttons --- */
button,
input[type="submit"],
.wp-block-button__link,
.wp-element-button,  {
  background-color: var(--bs-green);
  color: #fff;
  border: none;
  border-radius: 5px!important;
  padding: 0 25px;
  font-weight: 700!important;
  transition: background-color 0.25s ease, transform 0.1s ease;
  cursor: pointer;
  text-transform: uppercase;
  min-height: 50px;
  font-size: 17px;
}

li.mobile-parent button {
text-transform: none!important;
}

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
  background-color: var(--bs-green-dark);
  transform: translateY(-1px);
}

/* --- Container Width Alignment --- */
.site-content,
.ast-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- Footer Stickiness (no floating footer) --- */
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-content {
  flex: 1;
  min-height: calc(100vh - 350px)!important;
}

/* --- Optional: Light gray section background (if desired) --- */

body {
  background-color: #f8f8f8;
  padding-top: 64px; /* same height as header (h-16 = 64px) */
}


/* --- Gutenberg Block Adjustments --- */
.wp-block-heading h2,
.entry-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.wp-block-button__link {
  text-transform: uppercase;
  font-weight: bold!important;
  border-radius: 5px!important;
}

/* --- Responsive Typography (optional) --- */
@media (max-width: 768px) {
  h1 {
    font-size: 1.875rem; /* 30px */
  }
  h2 {
    font-size: 1.5rem; /* 24px */
  }
  h3 {
    font-size: 1.25rem; /* 20px */
  }
}


/* Page title styling */
.entry-title {
  font-size: 1.625rem;
  font-weight: 600;
  text-align: center; /* keeps it balanced on narrow pages */
  margin: 60px auto 40px auto;
  max-width: 1200px;
  color: #1b1b1b;
}

/* If you prefer left-aligned but contained */
.page .entry-header {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* --- Final Fix: Prevent footer floating on short pages --- */
html, body {
  height: 100%;
}

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Targeting the actual responsive container */
main#main,
#primary,
.site-content {
  flex: 1 0 auto !important;
  min-height: calc(100vh - 350px);
}

.site-footer {
  margin-top: auto;
}

/* --- Page Content Width Control --- */
.entry-content,
.ast-plain-container .entry-content,
.page .entry-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

/* Allow full-width Gutenberg blocks to break out of the container */
.entry-content .alignfull {
  max-width: none !important;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}

/* --- HEADER: Mobile Menu Overrides --- */

/* Prevent global button styles on header icons */
.js-mobile-toggle,
.js-mobile-close {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: #1b1b1b;
  border-radius: 0;
  box-shadow: none;
}

.js-mobile-toggle:hover,
.js-mobile-close:hover {
  color: var(--bs-green);
  background: none !important;
}

/* --- MOBILE MENU Z-LAYER FIX --- */

/* Overlay (dimmer background) */
#bitspace-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 60 !important;
}

/* Drawer (actual sidebar menu) */
.js-mobile-drawer {
  position: fixed !important;
  z-index: 70 !important; /* Always above overlay */
  top: 0;
  left: 0;
  height: 100%;
  overflow-y: auto;
-webkit-overflow-scrolling: touch;

}

/* --- MOBILE NAV DROPDOWN TOGGLES --- */
.js-dropdown-toggle {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: #333 !important;
  text-align: left;
  font-weight: 500;
  cursor: pointer;
  border-radius: 0 !important;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.js-dropdown-toggle:hover {
  color: var(--bs-green) !important;
  background: none !important;
}

/* Submenu indentation + spacing */
.js-submenu a {
  display: block;
  padding: 0.5rem 0;
  color: #444;
}

.js-submenu a:hover {
  color: var(--bs-green);
}

/* Caret rotation animation */
.js-dropdown-toggle svg {
  transition: transform 0.25s ease;
}

.js-dropdown-toggle svg.rotate-180 {
  transform: rotate(180deg);
}

/* Smooth dropdown animation */
.js-submenu {
  transition: all 0.25s ease;
  overflow: hidden;
}

.js-submenu.hidden {
  max-height: 0;
  opacity: 0;
}

.js-submenu.block {
  max-height: 600px;
  opacity: 1;
}

.mobile-parent.open .js-dropdown-toggle svg {
  stroke: var(--bs-green);
}

/* --- MOBILE MENU SUBMENU STYLING (Final Vercel-style) --- */

/* Submenu indentation */
.js-submenu {
  padding-left: 1rem; /* slight horizontal offset */
}

/* Submenu links */
.js-submenu a {
  display: block;
  padding: 0.25rem 0; /* comfortable vertical space */
  color: #444;
  border-bottom: 1px solid #f6f3f4!important; /* faint divider (gray-200 tone) */
  font-size: 0.95rem;
  line-height: 1.3;
}

.js-submenu a:last-child {
  border-bottom: none; /* remove divider on last item */
}

/* Hover effect */
.js-submenu a:hover {
  color: var(--bs-green);
  background-color: rgba(0, 143, 50, 0.03); /* subtle green tint on hover */
}

/* Caret animation + open color */
.js-dropdown-toggle svg {
  transition: transform 0.25s ease;
}

.mobile-parent.open .js-dropdown-toggle svg {
  transform: rotate(180deg);
  stroke: var(--bs-green);
}

/* --- Mobile Content Padding Fix --- */
@media (max-width: 768px) {
  .entry-content > * {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Make sure full-width backgrounds keep inner breathing room */
  .entry-content .alignfull > * {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  body {
    font-size: 16px;
  }

  p {
      font-size: 16px;
  }
}

/* === Fade-up Animation === */
/* === Fade-up Animation === */
.fade-up,
.is-style-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* When element becomes visible on scroll */
.fade-up.show,
.is-style-fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* === Keep visible inside Gutenberg editor === */
.editor-styles-wrapper .fade-up,
.editor-styles-wrapper .is-style-fade-up {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}


/* === Scroll Progress Bar === */
#scroll-progress {
  position: fixed;
  left: 0;
  width: 0%;
  height: 3px;
  background-color: #008F32;
  z-index: 40!important;
  transition: width 0.1s ease-out;
}

.hero-overlay {
  position: relative;
  overflow: hidden;
  z-index: 0; /* make sure base container sits below text */
}

.hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #008f32;
  mix-blend-mode: multiply;
  opacity: 0.65;
  z-index: 16;
  pointer-events: none;
}

.hero-overlay > * {
  position: relative;
  z-index: 19;
}

/* ===== BitSpace Modal Styles ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 1rem;
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  background: #fff;
  border-radius: 8px;
  max-width: 400px;
  width: 100%;
  padding: 2rem;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  animation: fadeUp 0.25s ease;
  padding-bottom: 0!important;
}

@keyframes fadeUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  color: #666;
  cursor: pointer;
}

.modal-close:hover {
  color: #000;
}

/* ===== Modal Close Button (Override any theme styles) ===== */
.modal-close {
  background: none !important;
  border: none !important;
  color: #333 !important;
  font-size: 26px !important;
  cursor: pointer !important;
  line-height: 1;
  padding: 6px 10px !important;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
  box-shadow: none !important;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #000 !important;
  transform: scale(1.05);
}

/* ===== Ensure Contact buttons show pointer cursor ===== */
.open-parent-modal,
.open-educator-modal,
.open-general-modal {
  cursor: pointer !important;
}

.open-parent-modal,
.open-educator-modal,
.open-general-modal {
  cursor: pointer !important;
  transition: transform 0.25s ease, box-shadow 0.15s ease;
}

.open-parent-modal:hover,
.open-educator-modal:hover,
.open-general-modal:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .wp-block-cover__inner-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* defaults (mobile) */
:root { --header-h: 64px; }   /* 64px ≈ Tailwind h-16 */

/* desktop */
@media (min-width: 768px) {
  :root { --header-h: 80px!important; } /* 80px ≈ Tailwind h-20 (adjust as you like) */
}

/* apply the height to your new header container */
header .bs-header {
  height: var(--header-h)!important;
  /* you already have flex + items-center in HTML so content stays centered */
}

/* keep things aligned that depended on the old fixed height */
body { padding-top: var(--header-h); } /* if you’re using a sticky header offset */

/* Top Bar adjustments */
/* --- Top Bar styling and behavior --- */
#tpbr_topbar {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

/* Slide up when scrolled */
#tpbr_topbar.hide {
  transform: translateY(-100%);
  opacity: 0;
}

/* Push the sticky header down */
header.site-header {
  margin-top: var(--tpbr-height, 40px);
}

/* Close button design */
.tpbr-close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.tpbr-close:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* ---------------------------
   Responsive Design & Build Modal
---------------------------- */
/* Make modal content scroll nicely on all viewports */
.modal-overlay .modal-content {
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
}

/* Let the iframe be tall but capped by viewport */
.modal-overlay iframe {
  display: block;
  width: 100%;
  height: min(90vh, 900px) !important; /* beats inline; adapts to screen */
  border: 0;
}

/* Desktop */
@media (min-width: 768px) {
  #dnbModal .modal-content {
    max-width: 1000px;   /* was 800px — widens the layout */
    width: 100%;
    max-height: 650px;    /* keeps it fitting nicely on smaller screens */
    overflow: auto;    /* hide any accidental scrollbars */
  }

  #dnbModal iframe {
    width: 100%;
    height: 400px;       /* trimmed from 900px for better vertical balance */
    border: none;
  }
}


@media (max-width: 767px) {
  #dnbModal .modal-content {
    max-width: 95%;
    height: 95vh;             /* use height instead of max-height */
    display: flex;
    flex-direction: column;   /* ensure iframe fills available space */
  }

  #dnbModal iframe {
    flex: 1;                  /* expand to fill remaining height */
    min-height: 650px;        /* ensures no cutoff on shorter screens */
    overflow: auto!important;
    width: 100%;
  }
}

html, body {
  overflow-x: clip; /* better than hidden; prevents accidental horizontal scrolling */
}

/* === BitSpace Floating Labels (Label Above Input Version) === */
.frm_form_field {
  position: relative !important;
  margin-bottom: 1.5rem !important;
}

/* Label styling */
.frm_form_field label {
  position: absolute !important;
  left: 14px !important;
  top: 18px !important;
  color: #bbb !important;
  font-size: 15px !important;
  background: none !important;
  padding: 0 4px !important;
  transition: all 0.25s ease-in-out !important;
  pointer-events: none !important;
  line-height: 1 !important;
  z-index: 2 !important;
}

/* Input + Textarea styling */
.frm_form_field input,
.frm_form_field textarea {
  width: 100% !important;
  padding: 18px 14px 6px !important;
  font-size: 16px !important;
  border: 1px solid #d9d9d9!important;
  border-radius: 5px !important;
  background: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Keep total height consistent */
.frm_form_field input {
  height: 52px !important;
  box-sizing: border-box !important;
}

.frm_form_field textarea {
  box-sizing: border-box !important;
  padding-top: 18px !important;
}

/* Focus highlight */
.frm_form_field input:focus,
.frm_form_field textarea:focus {
  border-color: #008F32 !important;
  box-shadow: 0 0 0 3px rgba(0, 143, 50, 0.1) !important;
  outline: none !important;
}

/* Float label when focused OR when parent has .has-value */
.frm_form_field:focus-within label,
.frm_form_field.has-value label {
  top: 4px !important;
  font-size: 12px !important;
  color: #008F32 !important;
}

/* Error state */
.frm_form_field input.frm_error,
.frm_form_field textarea.frm_error {
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1) !important;
}

/* Error text */
.frm_error {
  color: #BF411B !important;
  font-size: 13px !important;
  margin-top: 4px !important;
}

/* Remove red asterisk */
.frm_required {
  display: none !important;
}

/* --- Center the button container --- */
.frm_submit.frm_flex {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* --- Sleek modern button --- */
.frm_button_submit {
  background: #008F32!important;
  border: none;
  border-radius: 5px!important;
  padding: 14px 42px!important;
  color: white;
  font-weight: 500!important;
  font-size: 17px!important;
  text-transform: none; /* feels calmer than all caps */
  transition: all 0.25s ease!important;
  cursor: pointer!important;
  min-width: 100%!important;
}

/* Hover state: subtle lift */
.frm_button_submit:hover {
  transform: translateY(-2px)!important;
  box-shadow: 0 6px 14px rgba(0, 143, 50, 0.35)!important;
}

/* Active (press) state */
.frm_button_submit:active {
  transform: translateY(0)!important;
  box-shadow: 0 3px 8px rgba(0, 143, 50, 0.2)!important;
}

/* Optional: for smaller modals, center + balance margin */
.frm_submit {
  margin-top: 1rem!important;
}

/* Accordion hover */
.accordion-item__toggle {
        border-radius: 5px!important;
    padding: 10px!important;
        color: #333333;
        background-color: #f8f8f8;
}
button.accordion-item {
    border-radius: 5px!important;
    padding: 10px!important;
        color: #333333;
}

button.accordion-item__toggle:hover {
    border-radius: 5px!important;
    background-color: #ffffff!important;
}

.wp-block-woocommerce-accordion-header {
    border-radius: 5px!important;
    background-color: #eeeeee;
}

/* === ActiveCampaign Floating Labels (Label Above Input Version) === */
._form_element {
  position: relative !important;
  margin-bottom: 1.5rem !important;
}

/* Label styling */
._form_element label {
  position: absolute !important;
  left: 14px !important;
  top: 18px !important;
  color: #bbb !important;
  font-size: 15px !important;
  background: none !important;
  padding: 0 4px !important;
  transition: all 0.25s ease-in-out !important;
  pointer-events: none !important;
  line-height: 1 !important;
  z-index: 2 !important;
  font-weight: normal!important;
}

/* Input + Textarea styling */
._form_element input {
  width: 100% !important;
  padding: 18px 14px 6px !important;
  font-size: 16px !important;
  border: 1px solid #d9d9d9!important;
  border-radius: 5px !important;
  background: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Keep total height consistent */
._form_element input {
  height: 52px !important;
  box-sizing: border-box !important;
}

/* Focus highlight */
._form_element input:focus,
._form_element textarea:focus {
  border-color: #008F32 !important;
  box-shadow: 0 0 0 3px rgba(0, 143, 50, 0.1) !important;
  outline: none !important;
}

/* Float label when focused OR when parent has .has-value */
._form_element:focus-within label,
._form_element.has-value label {
  top: 4px !important;
  font-size: 12px !important;
  color: #008F32 !important;
}

/* Error state */
._form_element input.frm_error,
._form_element textarea.frm_error {
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1) !important;
}

/* Error text */
.frm_error {
  color: #BF411B !important;
  font-size: 13px !important;
  margin-top: 4px !important;
}

/* Remove red asterisk */
.frm_required {
  display: none !important;
}

/* --- Center the button container --- */
._button-wrapper _full_width {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* --- Sleek modern button --- */
button#_form_11_submit {
  background: #008F32!important;
  border: none;
  border-radius: 5px!important;
  padding: 14px 42px!important;
  color: white;
  font-size: 17px!important;
  text-transform: none; /* feels calmer than all caps */
  transition: all 0.25s ease!important;
  cursor: pointer!important;
  min-width: 100%!important;
}

/* Hover state: subtle lift */
button#_form_11_submit:hover {
  transform: translateY(-2px)!important;
  box-shadow: 0 6px 14px rgba(0, 143, 50, 0.35)!important;
}

/* Active (press) state */
button#_form_11_submit:active {
  transform: translateY(0)!important;
  box-shadow: 0 3px 8px rgba(0, 143, 50, 0.2)!important;
}

/* Optional: for smaller modals, center + balance margin */
button#_form_11_submit {
  margin-top: 1rem!important;
}

._form-content input::placeholder {
  color: transparent !important;
}

.field-required {
    display: none;
}

/* Make label text placeholder-gray instead of black */
div._form-content label._form-label {
  color: #bbb !important;
  font-weight: 400 !important;
}

/* Optionally lighten the asterisk too */
div._form-content label._form-label .field-required {
  color: #bbb !important;
  opacity: 0.6 !important;
}

/* Keep placeholder hidden for floating-label effect */
div._form-content input::placeholder {
  color: transparent !important;
}

/* Optional: green label on focus */
div._form-content input:focus ~ label._form-label,
div._form-content input:focus + label._form-label {
  color: #008F32 !important;
}

/* ==== HERO VIDEO SECTION ==== */
.hero-inner {
  position: relative;
  width: 100%;
  height: 70vh; /* full screen height */
  min-height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  opacity: 0;
  animation: fadeInHero 1s ease forwards;
}

@keyframes fadeInHero {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}

/* Dark overlay */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 79, 45, 0.65); /* BitSpace dark green overlay */
  z-index: 2;
}

/* Text and Buttons */
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 900px;
  padding: 0 1.5rem;
}

.hero-content h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1.2rem;
}

.hero-content p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: rgba(255,255,255,0.9);
}

/* Buttons */
.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  margin: 0 0.5rem;
}

.btn-primary {
  background-color: #ffffff;
  color: #004f2d;
}

.btn-primary:hover {
  background-color: #004f2d;
  color: #ffffff;
}

.btn-secondary {
  border: 2px solid #fff;
  color: #fff;
}

.btn-secondary:hover {
  background-color: #fff;
  color: #004f2d;
}

@media (max-width: 768px) {
  .hero-video .hero-bg {
    display: none !important;
  }

  .hero-inner {
    background-image: url('https://dev.bitspacechicago.com/wp-content/uploads/2025/10/fort1.jpg') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .btn-primary,
  .btn-secondary {
    display: block;
    width: 100%;
    max-width: 260px;
    margin: 0.4rem auto;
  }

  /* Add extra gap below the first button */
  .btn-primary {
    margin-bottom: 10px;
  }
}


/* Container keeps everything positioned the same */
.hero-video,
.hero-video .hero-bg {
  position: absolute;
  inset: 0;
}

/* Video fills and crops like a true background */
.hero-video .hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

/* Overlay, text, buttons: keep your existing rules */

.whybitspace-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.whybitspace-icon svg {
  transition: transform 0.25s ease;
}

.whybitspace-icon svg:hover {
  transform: scale(1.1);
}

/* Rolling numbers (homepage */
.stat-number {
  font-size: clamp(1.7rem, 5vw, 3rem);
  font-weight: 700;
  color: #fff;
  margin: 0.25em 0;
  transition: color 0.3s ease;
  text-align: center;
}

#bitspace-stats p {
  color: #fff;
  opacity: 0.9;
  margin: 0;
}

.stat-number {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.stat-number.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reviews slider background and border */
.n2-ss-slider-wrapper-inside {
    background-color: #eff8f2;
    border-radius: 10px;
}