.elementor-11764 .elementor-element.elementor-element-45361fd7{--display:flex;--min-height:450px;--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;--overlay-opacity:0.4;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11764 .elementor-element.elementor-element-45361fd7::before, .elementor-11764 .elementor-element.elementor-element-45361fd7 > .elementor-background-video-container::before, .elementor-11764 .elementor-element.elementor-element-45361fd7 > .e-con-inner > .elementor-background-video-container::before, .elementor-11764 .elementor-element.elementor-element-45361fd7 > .elementor-background-slideshow::before, .elementor-11764 .elementor-element.elementor-element-45361fd7 > .e-con-inner > .elementor-background-slideshow::before, .elementor-11764 .elementor-element.elementor-element-45361fd7 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-11764 .elementor-element.elementor-element-c9eca48{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-11764 .elementor-element.elementor-element-45361fd7{--width:100%;}}@media(min-width:2400px){.elementor-11764 .elementor-element.elementor-element-45361fd7{--overlay-opacity:0;}}/* Start custom CSS for html, class: .elementor-element-c9eca48 *//* 1) Full-bleed wrapper, ignores parent padding */
  .grid-trail-wrapper {
    margin-bottom: -35px !important;
    position: relative;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    height: 550px;             /* or change to 100vh */
    overflow: hidden;
  }

  /* 2) Canvas container covers 100% of wrapper */
  [id^="grid-trail-background-"] {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }

  /* 3) Force the p5 <canvas> to scale to its parent */
  [id^="grid-trail-background-"] canvas {
    position: absolute !important;
    top: 0; left: 0;
    width: 100%  !important;
    height: 100% !important;
    pointer-events: none;
    background: transparent !important;
    z-index: -1 !important;
  }

  /* 4) Centered signup box */
  .content-grid {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
    max-width: 600px;
    padding: 1rem;
    text-align: center;
  }

  /* 5) Heading style */
  .col {
    font-size: 5em;
    font-family: 'Scripto', sans-serif;
    line-height: 1.1em;
    margin-bottom: 1rem;
    color: #fdf3c8 !important;
  }
  .col.gradient-text {
      text-align: left;
  }
      .gradient-text-signup {
          text-align: left;
          line-height: 1.1em;
      font-size: 5em;
      padding-bottom: 20px;
      padding-left: 2px !important;
      margin-bottom: 1rem;
      font-weight: 400 !important;
      /* 1. Define the gradient using your two colors (plus a repeat to make it smooth) */
      background: linear-gradient(
        90deg,
        #450570,
        #fdf3c8,
        #450570
      );
      background-size: 200% auto;              /* Make it twice as wide to allow sliding */
      /* 2. Clip the background to the text and make the text itself transparent */
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      /* 3. Animate the background position */
      animation: slide-gradient 3s linear infinite;
    }
    
    @media (max-width: 600px) {
 .content-grid {
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
    max-width: 600px;
    padding: 2rem;
    text-align: left;
  }
  
  .gradient-text-signup {
      font-size: 3.5em;
  }
  
  .wvc-mailchimp-inner {
      display: flex;
     justify-content: flex-start !important;
  }
  

    }
    
    @media (max-width: 425px) {
          .wvc-button.wvc-mailchimp-submit.theme-button-outline.button {
      margin-top: 10px !important;
  }
    }

    @keyframes slide-gradient {
      0%   { background-position: 0% 50%; }
      100% { background-position: -200% 50%; }
    }

  /* 6) Button styles */
  .wvc-button.wvc-mailchimp-submit.theme-button-outline.button {
    font-family: 'Sifonn', sans-serif;
    border-radius: 0px;
    border: 0.5px solid #fdf3c8 !important;
    color: #fdf3c8 !important;
    background: #450570 !important;
    padding: 0.75em 3em;
    cursor: pointer;
  }
  .wvc-button.wvc-mailchimp-submit.theme-button-outline.button:hover {
    background-color: transparent !important;
  }
  .wvc-button.wvc-mailchimp-submit.theme-button-outline.button {
  /* …your existing styles… */
  transition: 
    background-color 0.3s ease, 
    color 0.3s ease, 
    border-color 0.3s ease;
}

/* Hover state stays the same */
.wvc-button.wvc-mailchimp-submit.theme-button-outline.button:hover {
  background-color: transparent !important;
}

input.wvc-mailchimp-email
 {
     font-family: 'Sifonn' !important;
    margin: 0;
    width: 100%;
    background: transparent !important;
    color: #fdf3c8 !important;
    border: 1px solid #fdf3c8 !important;
}
/* Chrome, Safari, Opera */
input.wvc-mailchimp-email::-webkit-input-placeholder {
  color: #fdf3c8 !important;
  opacity: 1; 
  font-weight: 300 !important;
}

/* Firefox 19+ */
input.wvc-mailchimp-email::-moz-placeholder {
  color: #fdf3c8 !important;
  opacity: 1;
    font-weight: 300 !important;
}

/* Firefox 4 – 18 */
input.wvc-mailchimp-email:-moz-placeholder {
  color: #fdf3c8 !important;
  opacity: 1;
    font-weight: 300 !important;
}

/* Internet Explorer 10+ */
input.wvc-mailchimp-email:-ms-input-placeholder {
  color: #fdf3c8 !important;
    font-weight: 300 !important;
}

input.wvc-mailchimp-email {
  /* more vertical padding */
  padding: 1.25em 1.25em;       
  box-sizing: border-box;
}

/* 1) Make the input + button sit in a row */
.wvc-mailchimp-inner {
  display: flex;
  align-items: center;           /* vertically center them */
  justify-content: center;       /* keep the whole form centered */
  flex-wrap: wrap;               /* fall back to stacked on very narrow viewports if you like */
}

/* 2) Let the email field grow, and add a gap */
.wvc-mailchimp-email-container {
  flex: 1 1 auto;                /* fill all available space */
  margin-right: 0.5rem;          /* space between field and button */
}

/* 3) Keep the button at its intrinsic width */
.wvc-mailchimp-submit-container {
  flex: 0 0 auto;
}

/* 4) Remove the clearfix that would push it down */
.wvc-mailchimp-form .wvc-clear {
  display: none;
}

/* (Optional) Ensure the input still fills its flex container */
input.wvc-mailchimp-email {
  width: 100%;
  min-width: 0;                  /* prevents overflow in some browsers */
}

/* if you want the button to match the new height: */
.wvc-mailchimp-submit-container .wvc-button {
  padding: 1rem 2rem;         /* same top/bottom padding as the input */
}/* End custom CSS */