/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/
html { scroll-behavior: smooth!important; }
.fusion-title.sr-wide h1,
.fusion-title.sr-wide h2,
.fusion-title.sr-wide h3,
.sr-wide{ font-variation-settings:"wdth" 116; }
.fusion-title.sr-wide-xl h1{ font-variation-settings:"wdth" 122; }
.sr-serif em{ font-style:italic; color:var(--awb-color4); }
.sr-serif-light em{ font-style:italic; color:var(--awb-custom_color_1); }
.gform_wrapper .gfield_error .gfield_validation_message, .gform_wrapper .gfield_error label, .gform_wrapper .gfield_required {
    color:var(--awb-color4) !important;
}
#gform_submit_button_1.gform_button { 
    background-color: var(--awb-color4) !important; text-transform: uppercase; font-family:Archivo; font-size: 13px;  font-weight: 600;  letter-spacing: 1.77996px; line-height: 21.06px } 
#gform_submit_button_1.gform_button:hover { 
    background-color: var(--awb-color5) !important; } 
.add-box-shadow {
    box-shadow: 0 18px 50px -28px rgba(23, 16, 15, .45);
}
.gfield_description { font-size:13px!important}
/* ------------------------------------------------------------
   1. HERO SCRIM
   Avada's container overlay is a flat colour only. The design
   needs a gradient so the wordmark reads over a mid-tone photo.
   Container CSS class: sr-hero
   ------------------------------------------------------------ */
.sr-hero{ position:relative; isolation:isolate; }
.sr-hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,
    rgba(6,4,4,.78) 0%, rgba(6,4,4,.10) 42%, rgba(6,4,4,.34) 100%);
}
.sr-hero > .fusion-builder-row{ position:relative; z-index:2; }

@media (max-width:640px){
	.hero-p p { line-height:24px}
}

/* ------------------------------------------------------------
   2. SCROLL CUE — animated line with an arrowhead
   Text element with CSS class: sr-cue, containing just "Scroll"
   ------------------------------------------------------------ */
.sr-cue{
  position:relative;
  display:inline-flex; align-items:center; gap:12px;
  color:rgba(255,255,255,.85);
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
}
/* the line */
.sr-cue::after{
  content:""; width:1px; height:44px;
  background:rgba(255,255,255,.6);
  animation:sr-cue-bob 2.4s ease-in-out infinite;
}
/* the arrowhead, centred on the bottom of the line */
.sr-cue::before{
  content:""; position:absolute; right:-4px; bottom:0;
  width:9px; height:9px; box-sizing:border-box;
  border-left:1px solid rgba(255,255,255,.6);
  border-bottom:1px solid rgba(255,255,255,.6);
  rotate:-45deg;
  animation:sr-cue-bob 2.4s ease-in-out infinite;
}
@keyframes sr-cue-bob{
  0%,100%{ translate:0 0;   opacity:.65; }
  50%    { translate:0 8px; opacity:1;   }
}

/* ------------------------------------------------------------
   3. SERVICE CARD HOVER
   Outer column CSS class: sr-card
   Lift, the maroon shard that echoes the diagonal in the
   Sparrow Road ad artwork, and the growing rule on "Explore".
   ------------------------------------------------------------ */
.sr-card{
  overflow:hidden!important; position:relative;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),
             box-shadow .35s, border-color .35s;
}
.sr-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 50px -28px rgba(23,16,15,.45);
}

/* --- THE SHARD ---------------------------------------------
   In the nested-column build there is no Image element: the
   photo is a background image on the inner column's wrapper,
   which Avada tags .fusion-column-has-bg-image. That is the
   hook — semantic rather than an index, so it survives adding
   or reordering cards. overflow:hidden is what lets the shard
   park below the fold line and slide up on hover.
   .fusion-imageframe is kept as a fallback for any card still
   built with an Image element.
   ------------------------------------------------------------ */
.sr-card .fusion-column-has-bg-image,
.sr-card .fusion-imageframe{
  position:relative;
  overflow:hidden!important;   /* belt and braces only — the clip-path below is
                        what actually hides the shard, so this rule
                        being overridden by Avada no longer matters */
}
.sr-card .fusion-column-has-bg-image::after,
.sr-card .fusion-imageframe::after{
  content:"";
  position:absolute; z-index:2;
  left:-12%; right:-12%; bottom:0;
  height:78px;
  background:var(--awb-color4);
  /* Collapsed flat against the bottom edge: all four points sit on
     y=100%, so the shape has zero area and paints nothing. No reliance
     on the parent clipping it. */
  clip-path:polygon(0 100%, 16% 100%, 100% 100%, 100% 100%);
  transition:clip-path .45s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.sr-card:hover .fusion-column-has-bg-image::after,
.sr-card:focus-within .fusion-column-has-bg-image::after,
.sr-card:hover .fusion-imageframe::after,
.sr-card:focus-within .fusion-imageframe::after{
  clip-path:polygon(0 100%, 16% 0, 100% 0, 100% 100%);
}

/* card label sitting on the image.
   Pulled up over the photo with a negative margin rather than
   absolute positioning, so it anchors to the bottom of the image
   whatever height the image is. Class: `sr-card-label`
   z-index 3 keeps it above the shard (z-index 2) as that slides up. */
.sr-card .sr-card-label{
  position:relative; z-index:3;
  margin:-55px 0 0 !important;
  padding:0 22px; color:#fff;
}
.sr-card .sr-card-label h2,
.sr-card .sr-card-label h3{ color:#fff !important; margin:0; }
/* A negative top margin lifts the label AND every sibling after it,
   which was dragging the first line of body copy up under the photo.
   Pushing the next element back down by the same 68px cancels that,
   so only the label moves. */
.sr-card .sr-card-label + .fusion-text{ margin-top:68px; }

@media (max-width:640px){
  .sr-card .sr-card-label + .fusion-text{ margin-top:20px; }
}

/* the "Explore" link's growing rule */
.sr-card-link{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.sr-card-link::after{
  content:""; width:18px; height:1px; background:currentColor; transition:width .3s;
}
.sr-card:hover .sr-card-link::after{ width:32px; }

/* ------------------------------------------------------------
   4. NAV UNDERLINE WIPE
   ------------------------------------------------------------ */
.fusion-header .fusion-menu > li > a{ position:relative; }
.fusion-header .fusion-menu > li > a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:#75231F; transition:right .28s cubic-bezier(.2,.7,.3,1);
}
.fusion-header .fusion-menu > li > a:hover::after,
.fusion-header .fusion-menu > li.current-menu-item > a::after { right:0; }
.fusion-header .fusion-menu > li.sr-nav-cta > a::after { display:none; }
.fusion-header .fusion-menu > li.sr-nav-cta > a { background:var(--awb-color4)!important; color:#fff !important; padding:0px 18px!important; border-radius:2px!important;}
.fusion-header .fusion-menu > li.sr-nav-cta > a:hover{ background:var(--awb-color5)!important; }

/* ------------------------------------------------------------
   5. DIAGONAL WASH on the tinted sections
   Container CSS class: sr-tinted  (set the background colour
   itself in the builder — this only adds the diagonal)
   ------------------------------------------------------------ */
.sr-tinted{ position:relative; overflow:hidden; }
.sr-tinted::before{
  content:""; position:absolute; top:0; bottom:0; right:-10%; width:26%;
  background:#75231F; opacity:.055; pointer-events:none;
  clip-path:polygon(34% 0, 100% 0, 100% 100%, 0 100%);
}
.sr-tinted > .fusion-builder-row{ position:relative; z-index:1; }

/* ------------------------------------------------------------
   6. TESTIMONIAL TICKER — optional
   Only if you want the continuous scroll rather than Avada's
   built-in Testimonials carousel. The carousel is fine and is
   client-editable; this is the nicer-looking option.
   ------------------------------------------------------------ */
.sr-ticker{ overflow:hidden; }
.sr-ticker .sr-track{ display:flex; width:max-content; animation:sr-slide 52s linear infinite; }
.sr-ticker:hover .sr-track{ animation-play-state:paused; }
@keyframes sr-slide{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.sr-ticker .sr-quote{ flex:none; border-left:1px solid rgba(255,255,255,.22); }

/* ------------------------------------------------------------
   7. ACCESSIBILITY — required, the design leans on motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}
a:focus-visible, button:focus-visible, .fusion-button:focus-visible{
  outline:2px solid #75231F; outline-offset:3px;
}

@media (max-width:640px){
  .sr-tinted::before{ display:none; }
  /* was .fusion-imageframe::before — updated for the nested-column build */
  .sr-card .fusion-column-has-bg-image::after,
  .sr-card .fusion-imageframe::after{ height:56px; }
  .sr-card .sr-card-label{ margin:-52px 0 26px !important; }
}

/* ------------------------------------------------------------
   8. FOOTER
   ------------------------------------------------------------ */
.sr-footer{ background:var(--awb-color4); color:#fff; }
.sr-footer a{ color:rgba(255,255,255,.92); text-decoration:none; }
.sr-footer a:hover{ opacity:.65; text-decoration:underline; text-underline-offset:4px; }
.sr-footer h3, .sr-footer .sr-foot-title{
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:rgba(255,255,255,.72);
}
.sr-footer .sr-tagline{
  font-family:"Newsreader",Georgia,serif; font-style:italic;
  font-size:1.4rem; color:rgba(255,255,255,.85); max-width:26ch; line-height:1.4;
}
.sr-values{ letter-spacing:.28em; text-transform:uppercase; font-weight:600; }

/* ------------------------------------------------------------
   9. TESTIMONIALS — Avada Testimonials element, design styling
   Add CSS class  sr-quotes  to the Testimonials element
   ------------------------------------------------------------ */

/* --- the quote --- */
.sr-quotes .awb-quote-content{
  font-family:"Newsreader", Georgia, serif !important;
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.2rem, 1.1rem + .4vw, 1.4rem) !important;
  line-height:1.42 !important;
  letter-spacing:0;
  color:#fff !important;
  text-align:center;
  max-width:46ch;
  margin:0 auto;
  text-wrap:balance;
}
.sr-quotes .awb-quote-content::before{ content:"\201C"; }
.sr-quotes .awb-quote-content::after { content:"\201D"; }

/* --- attribution --- */
.sr-quotes .author{ margin-top:18px; text-align:center; }
.sr-quotes .company-name,
.sr-quotes .testimonial-name,
.sr-quotes .testimonial-company{
  font-family:"Archivo", sans-serif !important;
  font-style:normal !important;
  font-size:clamp(.74rem, .72rem + .1vw, .8rem) !important;
  font-weight:600 !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7) !important;
}
.sr-quotes .awb-testimonial-sep{ font-size:0 !important; }
.sr-quotes .awb-testimonial-sep::after{
  content:"\00A0\00B7\00A0";   /* nbsp both sides — plain spaces collapse */
  font-size:clamp(.74rem, .72rem + .1vw, .8rem);
  letter-spacing:.14em;
}

/* --- strip the speech bubble, borders, backgrounds --- */
.sr-quotes .testimonials-shortcode-blockquote,
.sr-quotes .awb-quote,
.sr-quotes .review{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
}
.sr-quotes .testimonials-shortcode-blockquote::before,
.sr-quotes .testimonials-shortcode-blockquote::after,
.sr-quotes .awb-quote::before,
.sr-quotes .awb-quote::after{ display:none !important; }

/* --- slide layout --- */
.sr-quotes .swiper-slide.review{
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:0 clamp(20px, 5vw, 60px) !important;
  box-sizing:border-box;
}

/* --- pagination bullets --- */
.sr-quotes .swiper-pagination-bullet{
  background:rgba(255,255,255,.38) !important;
  opacity:1 !important;
  width:7px; height:7px; border-radius:50%;
  transition:background .25s, transform .25s;
}
.sr-quotes .swiper-pagination-bullet-active{
  background:#fff !important;
  transform:scale(1.25);
}
.sr-quotes .swiper-pagination{ margin-top:34px !important; }

/* --- arrows, if you turn them on --- */
.sr-quotes .awb-swiper-button{
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
  border-radius:50%;
}
.sr-quotes .awb-swiper-button:hover{ background:rgba(255,255,255,.24) !important; }

@media (max-width:640px){
  .sr-quotes .awb-quote-content{ max-width:100%; }
}
/* ------------------------------------------------------------
   10. FLUID DISPLAY TYPE
   ------------------------------------------------------------ */
:root{
  --sr-fs-statement: clamp(2.6rem, 1.6rem + 4.2vw, 5.6rem);
  --sr-fs-display:   clamp(2rem,   1.5rem + 2.2vw, 3.6rem);
  --sr-fs-lede:      clamp(1.5rem, 1.3rem + .9vw,  2.1rem);
}

.sr-statement.fusion-title > *,
.sr-why-title.fusion-title > *,
.sr-cta-statement.fusion-title > *{ font-size:1em !important; }

.sr-statement.fusion-title{
  --awb-font-size:var(--sr-fs-statement) !important;
  font-size:var(--sr-fs-statement) !important;
  --awb-line-height:1.1 !important;
  line-height:1.1 !important;
}
.sr-statement.fusion-title > *{
  font-family:"Newsreader", Georgia, serif !important;
  font-weight:300 !important;
  letter-spacing:-.015em; line-height:1.1;
  text-wrap:balance; max-width:20ch;
}

.sr-why-title.fusion-title{
  --awb-font-size:var(--sr-fs-display) !important;
  font-size:var(--sr-fs-display) !important;
  --awb-line-height:1.02 !important; line-height:1.02 !important;
}
.sr-why-title.fusion-title > *{
  font-family:"Archivo", sans-serif !important;
  font-weight:700 !important; font-variation-settings:"wdth" 108;
  letter-spacing:-.01em; line-height:1.02; text-wrap:balance;
}

.sr-lede{ min-width:0; }
.sr-lede,
.sr-lede.fusion-text{
  --awb-font-size:var(--sr-fs-lede) !important;
  font-size:var(--sr-fs-lede) !important;
  --awb-line-height:1.34 !important;
}
.sr-lede p,
.sr-lede.fusion-text p{
  font-family:"Newsreader", Georgia, serif !important;
  font-weight:300 !important; font-size:1em !important;
  line-height:1.34 !important; letter-spacing:0; text-wrap:pretty;
}

.sr-cta-statement.fusion-title{
  --awb-font-size:var(--sr-fs-display) !important;
  font-size:var(--sr-fs-display) !important;
  --awb-line-height:1.14 !important; line-height:1.14 !important;
}
.sr-cta-statement.fusion-title > *{
  font-family:"Newsreader", Georgia, serif !important;
  font-weight:300 !important; letter-spacing:-.01em; line-height:1.14;
  text-wrap:balance; max-width:26ch; margin-inline:auto;
}

.sr-statement em,
.sr-cta-statement em{ font-style:italic; }

@media (max-width:640px){
  .sr-statement.fusion-title > *,
  .sr-cta-statement.fusion-title > *{ max-width:none; }
}

/* ------------------------------------------------------------
   11. HERO WORDMARK
   ------------------------------------------------------------ */
:root{
  --sr-fs-wordmark:      clamp(2.2rem, 7.4vw, 6.2rem);
  --sr-fs-wordmark-page: clamp(2rem,   6.2vw, 5.2rem);
}

.sr-wordmark.fusion-title,
.fusion-title.sr-wide-xl{
  --awb-font-size:var(--sr-fs-wordmark) !important;
  font-size:var(--sr-fs-wordmark) !important;
  --awb-line-height:.95 !important;
  line-height:.95 !important;
  margin:0 !important;
}
.sr-wordmark.fusion-title > *,
.fusion-title.sr-wide-xl > *{
  font-size:1em !important;
  font-family:"Archivo", "Helvetica Neue", Arial, sans-serif !important;
  font-weight:700 !important;
  font-variation-settings:"wdth" 122;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:.95;
  color:#fff !important;
  margin:0 !important;
  text-wrap:balance;
}

.sr-wide{ font-stretch:116%; font-variation-settings:"wdth" 116; }
.fusion-title.sr-wide-xl h1{ font-stretch:122%; font-variation-settings:"wdth" 122; }

/* interior-page hero — same treatment, smaller scale */
.sr-hero-page .sr-wordmark.fusion-title,
.sr-hero-page .fusion-title.sr-wide-xl{
  --awb-font-size:var(--sr-fs-wordmark-page) !important;
  font-size:var(--sr-fs-wordmark-page) !important;
}