/* --- This website was made with great difficulty by some corporate sluts "slayve giiirl 💅" --- */

/* --- Style mobile menu buttons --- */

@media (max-width: 767px) {

  /* This forces the container to behave */
  .hhs-side-menu__ctas .hhs-header-cta {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    padding: 0 !important; /* Reset container padding */
    box-sizing: border-box !important;
  }

  /* This forces the wrappers to share space */
  .hhs-side-menu__ctas .hhs-head-cta-1,
  .hhs-side-menu__ctas .hhs-head-cta-2 {
    flex: 1 !important;      /* Share the remaining space */
    min-width: 0 !important; /* Crucial: Allows button to shrink */
    margin: 0 !important;   
    padding: 0 !important;   
  }
  
  /* Create the 8px gap */
  .hhs-side-menu__ctas .hhs-head-cta-1 {
    margin-right: 8px !important; 
  }
  .hhs-side-menu__ctas .hhs-head-cta-2 {
    margin-left: 8px !important;  
  }

  /* This forces the link to fill its wrapper */
  .hhs-side-menu__ctas .hhs-header-cta a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important; 
    margin: 0 !important;
  }
}

/* This media query targets mobile screens. 
  You may need to adjust the '767px' value if your
  theme's mobile breakpoint is different.
*/
@media (max-width: 767px) {
  
  /* This targets the inner logo wrappers. 
    Adding padding here will add 10px to any existing
    padding on the main .hhs-header-logo container,
    effectively "increasing" it by 10px.
  */
  .hhs-header-logo .logo-standard,
  .hhs-header-logo .logo-sticky {
    padding-left: 0px;
  }
}

/* Custom Footer Style */

.footer__container {
  background-color: #E8EAE7; 
}

.hhs-footer-mod {
  /* NEW RULES TO CENTER AND SET MAX WIDTH */
  max-width: 1380px;   /* Sets the MAXIMUM width */
  margin-left: auto;   /* Centers the container */
  margin-right: auto;  /* Centers the container */
  
  /* We convert your margins to padding to keep the spacing */
  /* INSIDE the 1400px wide box. */
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box; /* Ensures padding is included in the 1410px */

  /* Your original design elements */
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  .hhs-footer-mod {
    /* On mobile, we now adjust the padding so the text is closer to the edge */
    margin-left: 20px;
    margin-right: 20px;
  }
}

/* Apply the Space Grotesk font to the element with the class "hhs-foot-copyright".
  The 'sans-serif' is a fallback font in case Space Grotesk fails to load.
*/
.hhs-foot-copyright {
  font-family: 'Space Grotesk', sans-serif;
}

/* This targets every single number */
.page-number {
    border-radius: 51px;
    font-family: 'Space Grotesk', sans-serif;
    width: 40px;
    height: 40px;
}

.portfolio-grid.masonry-grid img {
    border-radius: 16px;
}

/* Icon and text box radius */
.custom-icon-module {
  border-radius: 16px;
  margin: 24px 0 40px;
  box-shadow: 16px 15px 40px rgba(18, 20, 16, 0.05);
}

/* Price comparison table */
.hhs-price-compare-mod .pack-feature {
    font-size: 18px;
 display: table-cell !important; 
}

.hhs-price-compare-mod .pack-price .txt-top,
.hhs-price-compare-mod .pack-price .txt-l {
    font-family: 'Space Grotesk', sans-serif;
}

.hhs-price-compare-mod .pack-title {
    font-size: 24px;
    font-family: 'Space Grotesk', sans-serif;
}

.image-gallery-shadow img {
  /*
    - X-axis offset: 16px
    - Y-axis offset: 15px
    - Blur radius: 40px
    - Spread radius: 0px
    - Shadow Color: #121410 with 5% opacity (converted to rgba)
  */
  box-shadow: 16px 15px 40px 0px rgba(18, 20, 16, 0.05);
  -webkit-box-shadow: 16px 15px 40px 0px rgba(18, 20, 16, 0.05);
  -moz-box-shadow: 16px 15px 40px 0px rgba(18, 20, 16, 0.05);
} 

.c-card {
  /*
    - X-axis offset: 16px
    - Y-axis offset: 15px
    - Blur radius: 40px
    - Spread radius: 0px
    - Shadow Color: #121410 with 5% opacity (converted to rgba)
  */
  box-shadow: 16px 15px 40px 0px rgba(18, 20, 16, 0.05);
  -webkit-box-shadow: 16px 15px 40px 0px rgba(18, 20, 16, 0.05);
  -moz-box-shadow: 16px 15px 40px 0px rgba(18, 20, 16, 0.05);
}

/*
  Add this CSS to your HubSpot stylesheet to increase
  the space between the two columns *inside* an s-curve module.
*/

/* Use a media query to apply this spacing only on tablet/desktop 
  (screens 768px and wider) where columns are side-by-side.
*/
@media (min-width: 768px) {
  /* Target the first column (text) inside an s-curve element */
  .s-curve .c-col.c-1 {
    padding-right: 32px; /* Adjust this 30px value as needed */
  }

  /* Target the second column (image) inside an s-curve element */
  .s-curve .c-col.c-2 {
    padding-left: 32px; /* Adjust this 30px value as needed */
  }
}

/* =========================================== */
/* BASE BUTTON STYLES (Desktop)
/* This ONE class now defines the shape, position,
/* and layout for ALL your buttons.
/* =========================================== */

.standard-btn {
  /* --- Layout & Box Model --- */
  display: inline-flex;  
  justify-content: center; 
  align-items: center;   
  box-sizing: border-box;
  position: relative; 
    
  /* --- Appearance & Feel --- */
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 0 0 5px transparent;
  border-radius: 51.5px; 

  /* * PADDING IS REMOVED FROM HERE
   * Your padding will now be defined by your
   * .cta-primary, .cta-secondary, etc. classes
   * or another class you are using.
   */
  
  /* --- Animation --- */
  transition: all 0.3s ease;
}

/* --- Base Pseudo-Element --- */
/* This defines the SHAPE of the outer border */
.standard-btn::after {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 51.5px; 
  z-index: -1;
  transition: all 0.3s ease;
  border: 0.1em solid transparent; 
}

/* =========================================== */
/* MODIFIER STYLES (Desktop)
/* These classes ONLY change what's unique,
/* primarily colors and hover effects.
/* =========================================== */

/* --- Primary --- */
.cta-primary {
  border: 0.1em solid #267700;
  /* color: #267700; (Set text color here) */
  /* background-color: #fff; (Set bg color here) */
}
.cta-primary::after {
  border-color: #267700;
}
/* .cta-primary:hover { ... } */


/* --- Secondary --- */
.cta-secondary {
  border: 0.1em solid #8CDC59;
}
.cta-secondary::after {
  border-color: #8CDC59;
}
.cta-secondary:hover {
  border-color: #267700;
}
/* Note: The hover for ::after is not needed,
   it will inherit from the main hover rule */


/* --- Tertiary --- */
.cta-tertiary {
  border: 0.1em solid #FFC7E4;
}
.cta-tertiary::after {
  border-color: #FFC7E4;
}
.cta-tertiary:hover::after {
  border-color: #FFA5D3;
}


/* --- Four --- */
.cta-four {
  border: 0.1em solid #083400;
}
.cta-four::after {
  border-color: #083400;
}
.cta-four:hover {
  border-color: #267700;
  border-width: 0.1em; /* Explicitly set width on hover */
}
.cta-four:hover::after {
  border-color: #267700;
}


/* --- Five --- */
.cta-five {
  background-color: transparent;
  border: 0.1em solid #E8EAE7;
}
.cta-five::after {
  border-color: #E8EAE7;
}
.cta-five:hover {
  background-color: transparent;
  border-color: #8CDC59;
  border-width: 0.1em; /* Explicitly set width on hover */
  color: #8CDC59;
}
.cta-five:hover::after {
  border-color: #8CDC59;
}


/* --- Six --- */
.cta-six {
  border: 0.1em solid #FFC7E4
}
.cta-six::after {
  border-color: #FFC7E4;
}
.cta-six:hover {
  border-color: #FFFFFF;
  border-width: 0.1em; /* Explicitly set width on hover */
  color: #FFFFFF;
}
.cta-six:hover::after {
  border-color: #FFFFFF;
}

/* --- HubSpot Button --- */
.hs-button {
  border: 0.1em solid #267700;
}
.hs-button::after {
  border-color: #267700;
}
/* .hs-button:hover { ... } */

/* =========================================== */
/* UNIVERSAL MOBILE STYLES (<= 767px)
/* This ONE block replaces all your old mobile hacks.
/* =========================================== */

@media (max-width: 767px) {
  
  /** * 1. The Container (for 2-button layouts)
   */
  .c-content-con {
    display: flex;
    flex-wrap: wrap;           
    justify-content: center;   
    gap: 8px;                    
  }

  /**
   * 2. The Button Wrapper (for 2-button layouts)
   * The ineffective margin reset has been REMOVED from here.
   */
  .c-cta-con {
    display: flex;
    flex-grow: 1;            
    flex-basis: 220px;
  }

  /**
   * 3. THE UNIVERSAL BUTTON RULE
   * This applies to ALL buttons.
   */
  .standard-btn {
    width: 100%;  /* Makes button full-width in its container */
    
    /* Override desktop padding for a consistent mobile feel */
    padding-left: 24px;
    padding-right: 24px;
  }
  
  /* ==================================================== */
  /* 💥 FIX: Override Imbalanced Margin with Specificity */
  /* ==================================================== */
  .c-content-con .c-cta-con {
    /* Use the chained selector to increase specificity! */
    margin-left: 0;
    margin-right: 0;
    
    /* If you still need the top/bottom 5px, add them here: */
    /* margin-top: 5px; */
    /* margin-bottom: 5px; */
  }

  /* ==================================================== */
  /* 💥 EMERGENCY FIX: STOP MOBILE OVERFLOW               */
  /* ==================================================== */
  
  /* 1. Nuke any inherited left margins from the desktop '~' selectors */
  .c-cta-con ~ .c-cta-con,
  .standard-btn ~ .standard-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 2. Force strict box-sizing so padding never breaks the 100% width */
  .c-cta-con, 
  .standard-btn {
    box-sizing: border-box !important;
    max-width: 100% !important; 
  }
}

/* =========================================== */
/* STYLING FOR HEADER BUTTONS (DESKTOP)
/* =========================================== */

/* --- 1. SHARED Base Styles --- */
/* These rules apply to BOTH header buttons */
.hhs-head-cta-1 a,
.hhs-head-cta-2 a {
  /* Layout */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  
  /* Box Model & Appearance */
  box-sizing: border-box;
  box-shadow: 0 0 0 5px transparent;
  border-radius: 50px;
  
  /* Interaction */
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* --- 2. SHARED Outer Border Shape --- */
/* This creates the outer ring for BOTH buttons */
.hhs-head-cta-1 a::after,
.hhs-head-cta-2 a::after {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 50px; 
  z-index: -1;
  transition: all 0.3s ease;
}

/* --- 3. hhs-head-cta-1 (like cta-four) --- */
.hhs-head-cta-1 a {
  border: 0.1em solid #083400;
  /* Add text color if needed, e.g., color: #083400; */
}
.hhs-head-cta-1 a::after {
  border: 0.1em solid #083400;
}
.hhs-head-cta-1 a:hover {
  border-color: #267700;
}
.hhs-head-cta-1 a:hover::after {
  border-color: #267700;
}

/* --- 4. hhs-head-cta-2 (like cta-primary) --- */
.hhs-head-cta-2 a {
  border: 0.1em solid #267700;
  /* Add text color if needed, e.g., color: #267700; */
}
.hhs-head-cta-2 a::after {
  border: 0.1em solid #267700;
}
.hhs-head-cta-2 a:hover {
  /* Add cta-primary hover styles if you have them */
}
.hhs-head-cta-2 a:hover::after {
  /* Add cta-primary hover styles if you have them */
}
/* =========================================== */


/* === Refactored CSS (v3) === */

/* 1. COMMON: Container styles */
.robot-product-feature .c-col:nth-child(2) .c-in-6 {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

/* 2. COMMON: Wrapper styles */
.robot-product-feature .c-col:nth-child(2) .c-in-6 .c-cta-con {
  flex-grow: 1;
  flex-basis: 0;
  display: flex;
}

/* 3. COMMON: Button styles */
.robot-product-feature .c-col:nth-child(2) .c-in-6 .c-cta-con .standard-btn {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 4. UNIQUE: Mobile stacking */
@media (max-width: 767px) {
  .robot-product-feature .c-col:nth-child(2) .c-in-6 {
    flex-direction: column;
    align-items: stretch;
  }
}


/*
============================================
Custom HubSpot Accordion CSS (Final)
============================================
*/

/* --- 1. TITLE STYLES --- */
.accordion-title-style .accordion-title {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  /* Add this just in case to make sure 
     the icon's positioning is relative to the title */
  position: relative !important;
}

.accordion-title-style .accordion-title h4 {
  margin: 0 !important;
  padding: 0 !important;
  /* NEW: Override the inherited letter-spacing */
  letter-spacing: 0px !important;
}

/*
  NEW: 3. ALIGN THE ICON
*/
/*
  This targets the arrow icon. We need to
  manually set its 'top' position to be
  centered with the text, which starts at 32px.
*/
.accordion-title-style .accordion-title::before,
.accordion-title-style .accordion-title::after {
  /*
    This is a "magic number" to find the new
    vertical center. Start with 40px and
    adjust it up or down by a few pixels
    (e.g., 38px, 42px) until it looks perfect.
  */
  top: 28px !important;
}


/* --- 2. CONTENT ALIGNMENT --- */
.accordion-title-style .hhs-accordion-content {
  padding-left: 15px !important; 
}

.accordion-title-style .hhs-accordion-content .hs_cos_wrapper_widget {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.accordion-title-style .hhs-accordion-content p {
  text-indent: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* === 1. Animated Links === */
/* MODIFIED: Now includes exclusions for .hs-button and any class starting with "cta-"
   This prevents the code from touching your buttons at all.
*/
.mega-menu a:not(:has(img)):not(.hs-button):not([class*="cta-"]),
main a:not(:has(img)):not(.hs-button):not([class*="cta-"]),
[class*="rich-text"] a:not(:has(img)):not(.hs-button):not([class*="cta-"])
{
  /* Base style for animated links */
  color: #083400; 
  text-decoration: none;
  
  /* The underline animation properties */
  background-image: linear-gradient(#267700, #267700);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: color 0.6s ease, background-size 0.6s ease;
}

/* MODIFIED: Hover selectors must match the exclusions above.
*/
.mega-menu a:not(:has(img)):not(.hs-button):not([class*="cta-"]):hover,
main a:not(:has(img)):not(.hs-button):not([class*="cta-"]):hover,
[class*="rich-text"] a:not(:has(img)):not(.hs-button):not([class*="cta-"]):hover
{
  color: #267700 !important; 
  background-size: 100% 1px;
}


/* === 2. Non-Animated Links (Resets) === */
/*
  These rules are for links that SHOULD NOT have the animation.
  They are specific enough to override the general rules above.
*/

/* Targets the TOP-LEVEL main menu links */
.sc-site-header__menu > .hhs-nav-links > .hs-menu-item > a {
  color: #083400; /* Set a base color */
  text-decoration: none;
  
  /* Reset animation properties */
  background-image: none;
  transition: color 0.3s ease; /* Only transition color */
}

.sc-site-header__menu > .hhs-nav-links > .hs-menu-item > a:hover {
  color: #267700 !important; /* Simple color change on hover */
}

/*
  A general reset for buttons or CTAs.
  IMPROVEMENT: Added '.btn a', etc., to also reset links *inside* a button element.

*/
.btn, a.btn, .button, a.button, .cta, a.cta,
.btn a, .button a, .cta a
{
  text-decoration: none;

  /* Explicitly turn off the underline animation */
  background-image: none;
  background-size: 0 0;
  transition: background-color 0.6s ease, color 0.6s ease; /* Add normal button transitions */
}

.btn:hover, a.btn:hover, .button:hover, a.button:hover, .cta:hover, a.cta:hover,
.btn a:hover, .button a:hover, .cta a:hover
{
  /* Ensure hover doesn't trigger the underline */
  background-size: 0 0;  
  color: inherit; /* You may need to adjust button hover colors here */
}


/* === 3. SVG Icon Styling === */
/*
  This key rule tells SVGs inside *any* link to inherit 
  the link's current color (both on hover and off).
*/
a svg {
  fill: currentColor;
}

/* --- Bullet Point List Mofifiers --- */
.c-custom-bullets-con {
  padding-left: 0 !important;
  margin-left: 0 !important;
  padding-inline-start: 0 !important;
  list-style-type: none;
}

/* --- 1. Remove all old/default borders --- */
.tabs-container .c-tab,
.tabs-container .c-tab.active {
  border: none !important; /* Wipes any existing HubSpot borders */
  
  /* We still need this to prevent the "jump"
     when the underline appears/disappears */
  padding-bottom: 8px;
}

/* --- 2. Style the STANDARD (non-active) tab --- */
.tabs-container .c-tab {
  /* --- 2a. This creates the underline --- */
  text-decoration: underline !important;
  
  /* --- 2b. This is your "THICKNESS" --- */
  text-decoration-thickness: 2px !important; /* Adjust 3px as needed */
  
  /* --- 2c. Underline color for STANDARD state --- */
  text-decoration-color: #E8EAE7 !important; /* A light gray */
  
  /* Moves the line down, away from the text */
  text-underline-offset: 8px !important; /* Should match padding-bottom */
  
  /* Smooth color change */
  transition: text-decoration-color 0.2s ease;
}

/* --- 3. Style the ACTIVE tab's underline --- */
.tabs-container .c-tab.active {
  /* --- 3a. Underline color for ACTIVE state --- */
  text-decoration-color: #267700 !important; /* Your brand color */
}

/* --- 4. (Optional) Hover effect for non-active tabs --- */
.tabs-container .c-tab:not(.active):hover {
  text-decoration-color: #267700 !important; 
}


/* Tablet & Desktop (768px and up) 
   Upgraded to include tablets and use the resilient '~' selector
*/
@media (min-width: 768px) {

  /* SCENARIO 1: The buttons are inside the wrappers */
  /* The '~' ignores hidden tracking pixels injected by HubSpot */
  .c-cta-con ~ .c-cta-con {
    margin-left: 16px; /* I bumped this to 16px to match mobile, adjust if needed! */
  }

  /* SCENARIO 2: Buttons sitting naked side-by-side (Global Backup) */
  .standard-btn ~ .standard-btn {
    margin-left: 16px;
  }

}

/* MOBILE MENU SPACING ONLY (Applies to screens 991px and smaller) */
@media (max-width: 991px) {

  /* 1. Space out the Top CTA Buttons (Get in Touch / Request Demo) */
  .hhs-header-cta a {
    display: block;       /* Stacks them vertically ONLY on mobile */
    margin-bottom: 16px;  /* Adds space below each button */
  }

  /* Add space between the whole CTA section and the start of the Menu links */
  .hhs-side-menu__ctas {
    margin-bottom: 32px; 
    padding-top: 32px;   
  }

  /* 2. Space out the Main Menu Items (Level 1 - ROBOTS, etc.) */
  .sc-site-header__menu .hs-menu-depth-1 > a {
    padding-top: 24px;    
    padding-bottom: 24px; 
    display: flex;        
    align-items: center;  
  }

  /* 3. Space out the Sub-Menu Items (Level 2 - Sport, Pro X, etc.) */
  .sc-site-header__menu .hs-menu-depth-2 > a {
    padding-top: 16px;
    padding-bottom: 16px;
    display: block;
  }

}


/* ==================================================
   SIDE MENU LINK HIERARCHY 
   ================================================== */

@media screen and (max-width: 767px) {
  
  /* Target links inside Depth 2 (The Children) */
  li.hs-menu-item.hs-menu-depth-2 > a {
    font-size: 16px !important;    /* Make font smaller (Adjust as needed) */
    font-weight: 400 !important;   /* Make weight lighter (Optional) */
    padding-top: 16px !important;  /* Reduce vertical spacing if needed */
    padding-bottom: 10px !important;
    
    /* Optional: Add a slight indent to visually separate from parent */
    padding-left: 16px !important; 
    opacity: 0.9; /* Slight fade to de-emphasize */
  }

  /* Ensure the Parent (Depth 1) stays big */
  li.hs-menu-item.hs-menu-depth-1 > a {
     /* This ensures we don't accidentally shrink the word ROBOTS */
     font-size: 16px; 
  }
}

/* ==================================================
   TIMELINE MODULE CUSTOMIZATIONS
   ================================================== */

/* Date Styling & Alignment */
.hhs-timeline-mod .timeline-date {
    /* Font change to Space Grotesk */
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;     
}

/*Start/End Bubbles Text */
.hhs-timeline-mod .timeline-end p,
.hhs-timeline-mod .timeline-start p {
    font-family: 'Space Grotesk', sans-serif;  
}

/* Only applies to screens smaller than 768px (standard mobile breakpoint) */
@media screen and (max-width: 767px) {
  #hs_cos_wrapper_global_footer_ {
    text-align: center !important;
  }