.elementor-982 .elementor-element.elementor-element-a197929{--display:flex;--min-height:30rem;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--border-radius:0rem 0rem 2rem 2rem;}.elementor-982 .elementor-element.elementor-element-a197929:not(.elementor-motion-effects-element-type-background), .elementor-982 .elementor-element.elementor-element-a197929 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://i0.wp.com/try-beauty.com/wp-content/uploads/2025/06/page-banner.jpg?fit=1920%2C1080&ssl=1");background-position:center center;background-repeat:repeat;background-size:cover;}.elementor-widget-heading .elementor-heading-title{color:var( --e-global-color-primary );}.elementor-982 .elementor-element.elementor-element-74ec436{text-align:center;}.elementor-982 .elementor-element.elementor-element-74ec436 .elementor-heading-title{font-size:4.5rem;color:#FFFFFF;}.elementor-982 .elementor-element.elementor-element-70ff000{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:2rem 2rem;--row-gap:2rem;--column-gap:2rem;--overflow:hidden;--padding-top:1rem;--padding-bottom:1rem;--padding-left:3rem;--padding-right:3rem;}.elementor-982 .elementor-element.elementor-element-c85c337{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -15px) 0px;}.elementor-982 .elementor-element.elementor-element-c85c337 .woocommerce-breadcrumb{color:var( --e-global-color-primary );font-size:0.8rem;text-align:left;}.elementor-982 .elementor-element.elementor-element-c85c337 .woocommerce-breadcrumb > a{color:var( --e-global-color-primary );}.elementor-982 .elementor-element.elementor-element-a861367{--display:flex;}.elementor-widget-text-editor{color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}@media(max-width:767px){.elementor-982 .elementor-element.elementor-element-a197929{--min-height:20rem;}.elementor-982 .elementor-element.elementor-element-a197929:not(.elementor-motion-effects-element-type-background), .elementor-982 .elementor-element.elementor-element-a197929 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center left;}.elementor-982 .elementor-element.elementor-element-74ec436 .elementor-heading-title{font-size:3rem;}.elementor-982 .elementor-element.elementor-element-70ff000{--flex-wrap:nowrap;--padding-top:1rem;--padding-bottom:1rem;--padding-left:1rem;--padding-right:1rem;}}/* Start custom CSS for woocommerce-breadcrumb, class: .elementor-element-c85c337 */nav.woocommerce-breadcrumb{
    margin: 0px !important;
    overflow-x: hidden;
    max-height: 1.2rem;
    min-width: 1000rem !important;
}

/* 1. Make the container a positioning context */
.gradient-overlay {
  position: relative;
  overflow: hidden; /* Prevents the overlay from spilling outside */
}

/* 2. Create a ::before that covers the entire container */
.gradient-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 5rem;
  height: 100%;
  
  /* ← Here’s your transparent→white gradient: */
  background: linear-gradient(
    to right,                  /* top = clear, bottom = white */
    rgba(255, 255, 255, 0) 0%,  /* fully transparent at the very top */
    rgba(255, 255, 255, 1) 100% /* fully white at the very bottom */
  );
  
  z-index: 10;               /* Sits on top of all inner widgets */
  pointer-events: none;      /* Let clicks pass through to underlying buttons/links */
}

/* 3. Force all inner Elementor widgets/content to sit beneath the overlay */
.gradient-overlay .elementor-widget-container,
.gradient-overlay .elementor-widget-wrap,
.gradient-overlay .elementor-column-wrap {
  position: relative;
  z-index: 1;
}/* End custom CSS */