/* Hides return to top icon on the lower right side of the browser */
#return-to-top {
    display: none !important;
}



/* Add padding above anchor links */
@media (min-width: 992px) {  /* This applies the styles only to screens wider than 991px */
    #pricing::before,
    #pricing-options::before,
    #brochure::before,
    #faqs::before  {
        content: '';
        display: block;
        height: 180px; /* Adjust this to match the height of your sticky header */
        margin-top: -180px; /* Should be the same as height but negative */
        visibility: hidden;
        pointer-events: none;
    }
}



/* Applies the blue-purple gradient color to text */
.gradient-text {
    background: linear-gradient(45deg, #2026EE, #BB01D5);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}



/** Pill button style with blue-purple gradient border for text **/
.pill-wrapper {
  text-align: center;
  padding: 10px 0;
}

.pill {
  display: inline-block;
  margin: 6px;
  padding: 1.5px;
  border-radius: 60px;
  background: linear-gradient(45deg, #2026EE, #BB01D5);
}

.pill-inner {
  background: #ffffff;
  border-radius: 60px;
  padding: 4px 14px;
}

.pill-inner p {
  margin: 0;
  font-family: inherit;
  font-size: 14px !important;
  color: inherit;
}
/*************************************************************/


/** Pill button style with HubSpot orange border for text **/
.pill-wrapper-orange {
  text-align: center;
  padding: 10px 0;
}

.pill-orange {
  display: inline-block;
  margin: 6px;
  padding: 1.5px;
  border-radius: 60px;
  background: #FF5C35; /* solid orange */
}

.pill-inner-orange {
  background: #ffffff;
  border-radius: 60px;
  padding: 4px 14px;
}

.pill-inner-orange p {
  margin: 0;
  font-family: inherit;
  font-size: 14px !important;
  color: inherit;
}

/*************************************************************/



/* New homepage testimonials section - Adds a white border to background */
#new-testimonials-homepage .carousel-cell .hhs-col-inner {
    border: 4px solid white; /* Set a 4px solid white border */
}

/* New homepage hero section - CSS for text with check icons */
#new-hero-section-homepage .icon-text {
    display: flex;
    align-items: flex-start;
    line-height: 1.2;
    margin-bottom: 10px; /* Add some spacing between items if there are multiple blocks */
}

#new-hero-section-homepage .icon {
    flex-shrink: 0; /* Prevents the icon from scaling down */
    width: 32px; /* Fixed width for consistency */
    margin-right: 7px; /* Space between icon and text */
}

#new-hero-section-homepage .text h3 {
    color: #ffffff !important; /* Forces white color, overriding other styles */
}


/* Add blue underline to text links with 3 words max */
    .underline-link {
        position: relative;
        text-decoration: none;
        color: #0000ee;
        display: inline-block;
        overflow: hidden; /* Ensures the underline doesn't extend beyond the text */
    }

    .underline-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 1px; /* Thickness of the underline */
        background-color: #0000ee;
        transition: width 0.3s ease; /* Controls the speed and effect of the animation */
    }

    .underline-link:hover::after {
        width: 100%; /* Underline grows to the full width on hover */
    }


/* Add white underline to text links with 3 words max */
    .underline-link-2 {
        position: relative;
        text-decoration: none;
        color: #ffffff;
        display: inline-block;
        overflow: hidden; /* Ensures the underline doesn't extend beyond the text */
    }

    .underline-link-2::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 1px; /* Thickness of the underline */
        background-color: #ffffff;
        transition: width 0.3s ease; /* Controls the speed and effect of the animation */
    }

    .underline-link-2:hover::after {
        width: 100%; /* Underline grows to the full width on hover */
    }

/* Add black underline to longer text links that split into 2 lines */
.underline-link-split {
    position: relative;
    color: #000000;
    text-decoration: none;
    background-image: linear-gradient(to right, #000000 0%, #000000 100%);
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 0% 100%;
    transition: background-size 0.3s ease;
}

.underline-link-split:hover {
    background-size: 100% 1px; /* Expands the underline across the full width on hover */
}


/* Add white underline to longer text links that split into 2 lines */
.underline-link-split-2 {
    position: relative;
    color: #ffffff;
    text-decoration: none;
    background-image: linear-gradient(to right, #ffffff 0%, #ffffff 100%);
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 0% 100%;
    transition: background-size 0.3s ease;
}

.underline-link-split-2:hover {
    background-size: 100% 1px; /* Expands the underline across the full width on hover */
}



/* Center align heading on small screens */
@media (max-width: 991px) {
  .center-align-heading {
    text-align: center !important;
  }
}



  <!-- ===================== -->
  <!-- HOMEPAGE IMAGE FLOAT ANIMATIONS -->
  <style>
   .hero-svg {
  width: 100%;
  max-width: 1000px;
  height: auto;
  display: block;
  margin: auto;
  overflow: visible;
}

/* IMPORTANT for SVG transforms */
.hero-svg image {
  transform-box: fill-box;
  transform-origin: center;
}

/* ===================== */
/* POSITIONING */
/* ===================== */

.img1 { x: 538px; y: 345px; width: 1079px; height: 1775px; }

.img2 { x: 1731px; y: 2072px; width: 371px; height: 376px; }

.img3 { x: 1682px; y: 319px; width: 141px; height: 142px; }

.img4 { x: 365px; y: 2045px; width: 146px; height: 150px; }

.img5 { x: 156px; y: 514px; width: 259px; height: 256px; }

.img6 { x: 0px; y: 8px; width: 634px; height: 634px; }

.img7 { x: 238px; y: 626px; width: 495px; height: 494px; }

.img8 { x: 615px; y: 72px; width: 506px; height: 506px; }

.img9 { x: 317px; y: 461px; width: 1568px; height: 1659px; }

.img9-glow { x: 317px; y: 461px; width: 1568px; height: 1659px; }

/* ANIMATION */

/* Circles */
.img2 { animation: warp1 4.5s ease-in-out infinite; }
.img3 { animation: warp2 5.5s ease-in-out infinite; }
.img4 { animation: warp3 4s ease-in-out infinite; }
.img5 { animation: warp4 6s ease-in-out infinite; }

/* Warp 1 */
@keyframes warp1 {
  0%   { transform: translate(0, 0) scale(1,1); }
  25%  { transform: translate(12px, -14px) scale(1.08, 0.95); }
  50%  { transform: translate(-10px, -28px) scale(0.95, 1.1); }
  75%  { transform: translate(8px, -12px) scale(1.05, 0.97); }
  100% { transform: translate(0, 0) scale(1,1); }
}

/* Warp 2 */
@keyframes warp2 {
  0%   { transform: translate(0, 0) scale(1,1); }
  25%  { transform: translate(-14px, -18px) scale(1.1, 0.94); }
  50%  { transform: translate(10px, -30px) scale(0.93, 1.12); }
  75%  { transform: translate(-6px, -10px) scale(1.06, 0.96); }
  100% { transform: translate(0, 0) scale(1,1); }
}

/* Warp 3 */
@keyframes warp3 {
  0%   { transform: translate(0, 0) scale(1,1); }
  25%  { transform: translate(10px, -12px) scale(1.07, 0.95); }
  50%  { transform: translate(-12px, -26px) scale(0.94, 1.1); }
  75%  { transform: translate(6px, -10px) scale(1.04, 0.97); }
  100% { transform: translate(0, 0) scale(1,1); }
}

/* Warp 4 */
@keyframes warp4 {
  0%   { transform: translate(0, 0) scale(1,1); }
  25%  { transform: translate(-8px, -14px) scale(1.09, 0.93); }
  50%  { transform: translate(14px, -32px) scale(0.92, 1.13); }
  75%  { transform: translate(-6px, -16px) scale(1.05, 0.95); }
  100% { transform: translate(0, 0) scale(1,1); }
}

/* Boxes */
.img6 {
  animation: floatBox1 7s ease-in-out infinite;
}

.img7 {
  animation: floatBox2 3s ease-in-out infinite;
}

.img8 {
  animation: floatBox3 5s ease-in-out infinite;
}

@keyframes floatBox1 {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

@keyframes floatBox2 {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0px); }
}

@keyframes floatBox3 {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-40px); }
  100% { transform: translateY(0px); }
}

/* ===================== */
/* NEON GLOW (GRADIENT IMG 9) */
/* ===================== */

.img9-glow {
  opacity: 0.55;
  mix-blend-mode: screen;

  transform-origin: center;
  transform-box: fill-box;

  animation: glowBreath 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform, opacity, filter;
  filter:
    blur(70px)
    saturate(1.8)
    contrast(1.1);
}

@keyframes glowBreath {
  0% {
    opacity: 0.45;
    transform: scale(1);
    filter: blur(55px) saturate(1.2);
  }

  25% {
    opacity: 0.7;
    transform: scale(1.03);
    filter: blur(70px) saturate(1.4);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
    filter: blur(90px) saturate(1.6);
  }

  75% {
    opacity: 0.75;
    transform: scale(1.04);
    filter: blur(75px) saturate(1.4);
  }

  100% {
    opacity: 0.45;
    transform: scale(1);
    filter: blur(55px) saturate(1.2);
  }
}

  <!-- END OF HOMEPAGE IMAGE FLOAT ANIMATIONS -->
  <!-- ===================== -->