/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 29 2026 | 13:40:44 */
/* 1. Remove the default focus outline for mouse/touch users */

/* This targets buttons, links, inputs, and Beaver Builder modules */

:focus {

    outline: none !important;

}



/* 2. Restore a high-contrast outline ONLY for keyboard navigation */

/* The :focus-visible pseudo-class only triggers when the Tab key is used */

:focus-visible {

    outline: 3px solid #440099 !important; /* Your brand purple */

    outline-offset: 3px;

    box-shadow: 0 0 0 2px #ffffff !important; /* White gap for visibility */

}



/* 3. Specific fix for Gravity Forms and Beaver Builder Buttons */

/* Ensures these elements follow the same logic */

.gform_button:focus,

.fl-button:focus,

.fl-accordion-button:focus {

    outline: none !important;

    box-shadow: none !important;

}



.gform_button:focus-visible,

.fl-button:focus-visible,

.fl-accordion-button:focus-visible {

    outline: 3px solid #440099 !important;

    outline-offset: 3px;

}





/* 1. Grid Container */

.event-highlights-grid {

    display: grid;

    /* Two equal columns on desktop */

    grid-template-columns: repeat(2, 1fr); 

    gap: 20px; 

    max-width: 1200px;

    margin: 40px auto;

}



/* 2. Image Item Styling */

.highlight-item {

    margin: 0;

    padding: 0;

}



.highlight-img {

    width: 100%;

    height: auto;

    display: block;

/*     border-radius: 4px; /* Matches your site's clean aesthetic */ */

    transition: transform 0.3s ease;

}



/* 3. Accessibility: Focus state if these become links later */

.highlight-item a:focus-visible .highlight-img {

    outline: 3px solid #440099 !important;

    outline-offset: 5px;

}



/* 4. Mobile Responsiveness: Stacked on smaller screens */

@media (max-width: 768px) {

    .event-highlights-grid {

        /* Force a single column for mobile stacking */

        grid-template-columns: 1fr; 

        gap: 30px; /* Slightly more space between stacked items */

        padding: 0 15px;

    }

}/* Removes the default browser ring and adds a custom one without changing button styles */

#gform_submit_button_1:focus-visible {

outline: -webkit-focus-ring-color auto 1px;

}



/* 1. Targets the entire container text */

.email {

    width: 100%;

    text-align: right;

    color: #ffffff !important; /* Forces "Email us at:" and "|" to white */

    font-weight: 500;

}



/* 2. Targets the specific links within that container */

.email a {

    color: #ffffff !important;

    text-decoration: none; /* Good for accessibility so users know it's a link */

    transition: opacity 0.2s ease;

}



/* 3. Hover state for accessibility */

.email a:hover,

.email a:focus {

    color: #ffffff;

   opacity:0.8;

    text-decoration: none;

font-weight: normal !important; /* Resets the weight to prevent shifting */

    text-shadow: 0.5px 0 0 #ffffff;

}



.pp-gf-content{width: 500px !important}





/* 1. Alignment Fix: Target the row container */

/* This forces the nav to sit at the very bottom of the header column */

.fl-page-header .container .row {

    display: flex !important;

    align-items: flex-end !important;

}



/* 2. Standard Menu Items - Vertical Baseline Adjustment */

.fl-menu .menu > li > a {

    /* Reduced top padding, increased bottom to push text down to logo baseline */

    padding: 25px 15px 5px 15px !important; 

    color: #444 !important;

    font-weight: 500;

    transition: all 0.3s ease;

    position: relative; 

    display: flex;

    align-items: flex-end; 

}



/* 3. The Active State - Text Styling */

.fl-menu .menu > li.current-menu-item > a,

.fl-menu .menu > li.current_page_item > a,

.fl-page-nav ul.navbar-nav li.current-menu-item > a {

    color: #440099 !important;

    font-weight: 700 !important;

}



/* Hover state for standard items ONLY (Excludes active items to prevent shifting) */

.fl-menu .menu > li:not(.current-menu-item):not(.current_page_item) > a:hover,

.footer-link:hover {

    font-weight: normal !important; /* Resets the weight to prevent shifting */

    text-shadow: 0.5px 0 0 #440099; /* Mimics the bold look without changing width */

    transition: text-shadow 0.2s ease;

    color: #440099 !important;

}



/* Explicitly disable hover text-shadow adjustments on the active item */

.fl-menu .menu > li.current-menu-item > a:hover,

.fl-menu .menu > li.current_page_item > a:hover {

   font-weight: 700 !important;

text-shadow: none;

    cursor: default; /* Optional: signals to the user they are already on this page */

}



.fl-menu .menu > li > a:hover,.footer-link:hover{

font-weight: normal !important; /* Resets the weight to prevent shifting */

    text-shadow: 0.5px 0 0 #440099; /* Mimics the bold look without changing width */

    transition: text-shadow 0.2s ease;

color:#440099 !important;

}





/* 4. The Smaller Active Border (Refined) */

.fl-menu .menu > li.current-menu-item > a::after,

.fl-menu .menu > li.current_page_item > a::after,

.fl-page-nav ul.navbar-nav li.current-menu-item > a::after,

.fl-page-nav ul.navbar-nav li.current-page-ancestor > a::after {

    content: "";

    position: absolute;

    /* This places the line exactly below the text baseline */

    bottom: -26%; 

    left: 50%;

    transform: translateX(-50%);

    

    /* Changed back to a fixed width for the "smaller section" look */

    width: 80%; 

    height: 3px;

    

    background-color: #ebe8f9; 

    border-radius: 2px;

}



/* 5. The Gold Donate Button - Balanced Height */

.fl-menu li:last-child a {

    background-color: #fdca00 !important;

    color: #000000 !important;

    font-weight: bold !important;

    /* Adjusted padding to keep it visually centered while text stays on baseline */

    padding: 31px 31px !important; 

    display: flex;

    align-items: center;

    margin-left: 15px;

    border-radius: 0; /* Keep it flush if that's the theme's look */

}



/* Ensure no active line appears on the Gold Button */

.fl-menu li:last-child a::after {

    display: none !important;

}

 @media screen and (max-width: 400px) {

.email{

text-align:center;

}

 

.pipeline{

visibility:hidden;

}

 



}

/* 4. Mobile Centering & Donate Button Fix */

@media screen and (max-width: 768px) {

    /* Center all mobile menu links */

    .fl-menu .menu {

        text-align: center !important;

    }



    .fl-menu .menu > li {

        width: 100%;

        float: none;

    }



    .fl-menu .menu > li > a {

        justify-content: center; /* Centers text if flex is used */

        border-bottom: none !important; /* Usually looks better without lines on mobile */

    }



    /* Force the Donate button to center and look like a button on mobile */

    .fl-menu li:last-child a {

        margin: 10px 20px !important; /* Adds some breathing room on the sides */

        border-radius: 4px;

        justify-content: center !important;

        padding: 15px !important;

    }

    

    .email {

        text-align: center;

        padding: 10px 0;

    }

}



.fl-node-547qi8u0pscz .pp-gf-content .gform_wrapper .gform_footer {

    padding: 0 !important;

    margin: 0 !important;

    display: flex !important;

}





.fl-node-547qi8u0pscz .pp-gf-content .gform_wrapper .gform_footer .gform_button {

    width: auto !important;

    height: 100% !important; /* Forces it to fill the box height */

    margin: 0 !important;   /* Removes the gap at the top/bottom */

    padding: 0 55px !important; /* Makes it long like your goal image */

    align-self: stretch !important;

    border-radius: 0 !important;

    display: flex !important;

    align-items: center !important;

}

/* This overrides the Gravity Theme defaults to make it flush */

.gform_wrapper.gravity-theme .gform_footer, 

.gform_wrapper.gravity-theme .gform_page_footer {

    margin: 0 !important;   /* Removes the top margin */

    padding: 0 !important;  /* Removes the internal padding */

    display: flex !important;

    align-self: stretch !important;

}



/* This targets the actual form tag inside Gravity Forms */

.gform_wrapper form {

display: flex !important;

    flex-direction: row !important;

    align-items: stretch !important; /* Forces button to match input height */

    border: 1px solid #777 !important;

    overflow: hidden !important; /* Clips the button corners so they stay inside */

    max-width: 500px;

    margin: 0 auto !important;

}



.gform_body ul {

  list-style: none;



}







.gfield {

  position: relative!important;



}







.gfield input {



  transition: 0.1s all linear;

margin-bottom: 0 !important; 

    border: none !important;

    height: 60px !important; /* Set a consistent height */

max-width:70%;



}







.gfield textarea {



}







.gfield.gfield--type-textarea label {

    top: 15px;

    left: 20px;



}







.gfield label {



  position: absolute;

  top: 15px;

  left: 20px;

  transition: 0.1s all linear;

  cursor: text;



}







.gfield.active input {

}







.gfield.active label {

  top: 0px;

  left: 5px;

  font-size: 12px !important;



}







.gfield.gfield--type-textarea.active label {

    top: 0px;

    left: 5px;



}







.gfield_required.gfield_required_asterisk {

    font-size: 20px;

}



.gfield.active .gfield_required.gfield_required_asterisk {

    font-size: 12px!important;

}





/* Then make sure the button itself expands */

input.gform_button.button {

white-space: nowrap !important;

    height: 100% !important;

    margin: 0 !important;

    border-radius: 0 !important;

    padding: 0 40px !important; /* This makes it longer */

    align-self: stretch !important;

}



/* Mobile Fix for Gravity Form */

@media screen and (max-width: 768px) {
	
	/* Target the desktop menu module specifically and drop the last item block */
    .fl-menu .menu > li:last-child,
    .fl-page-nav ul.navbar-nav > li:last-child {
        display: none !important;
    }

    /* 1. Change the form from a row to a stack */

    .gform_wrapper form {

        flex-direction: column !important;

        max-width: 100% !important;

        border: none !important; /* Remove the outer border since items will stack */

    }



    /* 2. Make the input container full width */

    .gfield input {

        max-width: 100% !important;

        width: 100% !important;

        border: 1px solid #777 !important; /* Add border back to individual input */

        margin-bottom: 10px !important;

    }



    /* 3. Make the button full width and give it a fixed height */

    input.gform_button.button {

        width: 100% !important;

        height: 60px !important; /* Matches your input height */

        padding: 0 !important;

        justify-content: center;

    }



    /* 4. Reset the container width for mobile */

    .pp-gf-content {

        width: 100% !important;

    }



    /* 5. Adjust the floating label for mobile if needed */

    .gfield label {

        left: 15px;

    }

}







/* Container */

.custom-quote-box {



    padding: 0;

    border: none;

    max-width: 100%;

}



/* The Quote Text - Merriweather Style */

.custom-quote-box blockquote {

    margin: 0 0 20px 0;

    padding: 0;

    border: none;




}



.custom-quote-box .quote-text p {

    font-family: 'Merriweather', serif !important;

    font-size: 36px !important; 

    line-height: 1.3 !important;

    font-weight: 800 !important; 

    color: #5675BC !important; /* Your brand blue */

    letter-spacing: -0.5px;

}



/* The Author/Caption */

.custom-quote-box .quote-author {

font-family: 'Merriweather', serif !important;

    display: block;

    text-align: right;

    font-size: 30px; 

    font-style: normal;

    color: #5675BC; 

    font-weight: 500;

}



/* Styling the span containing the dash */

.custom-quote-box .quote-author span {

font-family: 'Merriweather', serif !important;

    color: #5675BC;

    font-weight: 400;

}