/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra Child Theme by OuterBox
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* TOC:
- Variables
- Utility
- Typography
- Buttons
- Slider
- Carousel
- Video
- Tabbed Content
- Tables
- Forms
- Header
- Mobile Menu
- Footer
- Hero Banners
- Cards / Buckets
- Breadcrumbs
- Accordion
- Gallery
*/

:root {
    /* Spacing */
    --space-base: 16px;
    --space-xxs: calc(var(--space-base)*0.25);
    --space-xs: calc(var(--space-base)*0.5);
    --space-sm: calc(var(--space-base)*0.75);
    --space-md: calc(var(--space-base)*1.5);
    --space-lg: calc(var(--space-base)*2);
    --space-xl: calc(var(--space-base)*2.5);
    --space-xxl: calc(var(--space-base)*4);
    --space-xxxl: calc(var(--space-base)*5);
    --section-space: var(--space-xxxl);
    --section-side-space: var(--space-xxl);
    --gutter: var(--space-xxl);	
    --gutter-sm: var(--space-lg);
    --content-max: 768px;
    --content-padded-max: 920px;
    --container-max: 1200px;
    
    /* Fonts */
    --text-base: 16px;
    --text-sm: calc(var(--text-base)*0.875);
    --text-lg: calc(var(--text-base)*1.125);
    --heading-xxs: calc(var(--text-base)*0.875);
    --heading-xs: calc(var(--text-base)*1);
    --heading-sm: calc(var(--text-base)*1.25);
    --heading-md: calc(var(--text-base)*1.5);
    --heading-lg: calc(var(--text-base)*2);
    --heading-xl: calc(var(--text-base)*2.5);
    --heading-xxl: calc(var(--text-base)*3);
    --heading-xxxl: calc(var(--text-base)*3.5);	
    --font-weight-regular: 400;
    --font-weight-light: 300;
    --font-weight-bold: 700;
    --line-height-body:1.5;
    --line-height-heading:1.25;
    --font-family-heading: "Fira Sans Condensed", sans-serif;
    --font-family-body: "Open Sans", sans-serif;
        
    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 24px;
    --border-radius-element: var(--border-radius-lg);
    --border-radius-button: var(--border-radius-sm);
    --border-radius-input: var(--border-radius-md);
    
    
    /* Colors */
    --color-brand-01: #0075C9;
    --color-brand-02: #0B3858;
    --color-brand-03: #946937;
    --color-brand-04: #CDA289;
    --color-brand-05: #F4F8FA;
    --color-ui-01: #F4F8FA;
    --color-ui-02: #77787B;
    --color-ui-03: #0B3858;
    --color-ui-white: #ffffff;
    --color-ui-warning: #AA0000;
    --color-text-black: #0B3858;
    --color-text-white: #ffffff;
    --color-text-accent: #4E616F;
}

  
@media only screen and (max-width : 991px) {	
    :root {	
    --heading-xxs: calc(var(--text-base)*0.875);
    --heading-xs: calc(var(--text-base)*1);
    --heading-sm: calc(var(--text-base)*1.125);
    --heading-md: calc(var(--text-base)*1.25);
    --heading-lg: calc(var(--text-base)*1.5);
    --heading-xl: calc(var(--text-base)*2);
    --heading-xxl: calc(var(--text-base)*2.5);
    --heading-xxxl: calc(var(--text-base)*3);
    --section-space: var(--space-xl);
    --section-side-space: var(--space-base);
    --gutter: var(--space-lg);
    --gutter-sm: var(--space-md);
    }
}

/* Utility */
.border-radius-element {
    img, span, div, .elementor-slides .swiper-slide {
    border-radius: var(--border-radius-element);
}}

.padding-full {
    padding: var(--section-space) var(--section-side-space);
}

.padding-top {
    padding: var(--section-space) var(--section-side-space) 0 var(--section-side-space);
}

.padding-bottom {
    padding: 0 var(--section-side-space) var(--section-space) var(--section-side-space);
}

.padding-none {
    padding: 0px var(--section-side-space);
}

/* Typography */

a.elementor-element{
    text-decoration: none !important;
}

.eyebrow-heading {
    span, h1, h2, h3, h4, h5, h6 {
    line-height: 1.5;
    font-size: var(--heading-xs);
    font-family: var(--font-family-heading);
    text-transform: uppercase;
    font-weight:var(--font-weight-bold);
    letter-spacing: 1px;
}}

.headline-heading {
    span, h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-heading);
    font-size: var(--heading-xxxl);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
}}

.heading1 {
    span, h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-heading) !important;
    font-size: var(--heading-xxl);
    font-family: var(--font-family-heading) !important;
    font-weight: var(--font-weight-light);
}}

.heading2 {
    span, h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-heading);
    font-size: var(--heading-xl);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
}}

.heading3 {
    span, h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-heading);
    font-size: var(--heading-lg);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
}}

.heading4 {
    span, h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-heading);
    font-size: var(--heading-md);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
}}


.heading5 {
    span, h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-heading);
    font-size: var(--heading-sm);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
}}

.heading6 {
    span, h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-body);
    font-size: var(--heading-xs);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
}}


p {
    margin-bottom: 0!important;
    font-size: var(--text-base);
    font-family: var(--font-family-body);
    line-height: var(--line-height-body);
}

.p--small {
    font-size: var(--text-sm);
}

.p--large {
    font-size: var(--text-lg);
}

p + p {
    margin-top: var(--space-base)!important;
}

span, h1, h2, h3, h4, h5, h6, p {
    max-width: 768px !important;
}

body, button, input, select, textarea {
    font-family: var(--font-family-body);
}

/* Buttons */
.elementor-button{
   border-radius:var(--border-radius-button);
   padding:var(--space-sm) var(--space-md) !important;
   font-family: var(--font-family-heading);
   font-weight: var(--font-weight-bold);
   text-transform: uppercase;
   line-height: 1.35 !important;
}

.elementor-button, .elementor-flip-box__button {
   background-size: 200% auto!important;
   background-position:center right!important ;
}

/* :focus is here because Elementor's per-button colour rule fires on
   `:hover, :focus`. Sliding the background on hover alone left keyboard focus
   showing the hover text colour over the resting background, which rendered
   the label invisible on any button whose two states share a colour. Plain
   :focus rather than :focus-visible, so this stays in step with Elementor. */
.elementor-button:hover,
.elementor-button:focus,
.elementor-flip-box__button:hover,
.elementor-flip-box__button:focus {
   background-position:center left!important ;
}

.btn-link .elementor-button {
    padding: var(--space-sm) 0px !important;
}

.icon-button{
  .elementor-button-icon{
    margin-left: auto;
  }
}


/* Slider */
.elementor-swiper{
  margin-bottom: 16px;
}
.elementor-element .swiper .swiper-pagination-bullets.swiper-pagination-horizontal{
  bottom: -18px;
}
.elementor-element.elementor-arrows-position-outside .swiper{
  width: calc(100% - 80px);
}
.elementor-slides .swiper-slide{
  position: relative;
  overflow: hidden;
}
.swiper-pagination-progressbar {
  width: 60% !important;
  align-self: flex-end;
  margin: 0 20%;
  bottom:0;
  background-color: #ced7df;
}
.swiper-pagination-progressbar-fill{
  background-color: var(--color-brand-02) !important;
}
.elementor-widget-slides,
.elementor-widget-image-carousel{
  .swiper{
    width: calc(100% - 120px) !important;
  }
  .elementor-swiper-button{
    border: 1px solid var(--color-brand-03);
    border-radius: 100%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    i{
      width: 12px;
      height: 12px;
    }
    &:hover,
    &:active{
      i{
        color: var(--color-brand-03);
      }
    }
  }
  .swiper-pagination-bullet{
    height: 4px !important;
    border-radius: 0;
    mask-image: none;
  }
  .swiper-pagination-bullet-active ~ .swiper-pagination-bullet{
     background-color: #C7C7C8 !important;
  }
}

/* Carousel */
.swiper-pagination-bullet{
    opacity: 1;
    position: relative;
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path fill="%23ffffff" d="M6,12c-3.31,0-6-2.69-6-6S2.69,0,6,0s6,2.69,6,6-2.69,6-6,6ZM6,1C3.24,1,1,3.24,1,6s2.24,5,5,5,5-2.24,5-5S8.76,1,6,1Z"/></svg>');
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}
.swiper-pagination-bullet:hover,
.swiper-pagination-bullet-active{
    mask: none;
}
.elementor-swiper-button .fa-arrow-left,
.elementor-swiper-button .fa-arrow-right,
.eicon-chevron-left,
.eicon-chevron-right{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.38,11.06L10.66,1.34l1.34-1.34,12,12-12,12-1.34-1.34,9.72-9.72H0v-1.89h20.38Z" style="fill-rule:evenodd;"/></svg>');
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    display: block;
}
.elementor-swiper-button .fa-arrow-left:before,
.elementor-swiper-button .fa-arrow-right:before,
.eicon-chevron-left:before,
.eicon-chevron-right:before{
    background-color: currentColor;
}
.elementor-swiper-button .fa-arrow-left,
.eicon-chevron-left{
    transform: rotate(180deg);
}


/* Video */
.elementor-widget-video{
    border-radius: var(--border-radius-element);
    position: relative;
    overflow: hidden;
}
.elementor-custom-embed-image-overlay:after{
    content: '';
    background-color: var(--color-text-black);
    opacity: .3;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.elementor-custom-embed-play{
    z-index: 2;
}
.elementor-custom-embed-image-overlay:hover .eicon-play{
    opacity: .8 !important;
}
.eicon-play{
    background-color: currentColor;
    border-radius: 100%;
    opacity: 1 !important;
}
.eicon-play:before{
    opacity: 0;
}
.eicon-play:after{
    content: '';
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path fill="%230E6E92" d="M0,2.22v17.56c0,1.68,1.89,2.75,3.45,1.96l17.31-8.78c1.65-.84,1.65-3.08,0-3.91L3.45.27C1.89-.53,0,.55,0,2.22Z"/></svg>') center center no-repeat transparent;
    background-size: 16px;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 2px;
    top: 1px;
}
    
/* Tabbed Content */
.tabs-left .e-n-tabs-heading button{
    position: relative;
}
.tabs-left .e-n-tabs-heading button:after{
    content:'';
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    background-color: var(--color-ui-01);
}
@media only screen and (max-width: 767px) {	
   .tabs-top .e-n-tabs-heading button{
       position: relative;
   }
   .tabs-top .e-n-tabs-heading button:after{
       content:'';
       width: 100%;
       height: 1px;
       position: absolute;
       bottom: 0;
       left: 0;
       display: block;
       background-color: var(--color-ui-01);
   }
}


/* Tables */
.html-table{
   table{
      border: 0;
   }
   thead{
      background-color: var(--color-brand-01);
   }
   th{
      border-color: var(--color-text-white);
      color: var(--color-text-white);
      line-height: 1.5;
      font-size: var(--text-base);
      font-family: var(--font-family-body);
      text-transform: uppercase;
      font-weight:var(--font-weight-bold);
      padding: var(--space-sm) var(--space-base);
   }
   tbody tr:nth-child(odd){
      background-color: var(--color-ui-white);
   }
   tbody tr:nth-child(even){
      background-color: var(--color-ui-01);
   }
   td{
      border: 0;
      border-bottom: 1px solid var(--color-ui-02);
      text-align: center;
      font-size: var(--text-base);
      padding: var(--space-sm) var(--space-base);
   }
}

.html-table::-webkit-scrollbar-track {
  background: var(--color-text-white);
  border: 1px solid var(--color-brand-03);
  height: 8px;
  border-radius: 12px;
}
.html-table::-webkit-scrollbar {
  width: 8px;
  background: var(--color-text-white);
  height: 8px;
  border-radius: 12px;
}
.html-table::-webkit-scrollbar-thumb {
  background: var(--color-brand-03);
  width: 40px;
  border-radius: 12px;
}

@media only screen and (max-width: 1199px) {
   .html-table{
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      /* min-width beats an inline width:100% on the table, so the table keeps
         its full width and the wrapper scrolls instead of squishing columns. */
      table{
         min-width: 720px;
      }
   }
}


/* Forms */
form{
   .gfield_label{
      color: var(--color-text-black)  !important;
      line-height: 1.5;
      font-size: var(--text-base) !important;
      font-family: var(--font-family-body);
      font-weight: 600 !important;
      display: block;
      width: 100%;
      margin-bottom: var(--space-xs);
   }
   .gfield_required{
      text-transform: lowercase;
      color: var(--color-brand-03) !important;
      font-size: 12px !important;
      font-weight: 400 !important;
      letter-spacing: 0 !important;
      margin-left: var(--space-xxs);
   }
   .gfield_required .gfield_required_text{
      color: var(--color-brand-03) !important;
      font-size: 12px !important;
      font-weight: 400 !important;
   }
   .gfield_optional{
      text-transform: lowercase;
      color: var(--color-text-black) !important;
      font-size: 12px !important;
      font-weight: 400 !important;
      letter-spacing: 0 !important;
      margin-left: var(--space-xxs);
   }
   .gfield_optional .gfield_optional_text{
      color: var(--color-text-black) !important;
      font-size: 12px !important;
      font-weight: 400 !important;
   }
   .gfield_description--moved{
      display: none !important;
   }
   .ginput_container input[type="text"],
   .ginput_container input[type="tel"],
   .ginput_container input[type="email"],
   .ginput_container input[type="number"],
   .ginput_container input[type="url"],
   .ginput_container input[type="date"],
   .ginput_container input[type="time"],
   .ginput_container input[type="password"],
   .ginput_container_select select,
   .gfield_select,
   .gfield select,
   .ginput_complex select,
   .ginput_complex input[type="text"],
   .ginput_complex input[type="tel"],
   .ginput_complex input[type="email"],
   .ginput_complex input[type="number"],
   .ginput_complex input[type="url"]{
      width: 100% !important;
      border: 1px solid var(--color-ui-02) !important;
      border-radius: var(--border-radius-sm) !important;
      padding: var(--space-sm) var(--space-base) !important;
      height: 48px !important;
      line-height: 1.5 !important;
      box-shadow: none !important;
      font-size: 16px !important;
      color: var(--color-text-black) !important;
      background-color: var(--color-ui-white) !important;
      font-family: var(--font-family-body) !important;
      &:focus{
        border-color: var(--color-brand-03) !important;
        outline: none;
      }
   }
   .ginput_container_select select,
   .gfield_select,
   .gfield select,
   .ginput_complex select{
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%230b3858' fill-opacity='0.7' d='M6 8L0 0h12z'/></svg>");
      background-repeat: no-repeat;
      background-position: right var(--space-base) center;
      background-size: 12px 8px;
      padding-right: calc(var(--space-base) * 2 + 12px) !important;
   }
   .ginput_container textarea{
      width: 100% !important;
      border: 1px solid var(--color-ui-02) !important;
      border-radius: var(--border-radius-sm) !important;
      padding: var(--space-sm) var(--space-base) !important;
      min-height: 96px !important;
      box-shadow: none !important;
      font-size: 16px;
      color: var(--color-text-black);
      background-color: var(--color-ui-white);
      &:focus{
        border-color: var(--color-brand-03) !important;
        outline: none;
      }
   }
   .gform-field-label--type-sub{
      color: var(--color-text-black)  !important;
      line-height: 1.5;
      font-size: var(--text-base) !important;
      font-family: var(--font-family-body);
      font-weight: 600 !important;
      display: block;
      width: 100%;
      margin-bottom: var(--space-xs);
   }
   .ginput_container_fileupload{
      input[type="file"]{
         display: flex;
         align-items: center;
         width: 100%;
         min-height: 48px;
         border: 1px solid var(--color-ui-02);
         border-radius: var(--border-radius-sm);
         padding: 0 var(--space-base);
         background-color: var(--color-ui-white);
         color: var(--color-text-black);
         font-size: 16px;
         line-height: 1.5;
      }
      input[type="file"]::file-selector-button{
         margin-right: var(--space-md);
         padding: 4px 8px;
         border: 1px solid var(--color-ui-02);
         border-radius: 3px;
         background-color: #f0eff0;
         color: var(--color-text-black);
         font-family: inherit;
         font-size: 16px;
         line-height: 1.5;
         cursor: pointer;
      }
      input[type="file"]::file-selector-button:hover{
         background-color: #e2e1e2;
      }
   }
   label + .gfield_description{
      text-transform: lowercase;
      color: var(--color-text-black);
      font-size: var(--text-sm) !important;
      left: 8px;
      top: 1px;
      position: relative;
   }
   .gfield_description.gform_fileupload_rules{
      color: var(--color-text-black);
      font-size: var(--text-sm) !important;
      margin-top: var(--space-xxs);
      padding-left: 0;
   }
   .gform_fields{
      row-gap: var(--space-md) !important;
      column-gap: var(--space-md) !important;
   }
   .gform_button,
   .gform_next_button,
   .gform_previous_button,
   .gform_page_footer input[type="submit"],
   .gform_page_footer input[type="button"]{
      border-radius:var(--border-radius-button);
      padding:var(--space-sm) var(--space-md) !important;
      font-family: var(--font-family-body) !important;
      font-weight: var(--font-weight-regular) !important;
      text-transform: uppercase !important;
      line-height: 1.5 !important;
      color: var(--color-text-white) !important;
      border: 1px solid var(--color-brand-02) !important;
      background-color: var(--color-brand-02) !important;
      font-size: var(--text-base) !important;
      letter-spacing: 2px !important;
      margin-top: var(--space-sm);
      cursor: pointer;
   }
   .gform_button:hover,
   .gform_next_button:hover,
   .gform_previous_button:hover,
   .gform_page_footer input[type="submit"]:hover,
   .gform_page_footer input[type="button"]:hover{
      border: 1px solid var(--color-brand-03) !important;
      background-color: var(--color-ui-white) !important;
      color: var(--color-brand-03) !important;
   }
   .gform_previous_button{
      background-color: var(--color-ui-white) !important;
      color: var(--color-brand-02) !important;
      margin-right: var(--space-sm);
   }
   .gform_previous_button:hover{
      background-color: var(--color-brand-02) !important;
      color: var(--color-text-white) !important;
      border-color: var(--color-brand-02) !important;
   }
}

.form-wide form .gfield--width-half{
   grid-column: 1 / -1;
}

/* Multistep page indicator */
.gf_page_steps{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--space-md);
   border: 0 !important;
   padding: 0 !important;
   margin: 0 0 var(--space-md) !important;
}
.gf_page_steps .gf_step{
   display: inline-flex;
   align-items: center;
   gap: var(--space-xs);
   margin: 0 !important;
   padding: 0 !important;
   opacity: 1 !important;
   background: none !important;
}
.gf_page_steps .gf_step_number{
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 33px;
   height: 33px;
   border-radius: 50%;
   font-family: var(--font-family-body);
   font-size: var(--text-base);
   font-weight: var(--font-weight-regular);
   line-height: 1;
   letter-spacing: 2px;
   text-transform: uppercase;
   background: transparent;
   border: 1px solid var(--color-brand-03);
   color: var(--color-brand-03);
   padding: 0 0 0 2px;
}
.gf_page_steps .gf_step_number::before,
.gf_page_steps .gf_step_number::after{
   content: none !important;
   display: none !important;
   background: none !important;
}
.gf_page_steps .gf_step_active .gf_step_number{
   background: var(--color-ui-03);
   border-color: var(--color-ui-03);
   color: var(--color-text-white);
}
.gf_page_steps .gf_step_completed .gf_step_number{
   background: var(--color-brand-03);
   border-color: var(--color-brand-03);
   color: var(--color-text-white);
}
.gf_page_steps .gf_step_label{
   font-family: var(--font-family-body);
   font-size: var(--text-base);
   font-weight: var(--font-weight-regular);
   line-height: 1.5;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--color-text-black);
}
.gf_page_steps_pages{
   display: none;
}

.form-light form .gfield_label,
.form-light form .gfield_required,
.form-light form .gfield_required .gfield_required_text,
.form-light form .gfield_optional,
.form-light form .gfield_optional .gfield_optional_text,
.form-light form .gfield_description{
   color: var(--color-text-white) !important;
}

/* Newsletter, reduced: title stacked above the form with the fields running in a
   single horizontal line. Scoped to .newsletter-reduced so the same newsletter
   template used elsewhere keeps its two-column layout. */
/* Elementor's own .e-con.e-flex>.e-con-inner sets flex-direction from a variable,
   so the override has to carry those classes to win the cascade. The container's
   --gap is var(--gutter) (64px), which is far too much once the title sits
   directly above the field labels. */
.newsletter-reduced.e-con.e-flex > .e-con-inner{
   flex-direction: column;
   row-gap: var(--space-md);
}
/* Elementor puts --width:50% on both children above 768px. Setting width
   directly beats .e-con's own width:var(--width) without touching the variable. */
.newsletter-reduced > .e-con-inner > .e-con{
   width: 100%;
}
.newsletter-reduced form{
   display: flex;
   align-items: flex-end;
   gap: var(--space-md);
}
.newsletter-reduced form .gform-body{
   flex: 1 1 auto;
   min-width: 0;
}
.newsletter-reduced form .gform_fields{
   grid-template-columns: repeat(3, 1fr);
}
/* Gravity Forms gives every .gfield grid-column: 1 / -1, which would otherwise
   make each field span all three tracks. */
.newsletter-reduced form .gfield{
   grid-column: auto;
   min-width: 0;
}
.newsletter-reduced form .gform_footer{
   flex: 0 0 auto;
   margin: 0;
   padding: 0;
   width: auto;
}

/* Four items on one line gets too tight at tablet, so the button drops below the
   field row and the fields keep their three columns. Turning the form's flex axis
   vertical reuses its gap for that spacing. Gravity Forms' framework sheet pins
   margin-block:0 on the submit button at (0,6,1) specificity, so a margin on the
   button itself is not winnable from here. */
@media (max-width: 1199px){
   .newsletter-reduced form{
      flex-direction: column;
      align-items: flex-start;
   }
   .newsletter-reduced form .gform-body{
      width: 100%;
   }
}

@media (max-width: 767px){
   .newsletter-reduced form .gform_fields{
      grid-template-columns: 1fr;
   }
}

/* Header */

/* .header-top__nav nav > ul > li:first-child .elementor-nav-menu--dropdown,
.header-top__nav nav > ul > li:first-child .sub-menu {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
} */

.elementor-widget-search .e-search-input,
.elementor-widget-search .e-search-input:focus {
  color: var(--e-search-input-color);
}

.header-top__search{
  overflow: hidden;
  max-width: 372px !important;
  input{
    color: white !important;
  }
  .e-search-submit{
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: transparent !important;
    &:hover i,
    &:active i{
      color: var(--color-brand-04) !important;
    }
  }
  .e-search-input-wrapper i{
    display: none;
  }
}
.header-top__nav{
  nav > ul{
    gap: var(--space-lg);
  }
  nav > ul:after{
    display: none;
  }
  nav > ul > li{
    &:hover > a > .sub-arrow i{
      transform: rotate(180deg);
    }
  }
  nav > ul > li > a{
    padding-left: 0 !important;
    padding-right: 0 !important;
    > .sub-arrow{
      padding-left: 8px;
    }
    > .sub-arrow i{
      color: var(--color-brand-04) !important;
      font-size: 10px;
      transition: transform .25s ease-in-out;
    }
    &:hover,
    &:active{
      color: var(--color-brand-04) !important;
    }
  }
  nav > ul ul > li > a{
    border-left: 0 !important;
  }
}
.header-bottom__nav{
  nav > ul{
    justify-content: space-between !important;
    gap: 0;
    width: 100%;
  }
  nav > ul > li{
    &:hover > a > .sub-arrow i{
      transform: rotate(180deg);
    }
  }
  nav > ul > li > a{
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 15px !important;
    padding-bottom: 42px !important;
    > .sub-arrow{
      padding-left: 8px;
    }
    > .sub-arrow i{
      color: var(--color-brand-04) !important;
      font-size: 10px;
      transition: transform .25s ease-in-out;
    }
    &:after{
      content: '';
      height: 2px;
      width: 100%;
      background-color: var(--color-brand-04);
      display: block;
      position: absolute;
      top: 45px;
    }
    &:hover,
    &:active{
      color: var(--color-brand-04) !important;
    }
  }
  nav > ul ul > li > a{
    border-left: 0 !important;
    min-width: 320px;
  }
  nav > ul > li.menu-item-2509 > a[aria-expanded="true"] ~ ul{
    display: grid !important;
  }
  nav > ul > li.menu-item-2509 > ul{
    grid-template-columns: 1fr 1fr;
    width: 550px;
    margin-left: -225px !important;
  }
  nav > ul > li.menu-item-2509 > ul > li > a{
    min-width: 0;
    width: 275px;
  }
}

@media(max-width: 1199px){
  .header-top{
    border-bottom: 1px solid rgba(244, 248, 250, 0.20);
  }
}

/* Mobile Menu */
.off-canvas-toggle a[aria-expanded="true"] i:before{
  content: '\f00d';
}
.elementor-widget-off-canvas{
  .e-off-canvas__overlay{
    background-color: transparent !important;
  }
  .e-off-canvas__content{
    width: 100%;
  }
  .e-off-canvas__main{
    height: calc(100% - 129px);
    top: 129px;
    overflow-y: auto;
  }
}
.e-off-canvas .elementor-nav-menu--main{
  ul {
    position: relative;
    height: 100%;
  }
  ul li{
    position: relative;
  }
  ul li > .submenu-toggle {
    cursor: pointer;
    position: absolute;
    width: 40px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
  }
  ul li a{
    margin: 0;
    border: 0;
    padding-top: var(--space-md) !important;
    padding-bottom: var(--space-md) !important;
  }
  ul li a:after{
    content: '';
    opacity: 1 !important;
    height: 1px;
    width: 100%;
    background-color: rgba(119, 120, 123, 0.20);
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  ul li a > span{
    display: none !important;
  }
  ul ul {
    position: absolute;
    left: 100vw !important;
    transition: left 0.2s ease-in-out;
    z-index: 3;
    background-color: white;
    width: 100% !important;
    top: 0 !important;
    transition: none;
    margin-left: 0 !important;
    margin-top: 0 !important;
  }
  ul li.submenu-active {
    position: static;
  }
  ul li.submenu-active > ul {
    left: 0 !important;
    transition: left 0.2s ease-in-out;
    z-index: 9;
    display: block !important; 
  }
  button.submenu-toggle{
    position: relative;
    width: 40px;
    height: 40px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 0;
    line-height: 1.5;
    color: var(--color-text-black);
    font-weight: var(--font-weight-bold);
    background-color: transparent;
    padding: 0;
  }
  button.submenu-toggle:before{
    content:'';
    width: 10px;
    height: 10px;
    display: block;
    background-color: var(--color-text-black);
    mask-image: url('data:image/svg+xml,<svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.703125 8.80859C0.527344 8.80859 0.371094 8.75 0.253906 8.63281C0 8.39844 0 7.98828 0.253906 7.75391L3.55469 4.43359L0.253906 1.13281C0 0.898438 0 0.488281 0.253906 0.253906C0.488281 0 0.898438 0 1.13281 0.253906L4.88281 4.00391C5.13672 4.23828 5.13672 4.64844 4.88281 4.88281L1.13281 8.63281C1.01562 8.75 0.859375 8.80859 0.703125 8.80859Z" fill="%230B3858"/></svg>');
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }
  .submenu-back{
    border-top: 1px solid var(--color-brand-05);
    background-color: var(--color-text-black);
  }
  button.submenu-back-button{
    position: relative;
    display: flex;
    align-items: center;
    text-decoration: none;
    border: 0;
    line-height: 1.5;
    padding: var(--space-md) var(--space-base);
    color: white;
    font-weight: 400;
    background-color: transparent;
    text-transform: none;
    letter-spacing: 0;
    font-size: 16px;
  }
  .submenu-back-button:before{
    content:'';
    width: 12px;
    height: 12px;
    margin-right: 5px;
    display: block;
    background-color: white;
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>');
    mask-repeat: no-repeat;
    mask-position: left center;
    mask-size: contain;
  }
}
.mobile-nav__search{
  border-top: 1px solid var(--color-brand-05);
}
.mobile-nav__utility{
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-md);
  i{
    width: 20px;
    color: var(--color-brand-03);
  }
  a{
    text-decoration: none;
    color: var(--color-text-black);
  }
}
@media(max-width: 1199px){
  .logged-in .elementor-widget-off-canvas .e-off-canvas__main{
    height: calc(100% - 164px);
    top: 164px;
  }
}
@media(max-width: 767px){
  .logged-in .elementor-widget-off-canvas .e-off-canvas__main{
    height: calc(100% - 178px);
    top: 178px;
  }
}

/* Footer */
.footer-top{
  p{
    color: white;
  }
}

/* Hero Banners */
.homepage-hero .swiper-pagination-progressbar {
  width: 100% !important;
  margin: 0;
}
.homepage-hero .e-con.e-flex>.e-con-inner{
  padding-top: 0;
  padding-bottom: 0;
}

/* Cards / Buckets */
.primary-buckets{
  .swiper-pagination-progressbar{
    background-color: #e0e0e1;
    max-width: 300px;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    left: 50% !important;
  }
  .swiper-pagination-progressbar-fill{
    background-color: var(--color-brand-03) !important;
  }
}
.primary-bucket{
  img{
    transition: transform .25s ease-in-out;
  }
  a{
    outline: 0 !important;
  }
  a:hover,
  a:active{
    img{
      transform: scale(1.1);
    }
  }
}
.secondary-buckets{
  .swiper-pagination-progressbar{
    background-color: #e0e0e1;
    max-width: 800px;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    left: 50% !important;
  }
  .swiper-pagination-progressbar-fill{
    background-color: var(--color-brand-03) !important;
  }
}

/* Breadcrumbs */
.hfe-breadcrumbs-item{
  position: relative;
}
.hfe-breadcrumbs-first{
  &:hover,
  &:active{
    svg path{
      fill: var(--color-brand-04);
    }
  }
  a{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .hfe-breadcrumbs-home-icon{
    margin-right: 0 !important;
    svg{
      width: 18px;
    }
  }
}
@media(max-width: 767px){
  .elementor-widget-hfe-breadcrumbs-widget{
    width: 100%;
    > div{
      width: 100%;
    }
    nav{
      position: relative;
      width: 100%;
    }
    nav:after{
      content: '';
      width: 100px;
      height: 100%;
      display: block;
      right: 0;
      top: 0;
      position: absolute;
      pointer-events: none;
      background: linear-gradient(270deg, #F4F8FA 0%, rgba(244, 248, 250, 0.00) 100%);
    }
    ul{
      white-space: nowrap;
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
      padding-right: 100px;
    }
    ul::-webkit-scrollbar { 
        display: none;
    }
  }
}

/* Accordion */
.elementor-widget-n-accordion{
  div[role="region"]{
    border-top: 0 !important;
  }
}

/* Gallery */
/* Outlined box for the category filter. Elementor Pro's Filter Bar controls only
   expose text and pointer colors, so the padding, border and square corners have
   to live here. Matching Elementor's own a.elementor-item.elementor-gallery-title
   selector wins the cascade without !important. Radius is pinned to 0 so a global
   button radius can't round the corners back off. */
.elementor-widget-gallery{
  a.elementor-item.elementor-gallery-title{
    padding: 12px 24px;
    border-radius: 0;
    border: 1px solid var(--color-brand-03);
    &.elementor-item-active,
    &:hover{
      color: var(--color-ui-white);
      background-color: var(--color-brand-03);
    }
  }
}

/* Gallery filter — on tablet/mobile the chip bar wraps into ragged rows, so it
   is replaced by a native <select> */
.gallery-filter-select {
  display: none; /* desktop: chips are shown instead */
}

@media (max-width: 1199px) {
  .elementor-widget-gallery .elementor-gallery__titles-container {
    display: none; /* kept in DOM so Elementor's click filtering still works */
  }
  .gallery-filter-select {
    display: block;
    margin-inline: auto;
    margin-bottom: var(--gutter-sm);
    width: 264px; /* fixed width per Figma "Filter" spec, not auto-hugging text */
    max-width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    appearance: base-select;
    padding: var(--space-sm) calc(var(--space-md) + 24px) var(--space-sm) var(--space-md);
    border: 1px solid var(--color-brand-03);
    border-radius: 99px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23946937' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    background-size: 14px;
    color: var(--color-brand-03);
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-base);
    line-height: 1.5;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: none;
  }

  .gallery-filter-select:focus {
    border-color: var(--color-brand-03);
    outline: none;
  }
  /* Square off the pill's bottom corners ONLY while the picker is open */
  .gallery-filter-select:open {
    /*border-bottom-left-radius: 0;*/
    /*border-bottom-right-radius: 0;*/
      border-radius: 0;

  }
  .gallery-filter-select::picker(select) {
    appearance: base-select;
    box-sizing: border-box;
    width: anchor-size(width);
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-brand-03);
    border-top: none;
    border-radius: 0;
    background-color: #fff;
    max-height: 60vh;
    overflow-y: auto;
  }

  .gallery-filter-select::picker-icon {
    display: none;
  }

  .gallery-filter-select option:disabled {
    display: none;
  }
  .gallery-filter-select option {
    padding: var(--space-sm) var(--space-md);
    color: var(--color-brand-03);
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-base);
    line-height: 1.5;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
  }
  .gallery-filter-select option:hover,
  .gallery-filter-select option:focus,
  .gallery-filter-select option:checked {
    background-color: var(--color-brand-03);
    color: #fff;
  }
  /* Drop the selected-row checkmark so labels stay flush-left like the chips. */
  .gallery-filter-select option::checkmark {
    display: none;
  }
}

/* Flip Box — show the back layer by default on tablet/mobile. */
@media (max-width: 1199px), (hover: none) {
  .elementor-flip-box__layer {
    transition: none !important;
  }
  .elementor-flip-box__front {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  .elementor-flip-box__back {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* Flip Box: put the back-layer copy/button gap on the spacing scale
   instead of Elementor's hard-coded 20px. */
.elementor-flip-box__back .elementor-flip-box__layer__title:not(:last-child),
.elementor-flip-box__back .elementor-flip-box__layer__description:not(:last-child) {
  margin-bottom: 0;
}

.elementor-flip-box__back .elementor-flip-box__button.elementor-button {
  margin-top: var(--space-base);
}

/* Search results: restore post-content padding that Astra's blog-layout-5
   dynamic CSS zeroes out at the tablet breakpoint (max-width: 921px). */
@media (max-width: 921px) {
  body.search.ast-separate-container .ast-blog-layout-5-grid .post-content {
    padding: var(--space-md) !important;
  }
}

/* Map hotspots are decorative markers with no link or tooltip, but Elementor
   Pro sets cursor:pointer on every hotspot button. The :not(:has(a)) guard
   means a hotspot that later gets a link keeps its pointer. */
.e-hotspot:not(:has(a)) .e-hotspot__button {
  cursor: default;
}

/* Search: no results ===========================
   Astra's no-results template prints two submit controls and then hides the
   magnifier one (.search .site-main .ast-search-submit{display:none}), so the
   only visible control is the bare <input type="submit">. Astra gives it just
   `padding:10px 15px;border-radius:2px;border:0`, leaving a browser-default
   grey button. These rules put the field and button on the same recipe as the
   Gravity Forms controls. Selectors carry four classes, which beats Astra's
   `.search .search-submit`, so no !important is needed. */

/* Astra's <p> margin-bottom (1.75em) was the only gap between the copy and the
   form. Adjacent margins collapse, so this value is the resulting space. */
.no-results .page-content .search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.no-results .search-form > label {
  display: block;
  margin: 0;
}

.no-results .search-form .search-field {
  width: 100%;
  max-width: 320px;
  height: 48px;
  padding: var(--space-sm) var(--space-base);
  border: 1px solid var(--color-ui-02);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-ui-white);
  color: var(--color-text-black);
  font-size: var(--text-base);
  line-height: 1.5;
}

.no-results .search-form .search-field:focus {
  border-color: var(--color-brand-03);
  outline: none;
}

/* Height is pinned to the field's 48px so the two line up; every other value
   matches the Gravity Forms button block above. */
.no-results .search-form input[type="submit"].search-submit {
  height: 48px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-brand-02);
  border-radius: var(--border-radius-button);
  background-color: var(--color-brand-02);
  color: var(--color-text-white);
  font-family: var(--font-family-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}

.no-results .search-form input[type="submit"].search-submit:hover,
.no-results .search-form input[type="submit"].search-submit:focus {
  border-color: var(--color-brand-03);
  background-color: var(--color-ui-white);
  color: var(--color-brand-03);
}

/* Search results ===============================
   Astra paints the archive title block #eee and sets `margin:0` on it inside
   both the (max-width:1200px) and (min-width:1201px) blocks, so its own
   `margin-bottom:2.5em` never survives and the block butts against the first
   result. The #eee also sits on a #F5F5F5 page against #FFFFFF result cards,
   so it reads as a muddy band rather than a panel. Drop the background, drop
   the now-redundant bottom padding, and use a real gap instead. Horizontal
   padding is left alone so the title stays aligned with the card copy.
   Specificity is (0,3,1) against Astra's (0,2,0), so this wins inside the
   media queries without !important. */
body.search.ast-separate-container .ast-archive-description {
/*   background-color: transparent; */
  padding-bottom: 0;
  margin-bottom: var(--space-lg);
}

/* The child theme sets a link color but no global a:hover, so result titles
   and Read More links had no hover feedback at all. Scoped to search results
   for now; the same gap exists site-wide. --color-brand-03 is the theme's
   light-background hover accent, matching the Gravity Forms buttons. */
.search .site-main .entry-title a,
.search .site-main .ast-read-more-container a {
  transition: color .2s ease-in-out;
}

.search .site-main .entry-title a:hover,
.search .site-main .entry-title a:focus-visible,
.search .site-main .ast-read-more-container a:hover,
.search .site-main .ast-read-more-container a:focus-visible {
  color: var(--color-brand-03);
}

/* Underline on the text link only, not the heading. */
.search .site-main .ast-read-more-container a:hover,
.search .site-main .ast-read-more-container a:focus-visible {
  text-decoration: underline;
}

/* Blog meta is already off in the Customizer, but Astra still prints the
   wrapper and `.search .entry-header` keeps its 1em margin, leaving 16px of
   dead space above every excerpt. `:empty` will not do here: the element
   contains whitespace, which CSS :empty rejects. */
.search .site-main .entry-header.ast-blog-meta-container {
  display: none;
}

/* Elementor's lightbox is the only place the nav <i> carries a background of
its own. mask-image clips an element's background along with everything else
it paints, so that black pad was being cut into a second, larger copy of the
arrow behind the white one. */
.elementor-lightbox .elementor-swiper-button-prev i,
.elementor-lightbox .elementor-swiper-button-next i,
.elementor-lightbox .elementor-swiper-button-prev i:active,
.elementor-lightbox .elementor-swiper-button-next i:active {
	background-color: transparent !important;
}

.elementor-lightbox .elementor-swiper-button-prev i,
.elementor-lightbox .elementor-swiper-button-next i,
.elementor-lightbox .elementor-swiper-button-prev i:active,
.elementor-lightbox .elementor-swiper-button-next i:active {
  background-color: transparent !important;
  padding: 0 !important;
}