/*
Theme Name: Beaver Builder Child Theme
Theme URI: https://www.wpbeaverbuilder.com
Version: 1.75
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: https://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here...Remember to change the Version number above! */ 

@font-face {
  font-family: 'VanillaSans';
  src: url('fonts/VanillaSans-Regular.woff2') format('woff2'), 
       url('fonts/VanillaSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; 
}

@font-face {
  font-family: 'VanillaSans';
  src: url('fonts/VanillaSans-Bold.woff2') format('woff2'), 
       url('fonts/VanillaSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap; 
}


/* Ensure the page itself can scroll */
html, body {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

body {font-family: VanillaSans; font-weight:400;font-size:18px;}


/* Position the injected container */
#home-rotating-bg {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Place behind content */
    overflow: hidden;
    pointer-events: none; /* Crucial: lets you click/scroll through it */
}

/* Style the images inside the container */
.bg-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fill screen without stretching */
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.bg-slide.active {
    opacity: 1;
}

/* 2. MAKE CONTENT SCROLLABLE & TRANSPARENT */
/* We must ensure no parent containers have solid backgrounds or hidden overflows */
html, body {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.home .fl-page, 
.home .fl-page-content, 
.home #fl-main-content,
.home .fl-builder-content,
.home .fl-row-content-wrap {
    background: transparent !important;
}

/* Fix for the Admin Bar overlap */
#home-rotating-bg {
    top: 100px;
}

#home-rotating-bg::after {
    content: '';          
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1); 
    z-index: 10;          
}

.fl-page-content {
    overflow-x: hidden; /* Prevents horizontal scroll jumps */
}

header.fl-builder-content-35 {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999 !important; /* Higher than everything else */
    background-color: #ffffff; /* Or transparent if you want to see the BG through it */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Optional: adds definition */
}

/* 2. Push the content down so it doesn't hide behind the fixed header */
/* Since the header is now 'floating', the page starts at the very top */
.fl-page {
    margin-top: 80px; /* Adjust this value to match your actual header height */
}

/* 3. Adjust for WordPress Admin Bar so they don't overlap */
.admin-bar header.fl-builder-content-35 {
    top: 32px;
}

/* 4. Ensure your background images start below the header if desired */
/* Or keep top: 0 if you want the header to float over the background */
#home-rotating-bg {
    z-index: -1 !important;
}

/* 1. Fix the Header and FORCE a background color */
header.fl-builder-content-35, 
header.fl-builder-content-35 .fl-row-content-wrap {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999 !important; 
    background-color: #ffffff !important; /* Forces White. Change to #008542 for Zendesk Green if preferred */
}

/* 2. Ensure the header has a height so it doesn't collapse */
header.fl-builder-content-35 {
    height: 80px; /* Adjust this to match your logo height */
}

/* 3. Push the page content down so the top isn't cut off by the fixed header */
.home .fl-page {
    margin-top: 80px !important; /* Matches the height above */
    position: relative;
    z-index: 10;
}

/* 4. Fix for the WordPress Admin Bar */
.admin-bar header.fl-builder-content-35 {
    top: 32px !important;
}


h1 {font-family: VanillaSans; font-weight:700;}

h2 {font-family: VanillaSans; font-weight:400;}

.hiwcol {position:relative;}

.counter p {
	position: absolute;
    top: 70px;
    left: 145px;
    background-color: #d1f571;
    color: #2c462e;
    font-size: 28px;
    font-weight: 700;
    padding: 4px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    width: 44px;
    height: 44px;
    line-height: 1.1;
    z-index: 10;
}


@media (max-width: 768px) {
	
	.counter p {left:90px;}
	
}

#thermo {position:fixed;right:0;top:30%;width:150px;}

@media (max-width: 1420px) {
	
	#thermo {display:none;}
	
}

/* Hide the thermometer only when the Beaver Builder editor is active */
.fl-builder-edit #thermo {
    display: none !important;
}

#thermo {background-color:rgba(0,0,0,0.61);border-bottom-left-radius:25px;
border-top-left-radius:25px;}

.thermo-liquid { position: absolute; bottom: 70px; left: 30px; width: 50%; background-color: #3c6636; z-index: 2; height:0; }

.fl-node-f8zqyoi6xcp1 p {color:#fff !important;}

#gpr-q-modal {overflow:scroll;padding-top:80px;padding-bottom:40px;}

#gpr-q-modal h2 {font-size:20px;}