/*
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-blue-700: #0f314f; 
    --clr-blue-600: #0d4478;
    --clr-blue-400: #1c74be; 
    --clr-blue-300: #88b8ce;
    --clr-hero-light: #83acde;
    --clr-link-hover: #83acde;
    --clr-text: #43454b;
    --clr-light-card-bg: #f3f8fb;
    --clr-light-footer-text: #ececed;
    --clr-grey: #4a585f;

    /* Elementor Fonts. Replace main fonts in quotes here as needed from Ele site settings */
    --ele-ff-primary: 'Open Sans', sans-serif;
    --ele-ff-secondary: 'Open Sans', sans-serif;
    --ele-ff-text: 'Open Sans', sans-serif;
	--ele-heading-line-height: 1.4;
    --ele-heading-font-weight: 700;
    --ele-text-line-height: 1.4;
    --ele-text-font-weight: 400;
}

.elementor-button {
    cursor: pointer;
}
.m-0 h3 {
    margin: 0;
}
.mh-blue-card {
    /* max-height: 430px; */
}
.capsule-bg {
    /* background-color: var(--clr-blue-700);
    padding: 5px 15px;
    border-radius: 6px; */
}
.force-bottom {
    margin-top: auto;
}
/* Trying to fix the site name showing under the Gravity Forms submit button */
.GF_AJAX_POSTBACK {
    display: none !important;
}
/* 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;
	} */
}

/* Scroll to top */
.scroll-to-top {
    position: fixed;
    bottom: 62px;
    right: 8px;
    background-color: #073f64;
    padding: 5px 10px;
    border-radius: 50%;
    border: none;
    font-size: 21px;
    text-align: center;
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    z-index: 9999;
}
.scroll-to-top:hover,
.scroll-to-top:focus,
.scroll-to-top:focus-visible {
    opacity: 1;
    background-color: var(--clr-blue-300);
    transition: .3s ease-in-out;
}
.scroll-to-top i {
    color: white;
}


/* Some link fixes */
.elementor-element.notification-bar-link div a {
    color: var(--clr-blue-300);
    text-decoration: none;
    font-weight: 700;
}
.elementor-element.notification-bar-link div a:hover {
    color: var(--clr-blue-300);
    text-decoration: none;
}
.elementor-element.inline-link a {
    color: var(--clr-blue-400);
    text-decoration: none;
}
.elementor-element.inline-link a:hover {
    color: var(--clr-link-hover);
    transition: .3s ease-in-out;
    text-decoration: none;
}
.elementor-element.inline-link-white a {
    color: var(--clr-white);
    font-weight: 700;
    text-decoration: none;
}
.elementor-element.inline-link-white a:hover {
    color: var(--clr-white);
    transition: .3s ease-in-out;
    text-decoration: underline;
}
#breadcrumbs a:hover {
    transition: .2s ease-in-out;
}
.breadcrumb_last {
    font-weight: 700;
}
/* Bullet list fixes */
.bullet-list ul,
.bullet-list ol {
    padding-left: 20px;
}

/* Lightcolored card on homepage section "Testimonials" */
.card-max-height-content {
    max-height: fit-content;
}

/* Transparent buttons with arrow icon: Makes the arrow look a bit more Y centered */
@media(min-width: 767px){
    .transparent-arrow-btn .elementor-button-icon svg {
        margin-top: -2px;
    }
}
/* 
**
***
    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.
***
**
*/
/* Shrink header on scroll */
#ele-shrink-header {
    transition: all 0.3s linear;
}
#ele-shrink-header.scrolled {
	width: 100% !important;
    padding: .75em 3em; /* Adjust as needed */
    transition: all .2s linear;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
}
/* Logo default state */
#ele-shrink-header img {
    width: 100%;
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s 
}
/* Mobile logo on scroll */
#ele-shrink-header.scrolled img {
    width: 80%; /* Adjust as needed */
}
 /* Shrink Logo more only on tablet and larger */
@media(min-width: 767px){
    #ele-shrink-header.scrolled img {
        width: 60%; /* Adjust as needed */
    }
}
/* Shrink nav items */
#ele-shrink-header.scrolled .elementor-nav-menu li a {
    font-size: .9rem; /* Adjust as needed */
    transition: all .2s linear;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
}
/* Give header BG color while sticky */
#ele-shrink-header.elementor-sticky.elementor-sticky--active {
    background-color: var(--clr-blue-700);
}
#ele-shrink-header.elementor-sticky .e-fas-search {
    margin-bottom: -4px;
} 

/* Mobile sticky header */
#ele-shrink-header-mob {
    transition: all .3s linear;
}
#ele-shrink-header-mob.scrolled {
	width: 100% !important;
    padding: .5em .5em .5em 1em; /* Adjust as needed */
    transition: all .3s linear;
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
}
#ele-shrink-header-mob img {
    width: 100%;
}
#ele-shrink-header-mob.scrolled img {
    width: 60%; /* Adjust as needed */
    transition: all .3s linear;
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
}
.mobile-menu-hamburger-icon a {
    display: flex;
}

/* LOGIN BUTTON WITH DROPDOWN */
.animated-login-dropdown-wrapper {
    position: relative;
    display: inline-block;
}
.dropdown-login-btn {
    min-width: 150px;
    padding: .3em 2em;
    background-color: var(--clr-white);
    color: var(--clr-text);
    border: none;
    /* border: 3px solid var(--clr-blue-700); */
    outline: none;
    cursor: pointer;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 28px;
    font-family: var(--ele-ff-primary);
}
.dropdown-login-btn:hover,
.dropdown-login-btn:focus {
    background-color: var(--clr-white);
    color: var(--clr-text);
}
.dropdown-login-btn:hover {
    color: var(--clr-link-hover);
}
.dropdown {
    position: absolute;
    top: 2.75rem;
    left: 0;
    background-color: white;
    /* border: 1px solid #ddd; */
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    width: 150px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px); /* Slide up when hidden */
    pointer-events: none;
    transition:
        max-height 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
    z-index: 1000;
}

.dropdown.open {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0); /* Slide down when shown */
    pointer-events: auto;
}
.dropdown-inner {
    padding: .25em 0 .5em 0;
    border-radius: 6px;
}
.dropdown-label {
    margin-bottom: 0rem;
    padding: .35em 1em .35em 1em;
    font-weight: bold;
    color: var(--clr-blue-700);
}
.dropdown-inner .dropdown-link {
    display: block;
    position: relative;
    /* max-width: fit-content; */
    text-decoration: none;
    padding: .35em 1em;
    color: var(--clr-text);
    text-decoration: none;
    transition: background 0.2s;
}
.dropdown-inner .dropdown-link::before {
    content: '';
    position: absolute;
    width: 60%;
    height: 3px;
    border-radius: 6px;
    background-color: var(--clr-blue-700);
    bottom: 0;
    left: 0;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}
.dropdown-inner .dropdown-link:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}
.dropdown-inner .dropdown-link:hover {
    font-weight: 700;
    /* color: var(--clr-white);
    transition: .3s ease-in-out;
    background-color: var(--clr-blue-700); */
}
.dropdown-inner .dropdown-link:last-child {
    /* border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    overflow: hidden; */
}
.dropdown-inner .dropdown-link:last-child:hover {
    
}


/*************************** Gravity Forms ***************************/
.gf_style_sam .partial_entry_warning {
    font-style: italic;
    font-size: .85rem;
}
.gf_style_sam .gform-body.gform_body .gform_fields {
    row-gap: 20px;
}
.gform-body.gform_body div input {
    outline: none;
    box-shadow: none;
    border: 1px solid var(--clr-blue-600);
    border-radius: 6px;
    color: var(--clr-text);
    min-height: 45px;
}
.gform-body.gform_body div textarea {
    outline: none;
    box-shadow: none;
    border: 1px solid var(--clr-blue-600);
    border-radius: 6px;
    padding: 5px 10px;
    color: var(--clr-text);
    resize: none;
}
.gform-footer.gform_footer {
    /* margin-top: 0 !important; */
}
.gf_style_sam .gform-footer.gform_footer input[type="submit"][data-submission-type="submit"].gform_button.button {
    background-color: var(--clr-blue-700);
    font-family: var(--ele-ff-primary);
    border-radius: 6px;
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: none;
    font-style: normal;
    text-decoration: none;
    line-height: 1.4;
    padding: 12px 24px;
}
.gf_style_sam .gform-footer.gform_footer input[type="submit"][data-submission-type="submit"].gform_button.button:hover {
    color: var(--clr-hero-light);
}
.gf_style_sam .ginput_container_address {
    row-gap: 20px;
}
.gf_style_sam .gf-section-divider {
    margin-bottom: 20px;
}
@media(max-width: 767px){
    .gf_style_sam .fw-mobile div input.small {
        width: 100%;
        inline-size: 100%;
    }
}



/************************** CUSTOM SEARCH WIDGET ***************************/
.custom-search-wrapper {
    position: relative;
    display: inline-block;
}
.search-toggle {
    padding: 0;
}
.fa-solid.fa-magnifying-glass {
    color: white;
}
.fa-solid.fa-magnifying-glass:hover {
    color: var(--clr-link-hover);
    transition: all .3s;
}
.search-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}
.search-toggle:hover {
    background: none;
}
.search-toggle:focus {
    background: none;
    outline: 2px solid white;
}
.search-toggle:focus-visible {
    background: none;
    outline: 2px solid white;
}
.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(--ele-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: var(--clr-blue-300);
}


/*************************** TEAM MEMBER LOOP ***************************/
#team-member-loop .elementor-loop-container .team-member:last-child .elementor-element {
    border: none;
}










/***************** CUSTOM ICECAP FORMS FOR SALESFORCE **********************/
form.salesforce-form {
    margin: 2rem auto;
    padding: 2rem;
    background-color: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
#sales-member-form,
#salesforce-form {
    padding: 0;
    background-color: var(--clr-white);
    box-shadow: none;
}
.salesforce-form .form-group {
    margin-bottom: 1.2rem;
    display: flex;
    flex-direction: column;
}
.salesforce-form .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.salesforce-form .form-row .form-group {
    flex: 1;
    min-width: 200px;
}
.salesforce-form label {
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.salesforce-form input[type="text"],
.salesforce-form input[type="email"],
.salesforce-form input[type="tel"],
.salesforce-form select {
    padding: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}
.salesforce-form input[type="submit"] {
    background-color: #0053ba;
    color: white;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 1rem;
    transition: background-color 0.3s ease;
}
.salesforce-form input[type="submit"]:hover {
    background-color: #003e8a;
}
@media (max-width: 600px) {
    .salesforce-form .form-row {
        flex-direction: column;
    }
}
.salesforce-disclaimer p {
    font-size: .9rem;
    font-style: italic;
}