/*
Theme Name: Brockett Hello Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.0.1.1707834477
Updated: 2024-02-13 14:27:57
*/

:root {
  /* Standard Colors */
  --clr-white: #fff;
  --clr-black: #000;
  --clr-black-alt1: #231f20;
  --clr-black-alt2: #292929;
  --clr-light-border: #ddd;

  /* Add Elementor Global Colors Here for this site */
  --clr-primary: #0fa3da;
  --clr-secondary: ;
  --clr-text: #292929;
  --clr-accent: ;
  --clr-theme-blue: #0c2b5f;
  --clr-theme-red: #4f0d0f;

  /* Fonts. Replace main fonts in quotes here as needed from Ele site settings */
  --ff-primary: "Barlow Condensed", sans-serif;
  --ff-secondary: "Barlow Condensed", sans-serif;
  --ff-text: "Barlow Condensed", sans-serif;

  /* Font Sizes, used below */
  --font-body: 1rem; /* 16px fixed */

  /* Headings min (mobile) */
  --h6-min: 1.125rem; /* 18px */
  --h5-min: 1.25rem; /* 20px */
  --h4-min: 1.5rem; /* 24px */
  --h3-min: 1.75rem; /* 28px */
  --h2-min: 2rem; /* 32px */
  --h1-min: 2.5rem; /* 40px */

  /* Headings max (desktop) */
  --h6-max: 1.375rem; /* 22px */
  --h5-max: 1.75rem; /* 28px */
  --h4-max: 2rem; /* 32px */
  --h3-max: 2.5rem; /* 40px */
  --h2-max: 3rem; /* 48px */
  --h1-max: 4rem; /* 64px */
}

/* -------------------------------------
    FLUID TYPOGRAPHY SYSTEM
    This lays above Elementor, and should be the default for most font sizes, unless you specifcally want to set a font size on a single element with Elementor.
    Baseline: 1rem = 16px (paragraph)
    Adjust these values as needed at the start of a new site, after the fonts of that site are installed
------------------------------------- */
p {
  /* font-size: var(--font-body); 
	font-family: var(--ff-primary); 
	line-height: 1.6; 
	font-weight: 400;  */

  /* 	color: var(--clr-text);  */
}

/* 
h6 { font-size: clamp(var(--h6-min), 0.5rem + 1vw, var(--h6-max)); font-family: var(--ff-primary); line-height: 1.5; font-weight: 700; color: var(--clr-primary); }
h5 { font-size: clamp(var(--h5-min), 0.5rem + 1.25vw, var(--h5-max)); font-family: var(--ff-primary); line-height: 1.4; font-weight: 700; color: var(--clr-primary); }
h4 { font-size: clamp(var(--h4-min), 0.5rem + 1.5vw, var(--h4-max)); font-family: var(--ff-primary); line-height: 1.3; font-weight: 700; color: var(--clr-primary); }
h3 { font-size: clamp(var(--h3-min), 0.5rem + 2vw, var(--h3-max)); font-family: var(--ff-primary); line-height: 1.3; font-weight: 700; color: var(--clr-primary); }
h2 { font-size: clamp(var(--h2-min), 0.5rem + 3vw, var(--h2-max)); font-family: var(--ff-primary); line-height: 1.2; font-weight: 700; color: var(--clr-primary); }
h1 { font-size: clamp(var(--h1-min), 1rem + 4vw, var(--h1-max)); font-family: var(--ff-primary); line-height: 1.1; font-weight: 700; color: var(--clr-primary); }
li { color: var(--clr-text); margin-bottom: .5em; } 
*/

/* Moving the ADA and cookie buttons up a bit on mobile to get it out of the way of contact bar the bottom. Turn off if needed. */
@media (max-width: 767px) {
  .userway_buttons_wrapper {
    bottom: 50px !important;
  }
  .cky-btn-revisit-wrapper {
    bottom: 50px !important;
  }
}

.link-style-fix,
.elementor-element .inline-link a {
  color: var(--clr-theme-blue);
  font-weight: 700;
  text-decoration: none;
}
.link-style-fix:hover,
.elementor-element .inline-link a:hover {
  color: var(--clr-theme-blue);
  font-weight: 700;
}
ul {
  padding-left: 20px;
}
article.privacy-policy,
article.accessibility-statement {
  font-family: var(--ff-primary);
}
article.privacy-policy ul,
article.accessibility-statement ul {
  margin-bottom: 1em;
  font-family: var(--ff-primary);
}
article.privacy-policy ul li,
article.accessibility-statement ul li {
  margin-bottom: 0.5em;
  font-family: var(--ff-primary);
}

/*************************** Scroll to top ***************************/
#scroll-top-top-wrapper .scroll-to-top {
  position: fixed;
  bottom: 62px;
  right: 7px;
  background-color: transparent;
  padding: 5px 10px;
  border-radius: 50%;
  border: 1px solid white;
  font-size: 20px;
  text-align: center;
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  z-index: 9999;
}
#scroll-top-top-wrapper .scroll-to-top:hover,
#scroll-top-top-wrapper .scroll-to-top:focus,
#scroll-top-top-wrapper .scroll-to-top:focus-visible {
  opacity: 1;
  background-color: transparent;
}
#scroll-top-top-wrapper .scroll-to-top i {
  color: white;
}

/* 
**
***
    CUSTOM SHRINKING HEADER ON SCROLL :)
    Be sure to add the ID 'ele-shrink-header' on the header element in elementor.
    On the header element, under 'advanced' > 'Motion Effects', set 'Sticky' to 'Top' and add all the breakpoints.
    'Offset' and 'Effects Offset' to 0, those are controlled in js/app.js, as well as adding/removing the 'scrolled' class.
    See comments below on what values can be adjusted as needed per site.
***
**
*/
#ele-shrink-header {
  transition: all 0.3s linear;
  width: 100% !important;
  padding: 15px 10px;
}
#ele-shrink-header.scrolled {
  width: 100% !important;
  padding: 10px 10px;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
}
#ele-shrink-header img {
  /* width: 10em; */
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s;
}
#ele-shrink-header.scrolled img {
  width: 20em;
  margin-bottom: -2em;
  margin-top: 0em;
}
@media (min-width: 767px) {
  #ele-shrink-header.scrolled img {
    /* width: 70%; */
  }
}
#ele-shrink-header.scrolled .elementor-nav-menu li a {
  font-size: 1.2rem;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
}
#ele-shrink-header.scrolled .elementor-nav-menu li a.elementor-sub-item {
  font-size: 1rem;
}
#ele-shrink-header .elementor-button {
  font-size: 1.2rem;
}
#ele-shrink-header.scrolled .elementor-button {
  font-size: 0.9rem;
}

/*************************** CUSTOM SEARCH WIDGET ***************************/
.custom-search-wrapper {
  position: relative;
  display: inline-block;
  padding: 0 1em;
}
.fa-solid.fa-magnifying-glass {
  color: white;
}
.fa-solid.fa-magnifying-glass:hover {
  color: white;
  transition: all 0.3s;
}
.custom-search-wrapper button.search-toggle {
  background: none;
  padding: 0;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}
.custom-search-wrapper button.search-toggle:hover {
  background: none;
}
.custom-search-wrapper button.search-toggle:focus {
  background: none;
  outline: none;
}
.custom-search-wrapper button.search-toggle:focus-visible {
  background: none;
  outline: none;
}
.search-box {
  position: absolute;
  top: 120%;
  right: 0;
  width: 0;
  max-width: 400px;
  background: white;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  overflow: hidden;
  transition:
    width 0.3s ease,
    opacity 0.3s ease;
  pointer-events: none;
  z-index: 1000;
}
.search-box.show {
  width: 400px;
  opacity: 1;
  pointer-events: auto;
}
.header-search-form input {
  border: 1px solid #ddd;
  outline: none;
  border-radius: 6px;
  font-family: var(--ff-primary);
  transition: all 0.2s ease;
  box-shadow: none;
}
.header-search-form input:focus {
  border: 1px solid transparent;
  outline: none;
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.2);
}
.search-field {
  padding: 6px;
  font-size: 1rem;
}
.search-submit,
.search-submit:hover {
  padding: 6px 10px;
  font-size: 1rem;
  background: none;
  border: none;
  outline: none;
}
.search-form-btn.fa-solid.fa-magnifying-glass,
.search-form-btn.fa-solid.fa-magnifying-glass:hover {
  background: none;
  color: white;
}

.MuiButtonBase-root.MuiListItemButton-root.MuiListItemButton-gutters.MuiListItemButton-root.MuiListItemButton-gutters {
  background-color: #fff !important;
}

.MuiTypography-root.MuiTypography-caption.MuiListItemText-secondary {
  color: black !important;
}

.MuiListItemButton-gutters {
  background-color: #fff !important;
}

.MuiListItemText-secondary {
  color: black !important;
}

/* GRAVITY FORMS */
.gform_button.button {
  background-color: var(--clr-theme-blue) !important;
  font-family: var(--ff-primary) !important;
  font-size: 1.1rem !important;
  color: var(--clr-white) !important;
  text-transform: uppercase !important;
}